ListWithUpdatableItem

app/src/main/java/net/kwmt27/jetpackcomposeplayground/NavHost.kt

@@ -45,6 +45,7 @@ import net.kwmt27.jetpackcomposeplayground.Destinations.SAMPLES_UP_ICON
 import net.kwmt27.jetpackcomposeplayground.Destinations.SAMPLES_VERTICAL_LIST
 import net.kwmt27.jetpackcomposeplayground.Destinations.SLIDE_POTATOTIPS82
 import net.kwmt27.jetpackcomposeplayground.Destinations.SLIDE_SHIBUYAAPK43
+import net.kwmt27.jetpackcomposeplayground.Destinations.UPDATABLE_ITEM_LIST
 import net.kwmt27.jetpackcomposeplayground.animation.AnimateAsStateDemo
 import net.kwmt27.jetpackcomposeplayground.animation.AnimatedContentSizeDemo
 import net.kwmt27.jetpackcomposeplayground.animation.AnimatedVisibilityDemo
@@ -59,6 +60,7 @@ import net.kwmt27.jetpackcomposeplayground.coroutine.CancellationExceptionSample
 import net.kwmt27.jetpackcomposeplayground.edittext.OutlinedTextFieldSample
 import net.kwmt27.jetpackcomposeplayground.icon.UpIconSample
 import net.kwmt27.jetpackcomposeplayground.image.CircleImageSample
+import net.kwmt27.jetpackcomposeplayground.list.ListWithUpdatableItem
 import net.kwmt27.jetpackcomposeplayground.list.SampleHorizontalList
 import net.kwmt27.jetpackcomposeplayground.list.SampleVerticalList
 import net.kwmt27.jetpackcomposeplayground.list.StickyListSample
@@ -87,6 +89,7 @@ private object Destinations {
  private const val VERTICAL_LIST = "vertical-list"
  private const val HORIZONTAL_LIST = "horizontal-list"
  private const val STICKY_LIST = "sticky-list"
+ private const val UPDATABLE_LIST = "ListWithUpdatableItem"
  private const val ANIMATION = "animation"
  private const val ANIMATION_TRANSITION = "animation-transition"
  private const val ANIMATION_AUTO_ROLLING_TEXT = "animation-auto-rolling-text"
@@ -103,6 +106,7 @@ private object Destinations {
  const val SAMPLES_VERTICAL_LIST = "/$SAMPLES/$VERTICAL_LIST"
  const val SAMPLES_HORIZONTAL_LIST = "/$SAMPLES/$HORIZONTAL_LIST"
  const val SAMPLES_STICKY_LIST = "/$SAMPLES/$STICKY_LIST"
+ const val UPDATABLE_ITEM_LIST = "/$SAMPLES/$UPDATABLE_LIST"
  const val SAMPLES_ANIMATION_CHANGE_COLOR = "/$SAMPLES/$ANIMATION"
  const val SAMPLES_ANIMATION_TRANSITION = "/$SAMPLES/$ANIMATION_TRANSITION"
  const val SAMPLES_ANIMATION_AUTO_ROLLING_TEXT = "/$SAMPLES/$ANIMATION_AUTO_ROLLING_TEXT"
@@ -185,6 +189,12 @@ private val destinationList = listOf(
  content = { StickyListSample() },
  codeUrl = "https://github.com/kwmt/JetpackComposePlayGround/blob/main/app/src/main/java/net/kwmt27/jetpackcomposeplayground/list/List.kt#L116-L155"
  ),
+ Destination(
+ route = UPDATABLE_ITEM_LIST,
+ label = "ListWithUpdatableItem",
+ content = { ListWithUpdatableItem() },
+ codeUrl = ""
+ ),
  )
  ),
  Group(

app/src/main/java/net/kwmt27/jetpackcomposeplayground/list/GridCustomItem.kt

@@ -0,0 +1,60 @@
+package net.kwmt27.jetpackcomposeplayground.list
+
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material.Text
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import net.kwmt27.jetpackcomposeplayground.ui.theme.JetpackComposePlayGroundTheme
+
+@Composable
+fun GridCustomItem() {
+ val sections = (0 until 25).toList().chunked(5)
+ LazyVerticalGrid(
+ columns = GridCells.Fixed(3),
+ horizontalArrangement = Arrangement.spacedBy(16.dp),
+ verticalArrangement = Arrangement.spacedBy(16.dp)
+ ) {
+ sections.forEachIndexed { index, items ->
+ item(span = { GridItemSpan(maxLineSpan) }) {
+ Text(
+ "This is section $index",
+ Modifier
+ .border(1.dp, Color.Gray)
+ .height(80.dp)
+ .wrapContentSize()
+ )
+ }
+ items(
+ items,
+ // not required as it is the default
+ span = { GridItemSpan(1) }
+ ) {
+ Text(
+ "Item $it",
+ Modifier
+ .border(1.dp, Color.Blue)
+ .height(80.dp)
+ .wrapContentSize()
+ )
+ }
+ }
+ }
+}
+
+@Preview
+@Composable
+fun PreviewGridCustomItem() {
+ JetpackComposePlayGroundTheme {
+ GridCustomItem()
+ }
+}

app/src/main/java/net/kwmt27/jetpackcomposeplayground/list/List.kt

@@ -8,14 +8,23 @@ import androidx.compose.foundation.layout.Column
 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.LazyListState
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.Divider
+import androidx.compose.material.Icon
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Person
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -111,6 +120,7 @@ fun PreviewSampleHorizontalList() {
 
 private data class Contact(val firstName: String)
 
+private const val TAG: String = "LIST"
 private val contacts =
  listOf<Contact>(
  Contact("AAA"),
@@ -176,3 +186,83 @@ fun PreviewStickyListSample() {
  StickyListSample()
  }
 }
+
+@Composable
+fun ListWithUpdatableItem() {
+ val list = listOf("AAA", "BBB", "CCC", "DDD", "EEE", "FFF", "GGG", "HHH")
+ Log.d("ListWithUpdatableItem", "list: $list")
+ val listState = rememberLazyListState()
+// val index : Boolean = listState.firstVisibleItemIndex > 0
+// Log.d("LIST", "ListWithUpdatableItem: listState.firstVisibleItemIndex: ${listState.firstVisibleItemIndex}")
+// listState.firstVisibleItemIndex
+//
+ val firstVisibleCompletelyItem: Int by remember {
+ derivedStateOf {
+ listState.firstVisibleCompletelyItem()
+ }
+ }
+ Log.d(TAG, "ListWithUpdatableItem: firstVisibleCompletelyItem=$firstVisibleCompletelyItem")
+
+ LazyColumn(
+ state = listState,
+ ) {
+ itemsIndexed(list) { index: Int, item: String ->
+ Log.d("ListWithUpdatableItem", "index: $index, item: $item")
+ MyCard {
+ UpdatableItem(item, index == firstVisibleCompletelyItem)
+ }
+ }
+ }
+}
+
+@Composable
+private fun MyCard(content: @Composable () -> Unit) {
+ content()
+}
+
+@Composable
+private fun UpdatableItem(
+ text: String,
+ showBadge: Boolean,
+) {
+ Column {
+ Box(
+ modifier = Modifier
+ .height(200.dp)
+ .background(Color.Blue)
+ .fillMaxWidth()
+ ) {
+ Text(
+ modifier = Modifier.align(Alignment.Center),
+ text = text,
+ style = TextStyle(color = Color.White)
+ )
+
+ if (showBadge) {
+ Icon(
+ imageVector = Icons.Rounded.Person,
+ contentDescription = null,
+ modifier = Modifier
+ .padding(8.dp)
+ .size(32.dp)
+ )
+ }
+ }
+ Divider(modifier = Modifier.height(8.dp))
+ }
+}
+
+@Preview
+@Composable
+private fun PreviewListWithUpdatableItem() {
+ JetpackComposePlayGroundTheme {
+ ListWithUpdatableItem()
+ }
+}
+
+private fun LazyListState.firstVisibleCompletelyItem(): Int =
+ if (firstVisibleItemScrollOffset == 0) {
+ firstVisibleItemIndex
+ } else {
+ firstVisibleItemIndex + 1
+ }