From 8c1c80d94c0c7bafa56e8b5818a0af88207b0542 Mon Sep 17 00:00:00 2001 From: "debanshu.datta" Date: Thu, 31 Mar 2022 01:38:18 +0530 Subject: [PATCH] Adding Tabs Layout --- app/build.gradle | 13 +++-- .../compose_github/ui/base/MainScreen.kt | 2 + .../base/components/tabHandler/TabHandler.kt | 28 ++++++++++ .../base/components/tabHandler/TabLayout.kt | 22 ++++++++ .../ui/base/components/tabHandler/Tabs.kt | 54 +++++++++++++++++++ .../ui/feature_follow/FollowScreen.kt | 9 +++- .../ui/feature_trending/TrendingScreen.kt | 20 ++++++- 7 files changed, 138 insertions(+), 10 deletions(-) create mode 100644 app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabHandler.kt create mode 100644 app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabLayout.kt create mode 100644 app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/Tabs.kt diff --git a/app/build.gradle b/app/build.gradle index 347b83e..9831240 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -65,9 +65,6 @@ dependencies { androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" - //navigation - implementation "androidx.navigation:navigation-compose:2.4.1" - // Coroutines implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.0' implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.0' @@ -77,13 +74,11 @@ dependencies { implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.4.1" implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.4.1" - //Dagger - Hilt - implementation 'com.google.dagger:hilt-android:2.39' - // Dagger - Hilt kapt "com.google.dagger:hilt-android-compiler:2.39" implementation "androidx.hilt:hilt-lifecycle-viewmodel:1.0.0-alpha03" kapt "androidx.hilt:hilt-compiler:1.0.0" + implementation 'com.google.dagger:hilt-android:2.39' implementation "androidx.hilt:hilt-navigation-compose:1.0.0" // Ktor Client @@ -94,7 +89,6 @@ dependencies { implementation "io.ktor:ktor-client-logging:$ktor_version" implementation "ch.qos.logback:logback-classic:1.2.3" - // Coroutines implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.0' implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.0' @@ -109,5 +103,10 @@ dependencies { // system ui controller implementation "com.google.accompanist:accompanist-systemuicontroller:0.17.0" + // Navigation implementation "androidx.navigation:navigation-compose:2.5.0-alpha03" + + // Pager + implementation "com.google.accompanist:accompanist-pager:0.23.1" + implementation "com.google.accompanist:accompanist-pager-indicators:0.23.1" } \ No newline at end of file diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/base/MainScreen.kt b/app/src/main/java/com/debanshu777/compose_github/ui/base/MainScreen.kt index 47df167..d83b458 100644 --- a/app/src/main/java/com/debanshu777/compose_github/ui/base/MainScreen.kt +++ b/app/src/main/java/com/debanshu777/compose_github/ui/base/MainScreen.kt @@ -27,11 +27,13 @@ fun MainScreen(viewModel: githubViewModel){ viewModel.updateSearchTextState("") viewModel.updateSearchWidgetState(SearchWidgetState.CLOSED) viewModel.searchState.value= SearchState(data= emptyList()) + navController.navigate(Screen.TrendingScreen.route) }, onSearchClick = { viewModel.searchUser(it) }, onSearchTriggered={ + navController.navigate(Screen.SearchScreen.route) viewModel.updateSearchWidgetState(SearchWidgetState.OPENED) } ) diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabHandler.kt b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabHandler.kt new file mode 100644 index 0000000..a441e2f --- /dev/null +++ b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabHandler.kt @@ -0,0 +1,28 @@ +package com.debanshu777.compose_github.ui.base.components.tabHandler + +import androidx.compose.foundation.layout.Column +import androidx.compose.runtime.Composable +import com.google.accompanist.pager.ExperimentalPagerApi +import com.google.accompanist.pager.HorizontalPager +import com.google.accompanist.pager.PagerState + +@ExperimentalPagerApi +@Composable +fun TabHandler(pagerState: PagerState,pageCount:Int,tabNames:List) { + Column( + ) { + Tabs(pagerState = pagerState,tabNames) + TabsContent(pagerState = pagerState,pageCount) + } +} + +@ExperimentalPagerApi +@Composable +fun TabsContent(pagerState: PagerState,pageCount:Int) { + HorizontalPager(state = pagerState,count=pageCount) { page -> + when(page) { + 0 -> TabLayout(data = "Make It Easy One") + 1 -> TabLayout(data = "Make It Easy Two") + } + } +} diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabLayout.kt b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabLayout.kt new file mode 100644 index 0000000..84651a3 --- /dev/null +++ b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/TabLayout.kt @@ -0,0 +1,22 @@ +package com.debanshu777.compose_github.ui.base.components.tabHandler + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier + +@Composable +fun TabLayout(data: String) { + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + Text( + text = data, + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/Tabs.kt b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/Tabs.kt new file mode 100644 index 0000000..a201f71 --- /dev/null +++ b/app/src/main/java/com/debanshu777/compose_github/ui/base/components/tabHandler/Tabs.kt @@ -0,0 +1,54 @@ +package com.debanshu777.compose_github.ui.base.components.tabHandler + +import androidx.compose.material.Tab +import androidx.compose.material.TabRow +import androidx.compose.material.TabRowDefaults +import androidx.compose.material.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.google.accompanist.pager.ExperimentalPagerApi +import com.google.accompanist.pager.PagerState +import com.google.accompanist.pager.pagerTabIndicatorOffset +import kotlinx.coroutines.launch + + +@ExperimentalPagerApi +@Composable +fun Tabs(pagerState: PagerState,tabNames:List) { + val scope = rememberCoroutineScope() + + TabRow( + selectedTabIndex = pagerState.currentPage, + divider = { + TabRowDefaults.Divider( + thickness = 2.dp, + ) + }, + indicator = { tabPositions -> + TabRowDefaults.Indicator( + Modifier.pagerTabIndicatorOffset(pagerState, tabPositions), + height = 2.dp, + ) + } + ) { + tabNames.forEachIndexed { index, _-> + Tab( + text = { + Text( + tabNames[index], + color = if (pagerState.currentPage == index) Color.White else Color.LightGray + ) + }, + selected = pagerState.currentPage == index, + onClick = { + scope.launch { + pagerState.animateScrollToPage(index) + } + } + ) + } + } +} \ No newline at end of file diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/feature_follow/FollowScreen.kt b/app/src/main/java/com/debanshu777/compose_github/ui/feature_follow/FollowScreen.kt index db922b9..186dd10 100644 --- a/app/src/main/java/com/debanshu777/compose_github/ui/feature_follow/FollowScreen.kt +++ b/app/src/main/java/com/debanshu777/compose_github/ui/feature_follow/FollowScreen.kt @@ -2,8 +2,15 @@ package com.debanshu777.compose_github.ui.feature_follow import androidx.compose.material.Text import androidx.compose.runtime.Composable +import com.debanshu777.compose_github.ui.base.components.tabHandler.TabHandler +import com.google.accompanist.pager.ExperimentalPagerApi +import com.google.accompanist.pager.rememberPagerState +@OptIn(ExperimentalPagerApi::class) @Composable fun FollowScreen(){ - Text("Follow Screen") + val pagerState = rememberPagerState(0) + val pageCount=2 + val tabList = listOf("Repository", "Developer") + TabHandler(pagerState,pageCount,tabList) } \ No newline at end of file diff --git a/app/src/main/java/com/debanshu777/compose_github/ui/feature_trending/TrendingScreen.kt b/app/src/main/java/com/debanshu777/compose_github/ui/feature_trending/TrendingScreen.kt index 3ff9a10..1d08578 100644 --- a/app/src/main/java/com/debanshu777/compose_github/ui/feature_trending/TrendingScreen.kt +++ b/app/src/main/java/com/debanshu777/compose_github/ui/feature_trending/TrendingScreen.kt @@ -1,9 +1,25 @@ package com.debanshu777.compose_github.ui.feature_trending -import androidx.compose.material.Text +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material.* import androidx.compose.runtime.Composable +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.debanshu777.compose_github.ui.base.components.tabHandler.TabHandler +import com.google.accompanist.pager.* +import kotlinx.coroutines.launch +@OptIn(ExperimentalPagerApi::class) @Composable fun TrendingScreen() { - Text("Trending Screen") + val pagerState = rememberPagerState(0) + val pageCount=2 + val tabList = listOf("Repository", "Developer") + TabHandler(pagerState,pageCount,tabList) } \ No newline at end of file