Make CrossAxisAlignment modifier available for items within LazyList

Author: veyndan

redwood-lazylayout-compose/build.gradle

@@ -13,6 +13,7 @@ kotlin {
   sourceSets {
     commonMain {
       dependencies {
+        api projects.redwoodLayoutModifiers
         api projects.redwoodLazylayoutWidget
       }
     }

redwood-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyDsl.kt

@@ -25,25 +25,25 @@ import app.cash.redwood.ui.Margin
 @LayoutScopeMarker
 public interface LazyListScope {
   public fun item(
-    content: @Composable () -> Unit,
+    content: @Composable LazyItemScope.() -> Unit,
   )
 
   public fun items(
     count: Int,
-    itemContent: @Composable (index: Int) -> Unit,
+    itemContent: @Composable LazyItemScope.(index: Int) -> Unit,
   )
 }
 
 public inline fun <T> LazyListScope.items(
   items: List<T>,
-  crossinline itemContent: @Composable (item: T) -> Unit,
+  crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit,
 ): Unit = items(items.size) {
   itemContent(items[it])
 }
 
 public inline fun <T> LazyListScope.itemsIndexed(
   items: List<T>,
-  crossinline itemContent: @Composable (index: Int, item: T) -> Unit,
+  crossinline itemContent: @Composable LazyItemScope.(index: Int, item: T) -> Unit,
 ): Unit = items(
   items.size,
 ) {
@@ -52,7 +52,7 @@ public inline fun <T> LazyListScope.itemsIndexed(
 
 public inline fun <T> LazyListScope.items(
   items: Array<T>,
-  crossinline itemContent: @Composable (item: T) -> Unit,
+  crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit,
 ): Unit = items(
   items.size,
 ) {
@@ -61,7 +61,7 @@ public inline fun <T> LazyListScope.items(
 
 public inline fun <T> LazyListScope.itemsIndexed(
   items: Array<T>,
-  crossinline itemContent: @Composable (index: Int, item: T) -> Unit,
+  crossinline itemContent: @Composable LazyItemScope.(index: Int, item: T) -> Unit,
 ): Unit = items(
   items.size,
 ) {

redwood-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyItemScope.kt

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2023 Square, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package app.cash.redwood.lazylayout.compose
+
+import androidx.compose.runtime.Stable
+import app.cash.redwood.LayoutScopeMarker
+import app.cash.redwood.Modifier
+import app.cash.redwood.layout.api.CrossAxisAlignment
+
+@LayoutScopeMarker
+public interface LazyItemScope {
+  @Stable
+  public fun Modifier.alignment(alignment: CrossAxisAlignment): Modifier =
+    then(AlignmentImpl(alignment))
+}
+
+internal object LazyItemScopeImpl : LazyItemScope

redwood-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyListIntervalContent.kt

@@ -33,7 +33,7 @@ internal class LazyListIntervalContent(
 
   override fun items(
     count: Int,
-    itemContent: @Composable (index: Int) -> Unit,
+    itemContent: @Composable LazyItemScope.(index: Int) -> Unit,
   ) {
     intervals.addInterval(
       count,
@@ -43,7 +43,7 @@ internal class LazyListIntervalContent(
     )
   }
 
-  override fun item(content: @Composable () -> Unit) {
+  override fun item(content: @Composable LazyItemScope.() -> Unit) {
     intervals.addInterval(
       1,
       LazyListInterval(
@@ -54,5 +54,5 @@ internal class LazyListIntervalContent(
 }
 
 internal class LazyListInterval(
-  val item: @Composable (index: Int) -> Unit,
+  val item: @Composable LazyItemScope.(index: Int) -> Unit,
 ) : LazyLayoutIntervalContent.Interval

redwood-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/LazyListItemProvider.kt

@@ -27,7 +27,9 @@ import app.cash.redwood.lazylayout.compose.layout.LazyLayoutItemProvider
 // Copied from https://github.com/androidx/androidx/blob/a733905d282ecdba574bc5e35d6b0ebf83c82dcd/compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/LazyListItemProvider.kt
 // Removed support for content types, header indices, item scope, and pinnable items.
 
-internal interface LazyListItemProvider : LazyLayoutItemProvider
+internal interface LazyListItemProvider : LazyLayoutItemProvider {
+  val itemScope: LazyItemScopeImpl
+}
 
 @Composable
 internal fun rememberLazyListItemProvider(
@@ -37,12 +39,14 @@ internal fun rememberLazyListItemProvider(
   return remember(latestContent) {
     LazyListItemProviderImpl(
       latestContent = { latestContent.value },
+      itemScope = LazyItemScopeImpl,
     )
   }
 }
 
 private class LazyListItemProviderImpl(
   private val latestContent: () -> (LazyListScope.() -> Unit),
+  override val itemScope: LazyItemScopeImpl,
 ) : LazyListItemProvider {
   private val listContent by derivedStateOf(referentialEqualityPolicy()) {
     LazyListIntervalContent(latestContent())
@@ -53,7 +57,7 @@ private class LazyListItemProviderImpl(
   @Composable
   override fun Item(index: Int) {
     listContent.withInterval(index) { localIndex, content ->
-      content.item(localIndex)
+      content.item(itemScope, localIndex)
     }
   }
 }

redwood-lazylayout-compose/src/commonMain/kotlin/app/cash/redwood/lazylayout/compose/modifier.kt

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2023 Square, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package app.cash.redwood.lazylayout.compose
+
+import app.cash.redwood.layout.api.CrossAxisAlignment
+import app.cash.redwood.layout.modifier.Alignment
+
+internal class AlignmentImpl(
+  override val alignment: CrossAxisAlignment,
+) : Alignment {
+  override fun equals(other: Any?): Boolean = other is Alignment &&
+    other.alignment == alignment
+
+  override fun hashCode(): Int {
+    var hash = 17
+    hash = 31 * hash + alignment.hashCode()
+    return hash
+  }
+
+  override fun toString(): String = """Alignment(alignment=$alignment)"""
+}

redwood-lazylayout-composeui/src/commonMain/kotlin/app/cash/redwood/lazylayout/composeui/ComposeUiLazyList.kt

@@ -114,6 +114,7 @@ internal class ComposeUiLazyList :
     val content: LazyListScope.() -> Unit = {
       items(items.widgets) { item ->
         // TODO If CrossAxisAlignment is Stretch, pass Modifier.fillParentMaxWidth() to child widget.
+        // TODO Apply Modifier.alignment on child widgets.
         item.value.invoke()
       }
     }

redwood-lazylayout-view/src/main/kotlin/app/cash/redwood/lazylayout/view/ViewLazyList.kt

@@ -34,6 +34,7 @@ import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
 import app.cash.redwood.Modifier
 import app.cash.redwood.layout.api.Constraint
 import app.cash.redwood.layout.api.CrossAxisAlignment
+import app.cash.redwood.layout.modifier.Alignment
 import app.cash.redwood.lazylayout.widget.LazyList
 import app.cash.redwood.lazylayout.widget.RefreshableLazyList
 import app.cash.redwood.ui.Density
@@ -253,20 +254,7 @@ internal open class ViewLazyList(context: Context) : LazyList<View> {
 
     override fun onBindViewHolder(holder: ViewHolder, position: Int) {
       lastItemHeight = holder.itemView.height
-      val layoutParams = if (crossAxisAlignment == CrossAxisAlignment.Stretch) {
-        FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)
-      } else {
-        FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
-      }
-      layoutParams.apply {
-        gravity = when (crossAxisAlignment) {
-          CrossAxisAlignment.Start -> Gravity.START
-          CrossAxisAlignment.Center -> Gravity.CENTER
-          CrossAxisAlignment.End -> Gravity.END
-          CrossAxisAlignment.Stretch -> Gravity.START
-          else -> throw AssertionError()
-        }
-      }
+      val layoutParams = layoutParams(crossAxisAlignment)
       when (holder) {
         is ViewHolder.Placeholder -> {
           if (holder.container.childCount == 0) {
@@ -286,11 +274,12 @@ internal open class ViewLazyList(context: Context) : LazyList<View> {
         }
         is ViewHolder.Item -> {
           val index = position - items.itemsBefore
-          val view = items.widgets[index].value
+          val widget = items.widgets[index]
           holder.container.removeAllViews()
-          (view.parent as? FrameLayout)?.removeAllViews()
-          view.layoutParams = layoutParams
-          holder.container.addView(view)
+          (widget.value.parent as? FrameLayout)?.removeAllViews()
+          widget.value.layoutParams = layoutParams
+          holder.container.addView(widget.value)
+          widget.value.applyModifier(widget.modifier)
         }
       }
     }
@@ -327,3 +316,30 @@ internal class ViewRefreshableLazyList(
     swipeRefreshLayout.setOnRefreshListener(onRefresh)
   }
 }
+
+private fun layoutParams(crossAxisAlignment: CrossAxisAlignment): FrameLayout.LayoutParams {
+  val layoutParams = if (crossAxisAlignment == CrossAxisAlignment.Stretch) {
+    FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)
+  } else {
+    FrameLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
+  }
+  return layoutParams.apply {
+    gravity = when (crossAxisAlignment) {
+      CrossAxisAlignment.Start -> Gravity.START
+      CrossAxisAlignment.Center -> Gravity.CENTER
+      CrossAxisAlignment.End -> Gravity.END
+      CrossAxisAlignment.Stretch -> Gravity.START
+      else -> throw AssertionError()
+    }
+  }
+}
+
+private fun View.applyModifier(parentModifier: Modifier) {
+  parentModifier.forEach { childModifier ->
+    when (childModifier) {
+      is Alignment -> {
+        this.layoutParams = layoutParams(childModifier.alignment)
+      }
+    }
+  }
+}

redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListTest_layoutWithMarginAndDifferentAlignments[LTR,Column].png

@@ -59,7 +59,7 @@ private class LazyColumnProvider : ColumnProvider {
       modifier = modifier,
       placeholder = placeholder,
     ) {
-      items(items, itemContent)
+      items(items) { itemContent(it) }
     }
   }
 }