Add more examples

This commit is contained in:
Oleksandr Balan
2022-08-18 14:55:50 +02:00
parent 0225c2700c
commit c7ba0f606d
10 changed files with 533 additions and 44 deletions

View File

@@ -18,12 +18,20 @@ enum class Example(
"Page Curl With Settings",
"Showcases how individual interactions can be toggled on / off"
),
CustomPageCurl(
StateInPageCurl(
"Page Curl With State Management",
"Example how state can be used to change current page (snap / animate)"
),
AnimatePageCurl(
"Page Curl With Custom Animation",
"Example how custom animation can be provided for forward / backward taps"
InteractionConfigInPageCurl(
"Interactions Configurations In Page Curl",
"Example interactions (drag / tap) can be customized"
),
ShadowPageCurl(
"Shadow Configuration in Page Curl",
"Example how to customize shadow of the page"
),
BackPagePageCurl(
"Back-Page Configuration in Page Curl",
"Example how to customize the back-page (the back of the page user see during the drag or animation)"
),
}

View File

@@ -42,5 +42,66 @@ data class HowToPageData(
"That is the last page, you cannot go further \uD83D\uDE09",
)
)
val stateHowToPages = listOf(
HowToPageData(
"State example",
"This example demonstrates how state object can be used to change current page.",
),
HowToPageData(
"Custom tap",
"This example has a custom tap configured to show a settings row below. Try it and tap somewhere near the center of the page. Tap on the PageCurl to zoom back in.",
),
HowToPageData(
"Settings",
"Use buttons to go to the first / last page, or try to snap / animate forward or backward. The .snapTo() method changes the current page immediately, but .next() and .prev() methods changes the current page with a default animation. This animation could be customized, see DefaultNext and DefaultPrev in library sources.",
),
HowToPageData(
"End",
"That is the last page, you cannot go further \uD83D\uDE09",
)
)
val interactionSettingsHowToPages = listOf(
HowToPageData(
"Another interaction example",
"This example demonstrates how drag & tap gestures zones can be configured. By default it is right half to go forward and left half to go backward.",
),
HowToPageData(
"Custom tap",
"This example has a custom tap configured to show a settings row below. Try it and tap somewhere near the center of the page. Tap on the PageCurl to zoom back in.",
),
HowToPageData(
"Settings",
"Try to change the slider value and see how it changes the gesture zones. For example if you set 0.25f on the tap gesture this means, that the first 25% of the width will be dedicated for backward tap, and other 75% will be used for forward tap.",
),
HowToPageData(
"End region in drag",
"Keep in mind, that drag gestures have 'end' region (where gesture should be ended to complete a drag), so if you set 0f for drag gesture, the only forward gesture will be allowed, but it could not be completed. You can modify the 'end' region as needed for your use-case.",
),
HowToPageData(
"End",
"That is the last page, you cannot go further \uD83D\uDE09",
)
)
val shadowHowToPages = listOf(
HowToPageData(
"Shadow configuration",
"This example demonstrates how shadow can be configured.",
),
HowToPageData(
"Custom tap",
"This example has a custom tap configured to show a settings row below. Try it and tap somewhere near the center of the page. Tap on the PageCurl to zoom back in.",
),
HowToPageData(
"Settings",
"Try to change different sliders. Settings should be self-descriptive. You may also change the shadow color (not present in the example).",
),
HowToPageData(
"End",
"That is the last page, you cannot go further \uD83D\uDE09",
)
)
}
}

View File

@@ -28,10 +28,12 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat
import eu.wewox.pagecurl.components.TopBar
import eu.wewox.pagecurl.screens.AnimatePageCurlScreen
import eu.wewox.pagecurl.screens.BackPagePageCurlScreen
import eu.wewox.pagecurl.screens.InteractionConfigInPageCurlScreen
import eu.wewox.pagecurl.screens.SettingsPageCurlScreen
import eu.wewox.pagecurl.screens.ShadowInPageCurlScreen
import eu.wewox.pagecurl.screens.SimplePageCurlScreen
import eu.wewox.pagecurl.screens.StatePageCurlScreen
import eu.wewox.pagecurl.screens.StateInPageCurlScreen
import eu.wewox.pagecurl.ui.SpacingMedium
import eu.wewox.pagecurl.ui.theme.PageCurlTheme
@@ -58,8 +60,10 @@ class MainActivity : ComponentActivity() {
null -> RootScreen(onExampleClick = { example = it })
Example.SimplePageCurl -> SimplePageCurlScreen()
Example.SettingsPageCurl -> SettingsPageCurlScreen()
Example.CustomPageCurl -> StatePageCurlScreen()
Example.AnimatePageCurl -> AnimatePageCurlScreen()
Example.StateInPageCurl -> StateInPageCurlScreen()
Example.InteractionConfigInPageCurl -> InteractionConfigInPageCurlScreen()
Example.ShadowPageCurl -> ShadowInPageCurlScreen()
Example.BackPagePageCurl -> BackPagePageCurlScreen()
}
}
}

View File

@@ -1,14 +1,59 @@
@file:OptIn(ExperimentalPageCurlApi::class)
package eu.wewox.pagecurl.components
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.expandIn
import androidx.compose.animation.shrinkOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import eu.wewox.pagecurl.ExperimentalPageCurlApi
import eu.wewox.pagecurl.config.PageCurlConfig
@Composable
fun ZoomOutLayout(
zoomOut: Boolean,
config: PageCurlConfig,
bottom: @Composable () -> Unit,
modifier: Modifier = Modifier,
pageCurl: @Composable () -> Unit,
) {
// Disable all state interactions when PageCurl is zoomed out
LaunchedEffect(zoomOut) {
with(config) {
dragForwardEnabled = !zoomOut
dragBackwardEnabled = !zoomOut
tapForwardEnabled = !zoomOut
tapBackwardEnabled = !zoomOut
}
}
ZoomOutLayout(
zoomOut = zoomOut,
bottom = bottom,
modifier = modifier,
) {
// Animate radius and elevation with the same value, because we not :)
val cornersAndElevation by animateDpAsState(if (zoomOut) 16.dp else 0.dp)
Card(
shape = RoundedCornerShape(cornersAndElevation),
elevation = cornersAndElevation,
content = pageCurl,
)
}
}
@Composable
fun ZoomOutLayout(

View File

@@ -1,8 +0,0 @@
package eu.wewox.pagecurl.screens
import androidx.compose.runtime.Composable
@Composable
fun AnimatePageCurlScreen() {
}

View File

@@ -0,0 +1,142 @@
@file:OptIn(ExperimentalPageCurlApi::class)
package eu.wewox.pagecurl.screens
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.center
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toOffset
import eu.wewox.pagecurl.ExperimentalPageCurlApi
import eu.wewox.pagecurl.HowToPageData
import eu.wewox.pagecurl.components.HowToPage
import eu.wewox.pagecurl.components.ZoomOutLayout
import eu.wewox.pagecurl.config.PageCurlConfig
import eu.wewox.pagecurl.config.rememberPageCurlConfig
import eu.wewox.pagecurl.page.PageCurl
import eu.wewox.pagecurl.page.rememberPageCurlState
import eu.wewox.pagecurl.ui.SpacingLarge
import eu.wewox.pagecurl.ui.SpacingMedium
import eu.wewox.pagecurl.ui.SpacingSmall
@Composable
fun BackPagePageCurlScreen() {
Box(Modifier.fillMaxSize()) {
val pages = remember { HowToPageData.shadowHowToPages }
var zoomOut by remember { mutableStateOf(false) }
val state = rememberPageCurlState(
max = pages.size,
config = rememberPageCurlConfig(
onCustomTap = { size, position ->
// When PageCurl is zoomed out then zoom back in
// Else detect tap somewhere in the center with 64 radius and zoom out a PageCurl
if (zoomOut) {
zoomOut = false
true
} else if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) {
zoomOut = true
true
} else {
false
}
}
)
)
ZoomOutLayout(
zoomOut = zoomOut,
config = state.config,
bottom = { SettingsRow(state.config) },
) {
PageCurl(state = state) { index ->
HowToPage(index, pages[index])
}
}
}
}
@Composable
private fun SettingsRow(
config: PageCurlConfig,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(vertical = SpacingMedium)
) {
Text(
text = "Alpha",
modifier = Modifier.padding(horizontal = SpacingLarge)
)
Slider(
value = config.backPageContentAlpha,
onValueChange = {
config.backPageContentAlpha = it
},
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = SpacingLarge)
)
Text(
text = "Color",
modifier = Modifier.padding(horizontal = SpacingLarge)
)
Row(
horizontalArrangement = Arrangement.spacedBy(SpacingMedium),
modifier = Modifier
.padding(top = SpacingSmall)
.fillMaxWidth()
.horizontalScroll(rememberScrollState())
.padding(horizontal = SpacingLarge)
) {
backPageColors.forEach { color ->
Spacer(
modifier = Modifier
.size(64.dp)
.border(2.dp, color, CircleShape)
.background(color.copy(alpha = 0.8f), CircleShape)
.clip(CircleShape)
.clickable {
config.backPageColor = color
}
)
}
}
}
}
private val backPageColors: List<Color> = listOf(
Color(0xFFF9CEEE),
Color(0xFF68A7AD),
Color(0xFFE5CB9F),
Color(0xFFAC7D88),
Color(0xFF9ADCFF),
Color(0xFFFFF89A),
Color(0xFFCDB699),
Color(0xFFA267AC),
)

View File

@@ -0,0 +1,152 @@
@file:OptIn(ExperimentalPageCurlApi::class)
package eu.wewox.pagecurl.screens
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.RadioButton
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.center
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toOffset
import eu.wewox.pagecurl.ExperimentalPageCurlApi
import eu.wewox.pagecurl.HowToPageData
import eu.wewox.pagecurl.components.HowToPage
import eu.wewox.pagecurl.components.ZoomOutLayout
import eu.wewox.pagecurl.config.PageCurlConfig
import eu.wewox.pagecurl.config.rememberPageCurlConfig
import eu.wewox.pagecurl.page.PageCurl
import eu.wewox.pagecurl.page.rememberPageCurlState
import eu.wewox.pagecurl.ui.SpacingLarge
import eu.wewox.pagecurl.ui.SpacingMedium
import eu.wewox.pagecurl.ui.SpacingSmall
@Composable
fun InteractionConfigInPageCurlScreen() {
Box(Modifier.fillMaxSize()) {
val pages = remember { HowToPageData.interactionSettingsHowToPages }
var zoomOut by remember { mutableStateOf(false) }
val state = rememberPageCurlState(
max = pages.size,
config = rememberPageCurlConfig(
onCustomTap = { size, position ->
// When PageCurl is zoomed out then zoom back in
// Else detect tap somewhere in the center with 64 radius and zoom out a PageCurl
if (zoomOut) {
zoomOut = false
true
} else if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) {
zoomOut = true
true
} else {
false
}
}
)
)
ZoomOutLayout(
zoomOut = zoomOut,
config = state.config,
bottom = { SettingsRow(state.config) },
) {
PageCurl(state = state) { index ->
HowToPage(index, pages[index])
}
}
}
}
@Composable
private fun SettingsRow(
config: PageCurlConfig,
modifier: Modifier = Modifier
) {
var selectedOption by remember { mutableStateOf(InteractionOption.Drag) }
Column(
verticalArrangement = Arrangement.spacedBy(SpacingSmall),
modifier = modifier
.fillMaxWidth()
.padding(SpacingLarge)
) {
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier
.fillMaxWidth()
.selectableGroup()
) {
InteractionOption.values().forEach { option ->
Row(
Modifier
.selectable(
selected = selectedOption == option,
onClick = { selectedOption = option },
role = Role.RadioButton
),
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = selectedOption == option,
onClick = null
)
Text(
text = option.name,
modifier = Modifier.padding(start = SpacingMedium)
)
}
}
}
when (selectedOption) {
InteractionOption.Drag -> {
Slider(
value = config.dragForwardInteraction.start.left,
onValueChange = {
config.dragForwardInteraction = PageCurlConfig.DragInteraction(
Rect(it, 0.0f, 1.0f, 1.0f),
Rect(0.0f, 0.0f, it, 1.0f)
)
config.dragBackwardInteraction = PageCurlConfig.DragInteraction(
Rect(0.0f, 0.0f, it, 1.0f),
Rect(it, 0.0f, 1.0f, 1.0f),
)
},
modifier = Modifier.fillMaxWidth()
)
}
InteractionOption.Tap -> {
Slider(
value = config.tapForwardInteraction.target.left,
onValueChange = {
config.tapForwardInteraction = PageCurlConfig.TapInteraction(
Rect(it, 0.0f, 1.0f, 1.0f),
)
config.tapBackwardInteraction = PageCurlConfig.TapInteraction(
Rect(0.0f, 0.0f, it, 1.0f),
)
},
modifier = Modifier.fillMaxWidth()
)
}
}
}
}
private enum class InteractionOption { Drag, Tap }

View File

@@ -0,0 +1,107 @@
@file:OptIn(ExperimentalPageCurlApi::class)
package eu.wewox.pagecurl.screens
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.center
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toOffset
import eu.wewox.pagecurl.ExperimentalPageCurlApi
import eu.wewox.pagecurl.HowToPageData
import eu.wewox.pagecurl.components.HowToPage
import eu.wewox.pagecurl.components.ZoomOutLayout
import eu.wewox.pagecurl.config.PageCurlConfig
import eu.wewox.pagecurl.config.rememberPageCurlConfig
import eu.wewox.pagecurl.page.PageCurl
import eu.wewox.pagecurl.page.rememberPageCurlState
import eu.wewox.pagecurl.ui.SpacingLarge
@Composable
fun ShadowInPageCurlScreen() {
Box(Modifier.fillMaxSize()) {
val pages = remember { HowToPageData.shadowHowToPages }
var zoomOut by remember { mutableStateOf(false) }
val state = rememberPageCurlState(
max = pages.size,
config = rememberPageCurlConfig(
onCustomTap = { size, position ->
// When PageCurl is zoomed out then zoom back in
// Else detect tap somewhere in the center with 64 radius and zoom out a PageCurl
if (zoomOut) {
zoomOut = false
true
} else if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) {
zoomOut = true
true
} else {
false
}
}
)
)
ZoomOutLayout(
zoomOut = zoomOut,
config = state.config,
bottom = { SettingsRow(state.config) },
) {
PageCurl(state = state) { index ->
HowToPage(index, pages[index])
}
}
}
}
@Composable
private fun SettingsRow(
config: PageCurlConfig,
modifier: Modifier = Modifier
) {
Column(
modifier = modifier
.fillMaxWidth()
.padding(SpacingLarge)
) {
Text(text = "Alpha")
Slider(
value = config.shadowAlpha,
onValueChange = {
config.shadowAlpha = it
},
modifier = Modifier.fillMaxWidth()
)
Text(text = "Radius")
Slider(
value = config.shadowRadius.value,
onValueChange = {
config.shadowRadius = it.dp
},
valueRange = 0f..32f,
modifier = Modifier.fillMaxWidth()
)
Text(text = "Horizontal offset")
Slider(
value = config.shadowOffset.x.value,
onValueChange = {
config.shadowOffset = DpOffset(it.dp, 0.dp)
},
valueRange = -20f..20f,
modifier = Modifier.fillMaxWidth()
)
}
}

View File

@@ -2,7 +2,6 @@
package eu.wewox.pagecurl.screens
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@@ -11,12 +10,9 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
@@ -40,9 +36,9 @@ import eu.wewox.pagecurl.ui.SpacingMedium
import kotlinx.coroutines.launch
@Composable
fun StatePageCurlScreen() {
fun StateInPageCurlScreen() {
Box(Modifier.fillMaxSize()) {
val pages = remember { HowToPageData.interactionHowToPages }
val pages = remember { HowToPageData.stateHowToPages }
var zoomOut by remember { mutableStateOf(false) }
val state = rememberPageCurlState(
max = pages.size,
@@ -63,30 +59,13 @@ fun StatePageCurlScreen() {
)
)
// Disable all state interactions when PageCurl is zoomed out
LaunchedEffect(zoomOut) {
with(state.config) {
dragForwardEnabled = !zoomOut
dragBackwardEnabled = !zoomOut
tapForwardEnabled = !zoomOut
tapBackwardEnabled = !zoomOut
}
}
ZoomOutLayout(
zoomOut = zoomOut,
bottom = { SettingsRow(state) }
config = state.config,
bottom = { SettingsRow(state) },
) {
// Animate radius and elevation with the same value, because we not :)
val cornersAndElevation by animateDpAsState(if (zoomOut) 16.dp else 0.dp)
Card(
shape = RoundedCornerShape(cornersAndElevation),
elevation = cornersAndElevation,
) {
PageCurl(state = state) { index ->
HowToPage(index, pages[index])
}
PageCurl(state = state) { index ->
HowToPage(index, pages[index])
}
}
}

View File

@@ -8,7 +8,6 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier
import eu.wewox.pagecurl.ExperimentalPageCurlApi
import eu.wewox.pagecurl.config.PageCurlConfig
/**
* Shows the pages which may be turned by drag or tap gestures.