androidx.wear.compose.material3.lazy
Interfaces
ResponsiveTransformationSpec | Version of |
TransformationSpec | Defines visual transformations on the items of a |
TransformedContainerPainterScope | Provides additional information to the painter inside |
Classes
TransformationVariableSpec | This class represents the configuration parameters for one variable that changes as the item moves on the screen and will be used to apply the corresponding transformation - for example: container alpha. |
Objects
ResponsiveTransformationSpecDefaults | Contains the default values used by |
Top-level functions summary
TransformationVariableSpec | lerp(Helper function to lerp between the variables for different screen sizes. |
TransformationSpec | Computes and remembers the appropriate |
TransformationSpec | @ComposableComputes and remembers the appropriate |
Extension functions summary
Modifier | Modifier.transformedHeight(Convenience modifier to calculate transformed height using |
Top-level functions
lerp
fun lerp(
start: TransformationVariableSpec,
stop: TransformationVariableSpec,
progress: Float
): TransformationVariableSpec
Helper function to lerp between the variables for different screen sizes.
rememberTransformationSpec
@Composable
fun rememberTransformationSpec(): TransformationSpec
Computes and remembers the appropriate TransformationSpec for the current screen size.
It would return special NoOp version of TransformationSpec when ReducedMotion is on.
import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight import androidx.wear.compose.foundation.lazy.TransformingLazyColumn import androidx.wear.compose.foundation.lazy.items import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState import androidx.wear.compose.material3.AppScaffold import androidx.wear.compose.material3.ListHeader import androidx.wear.compose.material3.MaterialTheme import androidx.wear.compose.material3.ScreenScaffold import androidx.wear.compose.material3.SurfaceTransformation import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.TitleCard import androidx.wear.compose.material3.lazy.rememberTransformationSpec import androidx.wear.compose.material3.lazy.transformedHeight val state = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() data class NotificationItem(val title: String, val body: String) val notifications = listOf( NotificationItem( "☕ Coffee Break?", "Step away from the screen and grab a pick-me-up. Step away from the screen and grab a pick-me-up.", ), NotificationItem("🌟 You're Awesome!", "Just a little reminder in case you forgot 😊"), NotificationItem("👀 Did you know?", "Check out [app name]'s latest feature update."), NotificationItem("📅 Appointment Time", "Your meeting with [name] is in 15 minutes."), ) AppScaffold { ScreenScaffold(state) { contentPadding -> TransformingLazyColumn(state = state, contentPadding = contentPadding) { item { ListHeader( transformation = SurfaceTransformation(transformationSpec), modifier = Modifier.transformedHeight(this, transformationSpec).animateItem(), ) { Text("Notifications") } } items(notifications) { notification -> TitleCard( onClick = {}, title = { Text( notification.title, fontWeight = FontWeight.Bold, style = MaterialTheme.typography.labelLarge, maxLines = 1, ) }, subtitle = { Text(notification.body) }, transformation = SurfaceTransformation(transformationSpec), modifier = Modifier.transformedHeight(this, transformationSpec).animateItem(), ) } } } }
rememberTransformationSpec
@Composable
fun rememberTransformationSpec(vararg specs: ResponsiveTransformationSpec): TransformationSpec
Computes and remembers the appropriate TransformationSpec for the current screen size, given one or more ResponsiveTransformationSpecs for different screen sizes.
It would return special NoOp version of TransformationSpec when ReducedMotion is on.
Example usage for ResponsiveTransformationSpec, the recommended TransformationSpec for large-screen aware Wear apps:
import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp import androidx.wear.compose.foundation.lazy.TransformingLazyColumn import androidx.wear.compose.material3.Button import androidx.wear.compose.material3.SurfaceTransformation import androidx.wear.compose.material3.Text import androidx.wear.compose.material3.lazy.ResponsiveTransformationSpec import androidx.wear.compose.material3.lazy.TransformationSpec import androidx.wear.compose.material3.lazy.TransformationVariableSpec import androidx.wear.compose.material3.lazy.rememberTransformationSpec import androidx.wear.compose.material3.lazy.transformedHeight val transformationSpec = rememberTransformationSpec( ResponsiveTransformationSpec.smallScreen( // Makes the content disappear on the edges. contentAlpha = TransformationVariableSpec(0f) ), ResponsiveTransformationSpec.largeScreen( // Makes the content disappear on the edges, but a bit more aggressively. contentAlpha = TransformationVariableSpec(0f, transformationZoneEnterFraction = 0.2f) ), ) TransformingLazyColumn( contentPadding = PaddingValues(20.dp), modifier = Modifier.background(Color.Black), ) { items(count = 100) { index -> Button( onClick = {}, modifier = Modifier.fillMaxWidth().transformedHeight(this@items, transformationSpec), transformation = SurfaceTransformation(transformationSpec), ) { Text("Item $index") } } }
| Parameters | |
|---|---|
vararg specs: ResponsiveTransformationSpec | The |
Extension functions
transformedHeight
fun Modifier.transformedHeight(
scope: TransformingLazyColumnItemScope,
transformationSpec: TransformationSpec
): Modifier
Convenience modifier to calculate transformed height using TransformationSpec.