Add more examples

2025-09-07 03:05:59 +08:00 · 2022-08-18 14:55:50 +02:00
parent 0225c2700c
commit c7ba0f606d
10 changed files with 533 additions and 44 deletions
--- a/demo/src/main/kotlin/eu/wewox/pagecurl/screens/AnimatePageCurlScreen.kt
+++ b/demo/src/main/kotlin/eu/wewox/pagecurl/screens/AnimatePageCurlScreen.kt
@@ -1,8 +0,0 @@
-package eu.wewox.pagecurl.screens
-
-import androidx.compose.runtime.Composable
-
-@Composable
-fun AnimatePageCurlScreen() {
-
-}
--- a/demo/src/main/kotlin/eu/wewox/pagecurl/screens/BackPagePageCurlScreen.kt
+++ b/demo/src/main/kotlin/eu/wewox/pagecurl/screens/BackPagePageCurlScreen.kt
@@ -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),
+)
--- a/demo/src/main/kotlin/eu/wewox/pagecurl/screens/InteractionConfigInPageCurl.kt
+++ b/demo/src/main/kotlin/eu/wewox/pagecurl/screens/InteractionConfigInPageCurl.kt
@@ -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 }
--- a/demo/src/main/kotlin/eu/wewox/pagecurl/screens/ShadowInPageCurlScreen.kt
+++ b/demo/src/main/kotlin/eu/wewox/pagecurl/screens/ShadowInPageCurlScreen.kt
@@ -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()
+        )
+    }
+}
--- a/demo/src/main/kotlin/eu/wewox/pagecurl/screens/StateInPageCurlScreen.kt
+++ b/demo/src/main/kotlin/eu/wewox/pagecurl/screens/StateInPageCurlScreen.kt
@@ -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])
            }
        }
    }