fankes/pagecurl-multiplatform
2
0
Fork 0
mirror of https://github.com/fankes/pagecurl-multiplatform.git synced 2025-09-05 10:15:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support compose multiplatform

Browse Source
This commit is contained in:
fankesyooni
2023-10-31 03:07:47 +08:00
parent 0eb979c257
commit 2feee4c266
115 changed files with 1362 additions and 1729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
README.md
View File

@@ -1,10 +1,18 @@
[![Maven Central](https://img.shields.io/maven-central/v/io.github.oleksandrbalan/pagecurl.svg?label=Maven%20Central)](https://mvnrepository.com/artifact/io.github.oleksandrbalan/pagecurl)
<img align="right" src="https://user-images.githubusercontent.com/20944869/200791917-a2436c9a-d062-4c14-9c71-c94fe8703061.png">
<img alt="LOGO" align="right" src="https://user-images.githubusercontent.com/20944869/200791917-a2436c9a-d062-4c14-9c71-c94fe8703061.png">
# Page Curl
# Page Curl (Multiplatform)
Page Curl library for Jetpack Compose.
Page Curl library for Jetpack Compose Multiplatform.
Support for Android, iOS, Desktop (JVM):
<img width="1614" alt="SHOT" src="https://github.com/fankes/pagecurl-multiplatform/assets/37344460/48bb2aa7-12a5-43c5-aa9f-028e83a06746">
> Note
This is just an attempt at multiplatform porting, and there may still be some problems.
## Motivation
@@ -12,122 +20,19 @@ This library allows to create an effect of turning pages, which can be used in b
## Usage
### Get a dependency
> Note
**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()
}
}
```
This multiplatform library's artifact is not upload to any repositories,
you can clone this repository or use git submodule to use it.
Or in `settings.gradle.kts`:
```kotlin
pluginManagement {
repositories {
...
mavenCentral()
}
}
```
For an Android version and a sample usage, please visit: https://github.com/oleksandrbalan/pagecurl.
**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")
}
```
See Demo application
and [examples](https://github.com/fankes/pagecurl/blob/multiplatform/samples/shared/src/commonMain/kotlin/eu/wewox/pagecurl/screens) for more usage
examples.
### Use in Composable
## Thanks
The `PageCurl` has 2 mandatory arguments:
* **count** - The count of pages.
* **content** - The content lambda to provide the page composable. Receives the page number.
[The compose multiplatform shadows way](https://github.com/oleksandrbalan/pagecurl/issues/23#issuecomment-1767145310)
```
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
[Multiplatform Paging](https://github.com/cashapp/multiplatform-paging)