Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleksandrbalan/pagecurl
This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.
https://github.com/oleksandrbalan/pagecurl
android compose kotlin
Last synced: 3 months ago
JSON representation
This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.
- Host: GitHub
- URL: https://github.com/oleksandrbalan/pagecurl
- Owner: oleksandrbalan
- License: apache-2.0
- Created: 2022-04-04T16:04:51.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T07:47:01.000Z (9 months ago)
- Last Synced: 2024-07-12T19:01:18.243Z (4 months ago)
- Topics: android, compose, kotlin
- Language: Kotlin
- Homepage:
- Size: 1.12 MB
- Stars: 293
- Watchers: 7
- Forks: 24
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- mobile-awesome - pagecurl - Page Curl library for Jetpack Compose. (Multiplatform / Android samples)
README
[](https://mvnrepository.com/artifact/io.github.oleksandrbalan/pagecurl)
# Page Curl
Page Curl library for Jetpack Compose.
## Motivation
This library allows to create an effect of turning pages, which can be used in book reader applications, custom on-boarding screens or elsewhere.
## Usage
### Get a dependency
**Step 1.** Add the MavenCentral repository to your build file.
Add it in your root `build.gradle.kts` at the end of repositories:
```kotlin
allprojects {
repositories {
...
mavenCentral()
}
}
```
Or in `settings.gradle.kts`:
```kotlin
dependencyResolutionManagement {
repositories {
...
mavenCentral()
}
}
```
**Step 2.** Add the dependency.
Check latest version on the [releases page](https://github.com/oleksandrbalan/pagecurl/releases).
```kotlin
dependencies {
implementation("io.github.oleksandrbalan:pagecurl:$version")
}
```
### Use in Composable
The `PageCurl` has 2 mandatory arguments:
* **count** - The count of pages.
* **content** - The content lambda to provide the page composable. Receives the page number.
```
val pages = listOf("One", "Two", "Three")
PageCurl(count = pages.size) { index ->
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(MaterialTheme.colors.background)
.fillMaxSize()
) {
Text(
text = pages[index],
style = MaterialTheme.typography.h1,
)
}
}
```
Optionally `state` could be provided to observe and manage PageCurl state.
* **state** - The state of the PageCurl. Use it to programmatically change the current page or observe changes, and to configure shadow, back-page and interactions.
```
Column {
val scope = rememberCoroutineScope()
val state = rememberPageCurlState()
Button(onClick = { scope.launch { state.next() } }) {
Text(text = "Next")
}
val pages = listOf("One", "Two", "Three")
PageCurl(
count = pages.size,
state = state,
) { index ->
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(MaterialTheme.colors.background)
.fillMaxSize()
) {
Text(
text = pages[index],
style = MaterialTheme.typography.h1,
)
}
}
}
```
Optionally `key` lambda could be provided with stable key for each item. PageCurl with keys for each page will correctly preserve a current position when items are added or removed.
* **key** - The lambda to provide stable key for each item. Useful when adding and removing items before current page.
```
Column {
var pages by remember { mutableStateOf(listOf("Four", "Five", "Six")) }
Button(onClick = { pages = listOf("One", "Two", "Three") + pages }) {
Text(text = "Prepend new pages")
}
PageCurl(
count = pages.size,
key = { pages[it].hashCode() },
) { index ->
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(MaterialTheme.colors.background)
.fillMaxSize()
) {
Text(
text = pages[index],
style = MaterialTheme.typography.h1,
)
}
}
}
```
See Demo application and [examples](demo/src/main/kotlin/eu/wewox/pagecurl/screens) for more usage examples.
https://user-images.githubusercontent.com/20944869/185782671-2861c2ed-c033-4318-bf12-1d8db74fc8b5.mp4
https://user-images.githubusercontent.com/20944869/185782668-b52da2b9-be8d-49db-8729-88b6f9a8ee48.mp4
https://user-images.githubusercontent.com/20944869/185782663-4bd97a57-1a46-408d-a07b-34c193f01aba.mp4