Fix the landing background on scroll.
This commit is contained in:
parent
a6124cbe79
commit
4ccf578f45
2 changed files with 13 additions and 37 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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) },
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue