Add swipe gesture in Interests screen

Adding Swipe gesture to move/navigate between Topics and People tabs in InterestsScreen.
Used Horizontal Pager From Accompanist Library to implement this feature.

Ref: #53
pull/126/head
Dark-Knight11 3 years ago
parent 11950859d3
commit dba5b07284

@ -21,3 +21,6 @@ plugins {
android { android {
namespace = "com.google.samples.apps.nowinandroid.feature.interests" namespace = "com.google.samples.apps.nowinandroid.feature.interests"
} }
dependencies {
implementation(libs.accompanist.pager)
}

@ -17,13 +17,16 @@
package com.google.samples.apps.nowinandroid.feature.interests package com.google.samples.apps.nowinandroid.feature.interests
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.compose.ExperimentalLifecycleComposeApi import androidx.lifecycle.compose.ExperimentalLifecycleComposeApi
import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.compose.collectAsStateWithLifecycle
@ -38,6 +41,10 @@ import com.google.samples.apps.nowinandroid.core.model.data.previewAuthors
import com.google.samples.apps.nowinandroid.core.model.data.previewTopics import com.google.samples.apps.nowinandroid.core.model.data.previewTopics
import com.google.samples.apps.nowinandroid.core.ui.DevicePreviews import com.google.samples.apps.nowinandroid.core.ui.DevicePreviews
import com.google.samples.apps.nowinandroid.core.ui.TrackDisposableJank import com.google.samples.apps.nowinandroid.core.ui.TrackDisposableJank
import kotlinx.coroutines.launch
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.rememberPagerState
@OptIn(ExperimentalLifecycleComposeApi::class) @OptIn(ExperimentalLifecycleComposeApi::class)
@Composable @Composable
@ -107,6 +114,7 @@ internal fun InterestsScreen(
} }
} }
@OptIn(ExperimentalPagerApi::class)
@Composable @Composable
private fun InterestsContent( private fun InterestsContent(
tabState: InterestsTabState, tabState: InterestsTabState,
@ -119,23 +127,34 @@ private fun InterestsContent(
modifier: Modifier = Modifier modifier: Modifier = Modifier
) { ) {
Column(modifier) { Column(modifier) {
NiaTabRow(selectedTabIndex = tabState.currentIndex) { val pagerState = rememberPagerState()
val scope = rememberCoroutineScope()
NiaTabRow(selectedTabIndex = pagerState.currentPage) {
tabState.titles.forEachIndexed { index, titleId -> tabState.titles.forEachIndexed { index, titleId ->
NiaTab( NiaTab(
selected = index == tabState.currentIndex, selected = pagerState.currentPage == index,
onClick = { switchTab(index) }, onClick = {
switchTab(index)
scope.launch {
pagerState.scrollToPage(index)
}
},
text = { Text(text = stringResource(id = titleId)) } text = { Text(text = stringResource(id = titleId)) }
) )
} }
} }
when (tabState.currentIndex) { HorizontalPager(
0 -> { state = pagerState,
TopicsTabContent( count = tabState.titles.size,
verticalAlignment = Alignment.Top,
contentPadding = PaddingValues(top = 12.dp),
) { index ->
when (index) {
0 -> TopicsTabContent(
topics = uiState.topics, topics = uiState.topics,
onTopicClick = navigateToTopic, onTopicClick = navigateToTopic,
onFollowButtonClick = followTopic, onFollowButtonClick = followTopic,
) )
}
1 -> { 1 -> {
AuthorsTabContent( AuthorsTabContent(
authors = uiState.authors, authors = uiState.authors,
@ -145,6 +164,7 @@ private fun InterestsContent(
} }
} }
} }
}
} }
@Composable @Composable

@ -49,6 +49,7 @@ turbine = "0.12.1"
[libraries] [libraries]
accompanist-flowlayout = { group = "com.google.accompanist", name = "accompanist-flowlayout", version.ref = "accompanist" } accompanist-flowlayout = { group = "com.google.accompanist", name = "accompanist-flowlayout", version.ref = "accompanist" }
accompanist-systemuicontroller = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" } accompanist-systemuicontroller = { group = "com.google.accompanist", name = "accompanist-systemuicontroller", version.ref = "accompanist" }
accompanist-pager = { group = "com.google.accompanist", name = "accompanist-pager", version.ref = "accompanist" }
android-desugarJdkLibs = { group = "com.android.tools", name = "desugar_jdk_libs", version.ref = "androidDesugarJdkLibs" } android-desugarJdkLibs = { group = "com.android.tools", name = "desugar_jdk_libs", version.ref = "androidDesugarJdkLibs" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "androidxActivity" } androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "androidxActivity" }
androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidxAppCompat" } androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidxAppCompat" }

Loading…
Cancel
Save