From 2b1b537f671a71761d1264538a40ee9dad93b1d1 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Nicolas <6371790+pynicolas@users.noreply.github.com> Date: Sat, 7 Jun 2025 07:17:55 +0200 Subject: [PATCH] DocumentScreen layout: big image + miniatures --- .../mydomain/myscan/view/DocumentScreen.kt | 104 +++++++++++++----- 1 file changed, 74 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/org/mydomain/myscan/view/DocumentScreen.kt b/app/src/main/java/org/mydomain/myscan/view/DocumentScreen.kt index 50a1885..f7b39fd 100644 --- a/app/src/main/java/org/mydomain/myscan/view/DocumentScreen.kt +++ b/app/src/main/java/org/mydomain/myscan/view/DocumentScreen.kt @@ -20,26 +20,34 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.ArrowBack +import androidx.compose.material.icons.filled.Add +import androidx.compose.material.icons.filled.Clear +import androidx.compose.material.icons.filled.Close import androidx.compose.material.icons.filled.Share import androidx.compose.material3.BottomAppBar import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold +import androidx.compose.material3.SmallFloatingActionButton import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarDefaults @@ -78,22 +86,26 @@ fun DocumentScreen( ) }, bottomBar = { - BottomAppBar( - containerColor = Color.Transparent - ) { - Row( - modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceEvenly - ) { - Button(onClick = onSharePressed) { - Icon(Icons.Default.Share, contentDescription = "Share") - Spacer(Modifier.width(8.dp)) - Text("Share") + Column { + PageList(pageIds, imageLoader) + BottomAppBar( + actions = { + Button(onClick = onSharePressed) { + Icon(Icons.Default.Share, contentDescription = "Share") + Spacer(Modifier.width(8.dp)) + Text("Share") + } + Spacer(modifier = Modifier.size(8.dp)) + Button(onClick = onSavePressed) { + Text("Save") + } + }, + floatingActionButton = { + FloatingActionButton(onClick = onBackPressed) { + Icon(Icons.Default.Close, contentDescription = "Close") + } } - Button(onClick = onSavePressed) { - Text("Save") - } - } + ) } } ) { padding -> DocumentPreview(pageIds, padding, imageLoader, onDeleteImage) } @@ -106,37 +118,69 @@ private fun DocumentPreview( imageLoader: (String) -> Bitmap, onDeleteImage: (String) -> Unit, ) { - Box( + Column ( modifier = Modifier .fillMaxSize() .background(MaterialTheme.colorScheme.surfaceContainer) - .padding(PaddingValues(top = padding.calculateTopPadding())) + .padding(padding) ) { - Text( - "${pageIds.size} pages", - modifier = Modifier.padding(start = 16.dp, top = 16.dp).align(Alignment.TopStart), - style = MaterialTheme.typography.titleMedium - ) - LazyColumn ( - contentPadding = PaddingValues(20.dp), + + Box ( + modifier = Modifier.fillMaxSize() + ) { + // TODO Make it possible to zoom on the image + Image( + bitmap = imageLoader(pageIds[0]).asImageBitmap(), + contentDescription = null, + modifier = Modifier + .padding(4.dp) + .align(Alignment.Center) + ) + Text("1 / ${pageIds.size}", + color = MaterialTheme.colorScheme.inverseOnSurface, + modifier = Modifier.align(Alignment.BottomEnd) + .padding(all = 8.dp) + .background(MaterialTheme.colorScheme.inverseSurface.copy(alpha = 0.5f)) + .padding(all = 4.dp) + ) + } + } +} + +@Composable +private fun PageList( + pageIds: List, + imageLoader: (String) -> Bitmap +) { + Box { + LazyRow( + contentPadding = PaddingValues(8.dp), modifier = Modifier - .padding(horizontal = 16.dp) - .align(Alignment.Center), - verticalArrangement = Arrangement.spacedBy(12.dp) + .fillMaxWidth() + .padding(vertical = 4.dp) + .background(MaterialTheme.colorScheme.secondaryContainer), + horizontalArrangement = Arrangement.spacedBy(8.dp) ) { items(pageIds) { id -> - // TODO Display small images rather than big ones - // TODO Make it possible to zoom on an image + // TODO Use small images rather than big ones val bitmap = imageLoader(id).asImageBitmap() Image( bitmap = bitmap, contentDescription = null, modifier = Modifier - .size(200.dp) + .height(120.dp) .padding(4.dp) ) } } + SmallFloatingActionButton( + onClick = {}, + modifier = Modifier + .align(Alignment.CenterEnd) + .padding(8.dp) + ) { + Icon(imageVector = Icons.Default.Add, contentDescription = "Add page") + } } }