mirror of
https://github.com/fankes/pagecurl-multiplatform.git
synced 2025-09-05 18:25:20 +08:00
Add more examples
This commit is contained in:
@@ -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)"
|
||||
),
|
||||
}
|
||||
|
@@ -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",
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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(
|
||||
|
@@ -1,8 +0,0 @@
|
||||
package eu.wewox.pagecurl.screens
|
||||
|
||||
import androidx.compose.runtime.Composable
|
||||
|
||||
@Composable
|
||||
fun AnimatePageCurlScreen() {
|
||||
|
||||
}
|
@@ -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),
|
||||
)
|
@@ -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 }
|
@@ -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()
|
||||
)
|
||||
}
|
||||
}
|
@@ -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])
|
||||
}
|
||||
}
|
||||
}
|
@@ -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.
|
||||
|
Reference in New Issue
Block a user