Fix the landing background on scroll.

This commit is contained in:
Andres Gomez, Thomas (ITDV RL) 2024-07-04 16:56:15 +02:00
parent a6124cbe79
commit 4ccf578f45
2 changed files with 13 additions and 37 deletions

View file

@ -5,7 +5,6 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.annotation.DrawableRes
import androidx.annotation.FloatRange
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@ -24,7 +23,6 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
@ -71,9 +69,6 @@ fun LandingItem(
shape: Shape = remember { RoundedCornerShape(size = 8.dp) },
textStyle: TextStyle = MaterialTheme.typography.bodyMedium,
dropCapStyle: SpanStyle = MaterialTheme.lexicon.typography.dropCap.bodyMedium,
backgroundFilter: ColorFilter? = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface),
@FloatRange(from = 0.0, to = 1.0) backgroundGradientFrom: Float = 0.5f,
@FloatRange(from = 0.0, to = 1.0) backgroundGradientTo: Float = 1f,
rotation: Float = 0f,
alpha: Float = 0.6f,
onClick: (LandingItemUio) -> Unit,
@ -96,22 +91,10 @@ fun LandingItem(
alpha = alpha,
contentScale = ContentScale.Fit,
alignment = Alignment.TopCenter,
colorFilter = backgroundFilter,
contentDescription = null,
)
}
Box(
modifier = Modifier
.matchParentSize()
.background(
brush = rememberBackgroundGradient(
from = backgroundGradientFrom,
to = backgroundGradientTo,
)
)
)
Column(
modifier = Modifier.align(alignment = Alignment.BottomCenter),
horizontalAlignment = Alignment.CenterHorizontally,

View file

@ -31,12 +31,14 @@ import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.graphicsLayer
@ -81,7 +83,7 @@ fun LandingScreen(
val screen = LocalScreenNavHost.current
Surface(
modifier = Modifier.fillMaxSize()
modifier = Modifier.fillMaxSize(),
) {
LandingContent(
modifier = Modifier
@ -166,7 +168,14 @@ private fun LandingContent(
(paddings.calculateTopPadding() + paddings.calculateBottomPadding()).toPx()
}
}
val backgroundAlpha = remember {
derivedStateOf {
((verticalPadding - scrollState.value) / verticalPadding).coerceIn(
minimumValue = 0f,
maximumValue = 1f,
)
}
}
Box(
modifier = modifier,
) {
@ -174,12 +183,7 @@ private fun LandingContent(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
.graphicsLayer {
this.alpha = ((verticalPadding - scrollState.value) / verticalPadding).coerceIn(
minimumValue = 0f,
maximumValue = 1f,
)
}
.graphicsLayer { this.alpha = backgroundAlpha.value }
.clip(RectangleShape),
) {
Image(
@ -208,6 +212,7 @@ private fun LandingContent(
Box(
modifier = Modifier
.matchParentSize()
.scrollOffset(scrollState) { -it / 3 }
.background(brush = rememberBackgroundGradient()),
)
}
@ -253,9 +258,6 @@ private fun LandingContent(
textStyle = MaterialTheme.typography.titleMedium,
dropCapStyle = MaterialTheme.lexicon.typography.dropCap.titleMedium,
item = character,
backgroundFilter = null,
backgroundGradientFrom = 0f,
backgroundGradientTo = 0.5f,
onClick = { onFeature(character) },
)
}
@ -291,9 +293,6 @@ private fun LandingContent(
bottom = 24.dp,
),
item = item,
backgroundFilter = null,
backgroundGradientFrom = 0.0f,
backgroundGradientTo = 0.5f,
onClick = { onFeature(item) },
)
}
@ -329,9 +328,6 @@ private fun LandingContent(
bottom = 24.dp,
),
item = item,
backgroundFilter = null,
backgroundGradientFrom = 0.0f,
backgroundGradientTo = 0.5f,
onClick = { onFeature(item) },
)
}
@ -367,9 +363,6 @@ private fun LandingContent(
bottom = 24.dp,
),
item = item,
backgroundFilter = null,
backgroundGradientFrom = 0.0f,
backgroundGradientTo = 0.5f,
onClick = { onFeature(item) },
)
}