Blog Infos
Author
Published
Topics
,
Published

How do we build this?
enum class States {
EXPANDED,
COLLAPSED
}
view raw states-enum.kt hosted with ❤ by GitHub

Then let’s lay the layout’s foundation: a simple, composable function that gets in a header and a body.

@Composable
fun MyBottomSheet(
header: @Composable () -> Unit,
body: @Composable () -> Unit,
) {
Box {
Column(Modifier.fillMaxHeight()) {
header()
Box(Modifier.fillMaxWidth()) {
body()
}
}
}
}
The swipeable modifier
val swipeableState = rememberSwipeableState(initialValue = States.EXPANDED)
Box(
Modifier
.swipeable(
state = swipeableState,
orientation = Orientation.Vertical,
anchors = mapOf(
0f to States.EXPANDED,
maxHeight to States.COLLAPSED,
)
)
)
BoxWithConstraints to the rescue
BoxWithConstraints {
val constraintsScope = this
val maxHeight = with(LocalDensity.current) {
constraintsScope.maxHeight.toPx()
}
Box(
Modifier
.swipeable(
/* ... */
anchors = mapOf(
0f to States.EXPANDED,
maxHeight to States.COLLAPSED,
)
)
)
}
The offset modifier
Box(
Modifier
.swipeable(/* ... */)
.offset {
IntOffset(
x = 0,
y = swipeableState.offset.value.roundToInt()
)
}
)
Nested scrolling

The nested scroll connection
Box(
Modifier
.swipeable(/* ... */)
.offset(/* ... */)
.nestedScroll(
object : NestedScrollConnection {
// Implement callbacks here
})
)

OUR VIDEO RECOMMENDATION

Jobs

No results found.

Pre-scroll callback
override fun onPreScroll(
available: Offset,
source: NestedScrollSource
): Offset {
val delta = available.y
return if (delta < 0) {
swipeableState.performDrag(delta).toOffset()
} else {
Offset.Zero
}
}
view raw pre-scroll.kt hosted with ❤ by GitHub
Post-scroll callback
override fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource
): Offset {
val delta = available.y
return swipeableState.performDrag(delta).toOffset()
}
view raw post-scroll.kt hosted with ❤ by GitHub
Pre and post flings
override suspend fun onPreFling(available: Velocity): Velocity {
return if (available.y < 0 && scrollState.value == 0) {
swipeableState.performFling(available.y)
available
} else {
Velocity.Zero
}
}
override suspend fun onPostFling(
consumed: Velocity,
available: Velocity
): Velocity {
swipeableState.performFling(velocity = available.y)
return super.onPostFling(consumed, available)
}
Conclusion

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
In the world of Jetpack Compose, where designing reusable and customizable UI components is…
READ MORE
blog
Hi, today I come to you with a quick tip on how to update…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu