Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mttankkeo/compose_appbar
This package allows easy and light implementation of app bar in jetpack compose environment.
https://github.com/mttankkeo/compose_appbar
appbar client-side frontend jetpack-compose material
Last synced: 3 months ago
JSON representation
This package allows easy and light implementation of app bar in jetpack compose environment.
- Host: GitHub
- URL: https://github.com/mttankkeo/compose_appbar
- Owner: MTtankkeo
- License: apache-2.0
- Created: 2024-03-02T12:04:30.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-21T00:23:27.000Z (7 months ago)
- Last Synced: 2024-07-21T01:31:45.673Z (7 months ago)
- Topics: appbar, client-side, frontend, jetpack-compose, material
- Language: Kotlin
- Homepage:
- Size: 49.8 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Jetpack Compose AppBar
Version
v1.0.1-alpha2
This package allows easy and light implementation of appbar in jetpack compose environment.
> Designed to implement flexible appbar behavior by utilizing only fundamental underlying behaviors and excluding unnecessary features.
## How to make appbar?
Please refer to the code below!
> See also, this code is the simplest example in this package.
```kotlin
AppBarConnection(
AppBar(behavior = MaterialAppBarBehavior()) {
// ... child
}
SizedAppBar(minExtent = 50, maxExtent = 100) {
// ... child
}
) {
// Only scrollable component of vertical direction are available.
// And, can wrapping to parent.
LazyColumn {
// ... items
}
}
```
### How to apply effects according to appbar position?
Please refer to the code below!
> See also, this code is an example of implementing transparency effect.
#### A good example
This example is one of the ideal and simple or basic examples.
```kotlin
// Based on oneself.
AppBarConnection {
AppBar {
Box(modifier = Modifier.graphicsLayer {
alpha = it.expandedPercent()
}) {
// ... child
}
}
}
// Based on others.
// See also, the second appbar depends on the state of the first appbar.
AppBarConnection {
val first = rememberAppBarState()
AppBar(state = first) {
// ... skip
}
AppBar {
Box(modifier = Modifier.graphicsLayer {
alpha = first.shrinkedPercent()
}) {
// ... child
}
}
}
```
#### A bad example
This example is also one of the bad development habits that causes performance degradation.
```kotlin
AppBarConnection {
AppBar {
// This reduces performance, because re-composition when scrolled appbar.
Box(modifier = Modifier.alpha(it.expandedPercent())) {
// ... child
}
}
}
```
## How to customize appbar alignment?
Try applying the `AppBarAlignment` that is a providing standard enumeration in this package.
> This alignment constants for only the hide-able appbar.
```kotlin
AppBarConnection(
AppBar(alignment = AppBarAlignment.Center) {}
)
```
### properties of AppBarAlignment
| Properie | Description
| ------ | ------ |
| Scroll | Display the same as the scroll item. (is Default Value)
| Center | Based on the size of the appbar, the center is located at the center of the size of the appbar.
| Absolute | Even if the appbar is reduced and expanded, the absolute position of the appbar does not change.
## How to customize appbar?
Try using the `MaterialAppBarBehavior` that is a providing standard feature in this package.
```kotlin
AppBarConnection {
AppBar(behavior = MaterialAppBarBehavior(floating = false, dragOnlyExpanding = true)) {}
}
```
### properties of MaterialAppBarBehavior
> When the value of floating is true, the value of dragOnlyExpanding must be false.
| Properie | Description | Default value | Type
| ------ | ------ | ------ | ------
| floating | Whether possible with the app bar expands or shrinks even if a user do not scroll to the highest upper (when scroll offset 0). | true | boolean
| dragOnlyExpanding | Whether only possible with drag when the user needs to start extending the appbar. | false | boolean