From 9041ed206eac6f24f181ef6da17252e51310ac47 Mon Sep 17 00:00:00 2001 From: Dark-Knight11 Date: Wed, 25 May 2022 04:44:33 +0530 Subject: [PATCH] Add swipe gesture to Tabs in Interests screen --- feature-interests/build.gradle.kts | 7 +++ .../feature/interests/InterestsScreen.kt | 50 +++++++++++-------- gradle/libs.versions.toml | 4 +- 3 files changed, 40 insertions(+), 21 deletions(-) diff --git a/feature-interests/build.gradle.kts b/feature-interests/build.gradle.kts index 15d07ceb7..4bf0afa68 100644 --- a/feature-interests/build.gradle.kts +++ b/feature-interests/build.gradle.kts @@ -21,3 +21,10 @@ plugins { id("dagger.hilt.android.plugin") id("nowinandroid.spotless") } + +dependencies { + + //compose pagers + implementation(libs.accompanist.pager) + implementation(libs.accompanist.pager.indicators) +} \ No newline at end of file diff --git a/feature-interests/src/main/java/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt b/feature-interests/src/main/java/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt index 7be087ccb..f6319d2df 100644 --- a/feature-interests/src/main/java/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt +++ b/feature-interests/src/main/java/com/google/samples/apps/nowinandroid/feature/interests/InterestsScreen.kt @@ -16,14 +16,7 @@ package com.google.samples.apps.nowinandroid.feature.interests -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.WindowInsets -import androidx.compose.foundation.layout.WindowInsetsSides -import androidx.compose.foundation.layout.only -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.safeDrawing -import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.MoreVert import androidx.compose.material.icons.filled.Search @@ -31,15 +24,18 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue +import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel +import com.google.accompanist.pager.ExperimentalPagerApi +import com.google.accompanist.pager.HorizontalPager +import com.google.accompanist.pager.rememberPagerState import com.google.samples.apps.nowinandroid.core.ui.LoadingWheel -import com.google.samples.apps.nowinandroid.core.ui.component.NiaTab -import com.google.samples.apps.nowinandroid.core.ui.component.NiaTabRow -import com.google.samples.apps.nowinandroid.core.ui.component.NiaTopAppBar +import com.google.samples.apps.nowinandroid.core.ui.component.* +import kotlinx.coroutines.launch @Composable fun InterestsRoute( @@ -118,6 +114,8 @@ fun InterestsScreen( } } + +@OptIn(ExperimentalPagerApi::class) @Composable private fun InterestsContent( tabState: InterestsTabState, @@ -130,26 +128,38 @@ private fun InterestsContent( modifier: Modifier = Modifier ) { Column(modifier) { - NiaTabRow(selectedTabIndex = tabState.currentIndex) { + val pagerState = rememberPagerState() + val scope = rememberCoroutineScope() + NiaTabRow( + selectedTabIndex = pagerState.currentPage + ) { tabState.titles.forEachIndexed { index, titleId -> NiaTab( - selected = index == tabState.currentIndex, - onClick = { switchTab(index) }, + selected = pagerState.currentPage == index, + onClick = { + switchTab(index) + scope.launch { + pagerState.scrollToPage(index) + } + }, text = { Text(text = stringResource(id = titleId)) } ) } } - when (tabState.currentIndex) { - 0 -> { - TopicsTabContent( + HorizontalPager( + state = pagerState, + count = tabState.titles.size, + verticalAlignment = Alignment.Top, + contentPadding = PaddingValues(top = 12.dp), + ) { index -> + when (index) { + 0 -> TopicsTabContent( topics = uiState.topics, onTopicClick = navigateToTopic, onFollowButtonClick = followTopic, modifier = Modifier.padding(top = 8.dp) ) - } - 1 -> { - AuthorsTabContent( + 1 -> AuthorsTabContent( authors = uiState.authors, onAuthorClick = navigateToAuthor, onFollowButtonClick = followAuthor, diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 101950284..2aeb99faf 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -1,5 +1,5 @@ [versions] -accompanist = "0.24.8-beta" +accompanist = "0.24.9-beta" androidDesugarJdkLibs = "1.1.5" androidGradlePlugin = "7.1.2" androidxActivity = "1.4.0" @@ -47,6 +47,8 @@ turbine = "0.7.0" [libraries] accompanist-flowlayout = { group = "com.google.accompanist", name = "accompanist-flowlayout", version.ref = "accompanist" } +accompanist-pager = { group = "com.google.accompanist", name = "accompanist-pager", version.ref = "accompanist" } +accompanist-pager-indicators = { group = "com.google.accompanist", name = "accompanist-pager-indicators", version.ref = "accompanist" } android-desugarJdkLibs = { group = "com.android.tools", name = "desugar_jdk_libs", version.ref = "androidDesugarJdkLibs" } android-gradlePlugin = { group = "com.android.tools.build", name = "gradle", version.ref = "androidGradlePlugin" } androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "androidxActivity" }