Change LazyColumnWithFooter to LazyColumnWithHeaderFooter

This commit is contained in:
Wolf Montwé 2023-03-31 18:14:35 +02:00
parent 71b15fafaf
commit 18969cc1df
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
2 changed files with 21 additions and 13 deletions

View file

@ -11,57 +11,64 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.dp
import app.k9mail.core.ui.compose.designsystem.atom.Surface import app.k9mail.core.ui.compose.designsystem.atom.Surface
import app.k9mail.core.ui.compose.theme.K9Theme import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
/** /**
* The [LazyColumnWithFooter] composable creates a [LazyColumn] with a footer. * The [LazyColumnWithHeaderFooter] composable creates a [LazyColumn] with header and footer items.
* *
* @param modifier The modifier to be applied to the layout. * @param modifier The modifier to be applied to the layout.
* @param verticalArrangement The vertical arrangement of the children. * @param verticalArrangement The vertical arrangement of the children.
* @param horizontalAlignment The horizontal alignment of the children. * @param horizontalAlignment The horizontal alignment of the children.
* @param header The header to be displayed at the top of the [LazyColumn].
* @param footer The footer to be displayed at the bottom of the [LazyColumn]. * @param footer The footer to be displayed at the bottom of the [LazyColumn].
* @param content The content of the [LazyColumn]. * @param content The content of the [LazyColumn].
*/ */
@Composable @Composable
fun LazyColumnWithFooter( fun LazyColumnWithHeaderFooter(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top, verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start, horizontalAlignment: Alignment.Horizontal = Alignment.Start,
header: @Composable () -> Unit = {},
footer: @Composable () -> Unit = {}, footer: @Composable () -> Unit = {},
content: LazyListScope.() -> Unit, content: LazyListScope.() -> Unit,
) { ) {
LazyColumn( LazyColumn(
modifier = modifier, modifier = modifier,
verticalArrangement = verticalArrangementWithFooter(verticalArrangement), verticalArrangement = verticalArrangementWithHeaderFooter(verticalArrangement),
horizontalAlignment = horizontalAlignment, horizontalAlignment = horizontalAlignment,
) { ) {
item { header() }
content() content()
item { footer() } item { footer() }
} }
} }
@Composable @Composable
private fun verticalArrangementWithFooter(verticalArrangement: Arrangement.Vertical) = remember { private fun verticalArrangementWithHeaderFooter(verticalArrangement: Arrangement.Vertical) = remember {
object : Arrangement.Vertical { object : Arrangement.Vertical {
override fun Density.arrange( override fun Density.arrange(
totalSize: Int, totalSize: Int,
sizes: IntArray, sizes: IntArray,
outPositions: IntArray, outPositions: IntArray,
) { ) {
val innerSizes = sizes.dropLast(1).toIntArray() val headerSize = sizes.first()
val footerSize = sizes.last() val footerSize = sizes.last()
val innerTotalSize = totalSize - footerSize val innerTotalSize = totalSize - (headerSize + footerSize)
val innerSizes = sizes.copyOfRange(1, sizes.lastIndex)
val innerOutPositions = outPositions.copyOfRange(1, outPositions.lastIndex)
with(verticalArrangement) { with(verticalArrangement) {
arrange( arrange(
totalSize = innerTotalSize, totalSize = innerTotalSize,
sizes = innerSizes, sizes = innerSizes,
outPositions = outPositions, outPositions = innerOutPositions,
) )
} }
innerOutPositions.forEachIndexed { index, position -> outPositions[index + 1] = position + headerSize }
outPositions[0] = 0
outPositions[outPositions.lastIndex] = totalSize - footerSize outPositions[outPositions.lastIndex] = totalSize - footerSize
} }
} }
@ -69,12 +76,13 @@ private fun verticalArrangementWithFooter(verticalArrangement: Arrangement.Verti
@Composable @Composable
@Preview @Preview
internal fun LazyColumnWithFooterPreview() { internal fun LazyColumnWithHeaderFooterPreview() {
K9Theme { K9Theme {
Surface { Surface {
LazyColumnWithFooter( LazyColumnWithHeaderFooter(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(32.dp, Alignment.CenterVertically), verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double, Alignment.CenterVertically),
header = { Text(text = "Header") },
footer = { Text(text = "Footer") }, footer = { Text(text = "Footer") },
) { ) {
items(10) { items(10) {

View file

@ -18,7 +18,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.button.Button
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText
import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1 import app.k9mail.core.ui.compose.designsystem.atom.text.TextBody1
import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2 import app.k9mail.core.ui.compose.designsystem.atom.text.TextHeadline2
import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithFooter import app.k9mail.core.ui.compose.designsystem.template.LazyColumnWithHeaderFooter
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContent import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContent
import app.k9mail.core.ui.compose.theme.K9Theme import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme import app.k9mail.core.ui.compose.theme.MainTheme
@ -34,7 +34,7 @@ internal fun OnboardingContent(
modifier = modifier, modifier = modifier,
) { ) {
ResponsiveContent { ResponsiveContent {
LazyColumnWithFooter( LazyColumnWithHeaderFooter(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
footer = { footer = {
WelcomeFooter( WelcomeFooter(