Display selected images in sample app (#10)

onseok · Dec 10, 2023 · a78d9b1 · a78d9b1
1 parent 4053495
commit a78d9b1
Showing 1 changed file with 32 additions and 5 deletions.
diff --git a/sample/common/src/commonMain/kotlin/com/preat/peekaboo/common/App.kt b/sample/common/src/commonMain/kotlin/com/preat/peekaboo/common/App.kt
@@ -1,33 +1,48 @@
 package com.preat.peekaboo.common
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import com.preat.peekaboo.image.picker.SelectionMode
 import com.preat.peekaboo.image.picker.rememberImagePickerLauncher
+import com.preat.peekaboo.image.picker.toImageBitmap
 
 @Suppress("FunctionName")
 @Composable
 fun App() {
     val scope = rememberCoroutineScope()
+    var images by remember { mutableStateOf(listOf<ImageBitmap>()) }
 
     val singleImagePicker =
         rememberImagePickerLauncher(
             selectionMode = SelectionMode.Single,
             scope = scope,
             onResult = { byteArrays ->
                 byteArrays.firstOrNull()?.let {
-                    // Process the selected images' ByteArrays.
-                    println(it)
+                    images = listOf(it.toImageBitmap())
                 }
             },
         )
@@ -39,9 +54,8 @@ fun App() {
             selectionMode = SelectionMode.Multiple(maxSelection = 5),
             scope = scope,
             onResult = { byteArrays ->
-                byteArrays.forEach {
-                    // Process the selected images' ByteArrays.
-                    println(it)
+                images = byteArrays.map { byteArray ->
+                    byteArray.toImageBitmap()
                 }
             },
         )
@@ -55,6 +69,19 @@ fun App() {
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
+            LazyRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                items(images) { image ->
+                    Image(
+                        bitmap = image,
+                        contentDescription = "Selected Image",
+                        modifier = Modifier
+                            .size(100.dp)
+                            .clip(CircleShape),
+                        contentScale = ContentScale.Crop
+                    )
+                }
+            }
+            Spacer(modifier = Modifier.height(20.dp))
             Button(
                 onClick = {
                     singleImagePicker.launch()