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 at the end of repositories:
allprojects {
repositories {
...
mavenCentral()
}
}
Or in settings.gradle:
pluginManagement {
repositories {
...
mavenCentral()
}
}
Step 2. Add the dependency. Check latest version on the releases page.
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 for more usage examples.