[Sample] Add sample for HorizontalPager + TabRow

docs/pager.md

@@ -65,6 +65,20 @@ VerticalPager(state = pagerState) { page ->
 
 Pages in both `HorizontalPager` & `VerticalPager` are lazily created and laid-out as required by the layout. As the user scrolls through pages, any pages which are no longer required are removed from the content.
 
+## Integration with Tabs
+
+A common use-case for `HorizontalPager` is when used in conjunction with a `TabRow`.
+
+The [HorizontalPagerTabsSample](https://github.com/google/accompanist/blob/main/sample/src/main/java/com/google/accompanist/sample/pager/HorizontalPagerTabsSample.kt) demonstrates how this can be done:
+
+<figure>
+    <video width="300" controls loop>
+    <source src="tabs.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <figcaption>HorizontalPager + TabRow</figcaption>
+</figure>
+
 ### Offscreen Limit
 
 Both `HorizontalPager` & `VerticalPager` allow the setting of the `offscreenLimit`, which defines the number of pages that should be retained on either side of the current page. Pages beyond this limit will be removed, and then recreated when needed. This value defaults to `1`, but can be increased to enable pre-loading of more content:

sample/src/main/AndroidManifest.xml

@@ -176,6 +176,16 @@
             </intent-filter>
         </activity>
 
+        <activity
+            android:name=".pager.HorizontalPagerTabsSample"
+            android:label="@string/horiz_pager_title_tabs"
+            android:theme="@style/Theme.AccompanistSample">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="com.google.accompanist.sample.SAMPLE_CODE" />
+            </intent-filter>
+        </activity>
+
         <activity
             android:name=".pager.VerticalPagerBasicSample"
             android:label="@string/vertical_pager_title_basics"

sample/src/main/java/com/google/accompanist/sample/pager/HorizontalPagerTabsSample.kt

@@ -0,0 +1,167 @@
+/*
+ * Copyright 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.accompanist.sample.pager
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+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.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.ScrollableTabRow
+import androidx.compose.material.Surface
+import androidx.compose.material.Tab
+import androidx.compose.material.TabPosition
+import androidx.compose.material.TabRowDefaults
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.lerp
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.PagerState
+import com.google.accompanist.pager.rememberPagerState
+import com.google.accompanist.sample.AccompanistSampleTheme
+import com.google.accompanist.sample.R
+import kotlinx.coroutines.launch
+
+class HorizontalPagerTabsSample : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContent {
+            AccompanistSampleTheme {
+                Surface {
+                    Sample()
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalPagerApi::class)
+@Composable
+private fun Sample() {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text(stringResource(R.string.horiz_pager_title_tabs)) },
+                backgroundColor = MaterialTheme.colors.surface,
+            )
+        },
+        modifier = Modifier.fillMaxSize()
+    ) {
+        val pages = remember {
+            listOf("Home", "Shows", "Movies", "Books", "Really long movies", "Short audiobooks")
+        }
+
+        Column(Modifier.fillMaxSize()) {
+            val coroutineScope = rememberCoroutineScope()
+
+            // Remember a PagerState with our tab count
+            val pagerState = rememberPagerState(pageCount = pages.size)
+
+            ScrollableTabRow(
+                // Our selected tab is our current page
+                selectedTabIndex = pagerState.currentPage,
+                indicator = { tabPositions ->
+                    TabRowDefaults.Indicator(
+                        Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
+                    )
+                }
+            ) {
+                // Add tabs for all of our pages
+                pages.forEachIndexed { index, title ->
+                    Tab(
+                        text = { Text(title) },
+                        selected = pagerState.currentPage == index,
+                        onClick = {
+                            // Animate to the selected page when clicked
+                            coroutineScope.launch {
+                                pagerState.animateScrollToPage(index)
+                            }
+                        }
+                    )
+                }
+            }
+
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.weight(1f)
+            ) { page ->
+                // Our content for each page
+                Box(modifier = Modifier.fillMaxSize()) {
+                    Card(Modifier.padding(16.dp)) {
+                        Box(Modifier.fillMaxSize()) {
+                            Text(
+                                text = "Page: ${pages[page]}",
+                                style = MaterialTheme.typography.h4,
+                                modifier = Modifier.align(Alignment.Center)
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * This indicator syncs up the tab indicator with the [HorizontalPager] position.
+ * We may add this in the library at some point.
+ */
+@OptIn(ExperimentalPagerApi::class)
+fun Modifier.pagerTabIndicatorOffset(
+    pagerState: PagerState,
+    tabPositions: List<TabPosition>,
+): Modifier = composed {
+    val targetIndicatorOffset: Dp
+    val indicatorWidth: Dp
+
+    val currentTab = tabPositions[pagerState.currentPage]
+    val nextTab = tabPositions.getOrNull(pagerState.currentPage + 1)
+    if (nextTab != null) {
+        // If we have a next tab, lerp between the size and offset
+        targetIndicatorOffset = lerp(currentTab.left, nextTab.left, pagerState.currentPageOffset)
+        indicatorWidth = lerp(currentTab.width, nextTab.width, pagerState.currentPageOffset)
+    } else {
+        // Otherwise we just use the current tab/page
+        targetIndicatorOffset = currentTab.left
+        indicatorWidth = currentTab.width
+    }
+
+    fillMaxWidth()
+        .wrapContentSize(Alignment.BottomStart)
+        .offset(x = targetIndicatorOffset)
+        .width(indicatorWidth)
+}

sample/src/main/res/values/strings.xml

@@ -35,6 +35,7 @@
     <string name="insets_title_imeanim">Insets: IME Animations</string>
 
     <string name="horiz_pager_title_basics">HorizontalPager: Basic</string>
+    <string name="horiz_pager_title_tabs">HorizontalPager: Tabs</string>
     <string name="vertical_pager_title_basics">VerticalPager: Basic</string>
 
     <string name="flowlayout_title_column">Flow Layout: Column</string>