Fix Pager usage of Scaffold (#1897)

google · Dec 19, 2023 · 60f2b19 · 60f2b19
1 parent 47abc88
commit 60f2b19
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 20 deletions.
diff --git a/composables/src/main/java/com/google/android/horologist/composables/DatePicker.kt b/composables/src/main/java/com/google/android/horologist/composables/DatePicker.kt
@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalFoundationApi::class)
+
 package com.google.android.horologist.composables
 
 import androidx.compose.animation.core.Animatable
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.BoxWithConstraints

diff --git a/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt b/composables/src/main/java/com/google/android/horologist/composables/TimePicker.kt
@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalFoundationApi::class)
+
 package com.google.android.horologist.composables
 
 import android.content.Context
 import android.view.accessibility.AccessibilityManager
 import androidx.annotation.PluralsRes
 import androidx.annotation.VisibleForTesting
 import androidx.compose.animation.core.Animatable
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box

diff --git a/compose-layout/api/current.api b/compose-layout/api/current.api
@@ -152,7 +152,7 @@ package com.google.android.horologist.compose.layout {
   }
 
   public final class ScreenScaffoldKt {
-    method @androidx.compose.runtime.Composable public static void ScreenScaffold(optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit>? timeText, optional androidx.compose.foundation.gestures.ScrollableState? scrollState, optional androidx.wear.compose.material.PageIndicatorState? pageIndicatorState, optional kotlin.jvm.functions.Function0<kotlin.Unit>? positionIndicator, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
+    method @androidx.compose.runtime.Composable public static void ScreenScaffold(optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit>? timeText, optional androidx.compose.foundation.gestures.ScrollableState? scrollState, optional androidx.compose.foundation.pager.PagerState? pagerState, optional kotlin.jvm.functions.Function0<kotlin.Unit>? positionIndicator, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> content);
   }
 
   public final class ScrollAwayKt {

diff --git a/compose-layout/src/main/java/com/google/android/horologist/compose/layout/PageScaffold.kt b/compose-layout/src/main/java/com/google/android/horologist/compose/layout/PageScaffold.kt
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalFoundationApi::class)
+
 package com.google.android.horologist.compose.layout
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.runtime.Composable
@@ -40,5 +43,12 @@ fun PageScaffold(
     positionIndicator: (@Composable () -> Unit)? = null,
     content: @Composable BoxScope.() -> Unit,
 ) {
-    ScreenScaffold(modifier = modifier, timeText, scrollState, null, positionIndicator, content)
+    ScreenScaffold(
+        modifier = modifier,
+        timeText = timeText,
+        scrollState = scrollState,
+        pagerState = null,
+        positionIndicator = positionIndicator,
+        content = content,
+    )
 }
diff --git a/compose-layout/src/main/java/com/google/android/horologist/compose/layout/ScreenScaffold.kt b/compose-layout/src/main/java/com/google/android/horologist/compose/layout/ScreenScaffold.kt
@@ -14,26 +14,30 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalWearFoundationApi::class)
+@file:OptIn(ExperimentalWearFoundationApi::class, ExperimentalFoundationApi::class)
 
 package com.google.android.horologist.compose.layout
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.pager.PagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
 import androidx.wear.compose.foundation.OnFocusChange
 import androidx.wear.compose.foundation.lazy.ScalingLazyListState
 import androidx.wear.compose.material.HorizontalPageIndicator
-import androidx.wear.compose.material.PageIndicatorState
 import androidx.wear.compose.material.PositionIndicator
 import androidx.wear.compose.material.Scaffold
+import com.google.android.horologist.compose.pager.PageScreenIndicatorState
 
 /**
  * Navigation Route (Screen) Scaffold to place *inside*
@@ -43,7 +47,7 @@ import androidx.wear.compose.material.Scaffold
  * @param modifier the Scaffold modifier.
  * @param timeText the page specific time text.
  * @param scrollState the ScrollableState to show in a default PositionIndicator.
- * @param pageIndicatorState state for a HorizontalPager.
+ * @param pagerState state for a HorizontalPager.
  * @param positionIndicator set a non default PositionIndicator or disable with an no-op lambda.
  * @param content the content block.
  */
@@ -52,7 +56,7 @@ fun ScreenScaffold(
     modifier: Modifier = Modifier,
     timeText: (@Composable () -> Unit)? = null,
     scrollState: ScrollableState? = null,
-    pageIndicatorState: PageIndicatorState? = null,
+    pagerState: PagerState? = null,
     positionIndicator: (@Composable () -> Unit)? = null,
     content: @Composable BoxScope.() -> Unit,
 ) {
@@ -78,8 +82,13 @@ fun ScreenScaffold(
         modifier = modifier,
         timeText = timeText,
         pageIndicator = {
-            if (pageIndicatorState != null) {
-                HorizontalPageIndicator(pageIndicatorState = pageIndicatorState)
+            if (pagerState != null) {
+                val pageIndicatorState = remember(pagerState) { PageScreenIndicatorState(pagerState) }
+
+                HorizontalPageIndicator(
+                    modifier = Modifier.padding(6.dp),
+                    pageIndicatorState = pageIndicatorState,
+                )
             }
         },
         positionIndicator = {

diff --git a/compose-layout/src/main/java/com/google/android/horologist/compose/pager/PagerScreen.kt b/compose-layout/src/main/java/com/google/android/horologist/compose/pager/PagerScreen.kt
@@ -22,7 +22,6 @@ import android.util.Log
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.shape.CircleShape
@@ -32,20 +31,18 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.State
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalLifecycleOwner
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.repeatOnLifecycle
 import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
 import androidx.wear.compose.foundation.HierarchicalFocusCoordinator
-import androidx.wear.compose.material.HorizontalPageIndicator
 import androidx.wear.compose.material.PageIndicatorState
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
+import com.google.android.horologist.compose.layout.ScreenScaffold
 
 /**
  * A Wear Material Compliant Pager screen.
@@ -60,9 +57,9 @@ public fun PagerScreen(
     state: PagerState,
     content: @Composable ((Int) -> Unit),
 ) {
-    Box(
+    ScreenScaffold(
         modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center,
+        pagerState = state,
     ) {
         HorizontalPager(
             modifier = modifier,
@@ -75,12 +72,6 @@ public fun PagerScreen(
                 }
             }
         }
-
-        val pagerScreenState = remember(state) { PageScreenIndicatorState(state) }
-        HorizontalPageIndicator(
-            modifier = Modifier.padding(6.dp),
-            pageIndicatorState = pagerScreenState,
-        )
     }
 }
 

diff --git a/sample/src/main/java/com/google/android/horologist/sample/SampleWearApp.kt b/sample/src/main/java/com/google/android/horologist/sample/SampleWearApp.kt
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalFoundationApi::class)
+
 package com.google.android.horologist.sample
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.runtime.Composable