Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evant/compose-collapsable
A generic collapsable implementation with dragging and nested scrolling support
https://github.com/evant/compose-collapsable
android compose
Last synced: 6 days ago
JSON representation
A generic collapsable implementation with dragging and nested scrolling support
- Host: GitHub
- URL: https://github.com/evant/compose-collapsable
- Owner: evant
- License: apache-2.0
- Created: 2023-11-05T22:12:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-14T19:43:30.000Z (about 1 month ago)
- Last Synced: 2024-11-07T15:45:35.942Z (9 days ago)
- Topics: android, compose
- Language: Kotlin
- Homepage:
- Size: 9.77 MB
- Stars: 102
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - evant/compose-collapsable - A generic collapsable implementation with dragging and nested scrolling support (Kotlin)
README
# compose-collapsable
A generic collapsable implementation with dragging and nested scrolling support. This extracts and
builds upon logic from the compose material 3 top app bar implementation.
## Download
```kotlin
implementation("me.tatarka.compose.collapsable:compose-collapsable:0.4.0")
```
## Usage
This library is made up of a few main parts that you can pick-and-choose for your own collapsing ui
implementations.
### CollapsableColumn
Lays out children in a column, allowing some of them to collapse. This is useful for simple cases
like an accordion or a top app bar that hides portions when it scrolls away.
For example, a top app bar which hides it's title but pins tabs as you scroll the page can be
implemented as:
```kotlin
val collapsableBehavior = rememberCollapsableTopBehavior()
Scaffold(
modifier = Modifier.nestedScroll(collapsableBehavior.nestedScrollConnection),
topBar = {
CollapsableColumn(behavior = collapsableBehavior) {
TopAppBar(title = { Text("Title") }, modifier = Modifier.collapse())
TabRow {
...
}
}
}
) { padding ->
LazyColumn(contentPadding = padding) {
...
}
}
```
### CollapsableTopBehavior
The `CollapsableTopBehavior` above has 2 roles. It handles nested scrolling and drags on the
collapsable view itself. You can use these pieces independently in your own implementations. To
handle nested scrolling, use the `Modifier.nestedScroll()` modifier.
```kotlin
modifier = Modifier.nestedScroll(collapsableBehavior.nestedScrollConnection)
```
and to handle dragging on the view use the provided `Modifier.draggable()` modifier.
```kotlin
modifier = Modifier.draggable(collapsableBehavior)
```
### CollapsableBottomBehavior 🥺
There is also a `CollapsableBottomBehavior` that's used for collapsing down instead of up.
### CollapsableState
`CollapsableTopBehavior` holds a `CollapsableState` which manages the actual expand and collapse state.
You can use this state along with the behavior or by itself for your own more complex
collapsing implementations. See the CustomLayoutTopAppBar and ParallaxBackgroundTopAppBar examples
in the sample app.
