1 package com.airbnb.lottie.sample.compose.lottiefiles
2
3 import androidx.annotation.StringRes
4 import androidx.compose.animation.core.animateDpAsState
5 import androidx.compose.animation.core.animateFloatAsState
6 import androidx.compose.foundation.background
7 import androidx.compose.foundation.clickable
8 import androidx.compose.foundation.layout.Arrangement
9 import androidx.compose.foundation.layout.Box
10 import androidx.compose.foundation.layout.Column
11 import androidx.compose.foundation.layout.Row
12 import androidx.compose.foundation.layout.fillMaxWidth
13 import androidx.compose.foundation.layout.height
14 import androidx.compose.foundation.layout.padding
15 import androidx.compose.foundation.layout.width
16 import androidx.compose.foundation.layout.wrapContentWidth
17 import androidx.compose.material.MaterialTheme
18 import androidx.compose.material.Text
19 import androidx.compose.runtime.Composable
20 import androidx.compose.runtime.getValue
21 import androidx.compose.runtime.mutableStateOf
22 import androidx.compose.runtime.remember
23 import androidx.compose.runtime.saveable.rememberSaveable
24 import androidx.compose.runtime.setValue
25 import androidx.compose.ui.Alignment
26 import androidx.compose.ui.Modifier
27 import androidx.compose.ui.layout.onGloballyPositioned
28 import androidx.compose.ui.platform.LocalDensity
29 import androidx.compose.ui.res.stringResource
30 import androidx.compose.ui.unit.dp
31 import androidx.navigation.NavController
32 import com.airbnb.lottie.sample.compose.R
33 import com.airbnb.lottie.sample.compose.composables.Marquee
34
35 enum class LottieFilesTab(@StringRes val stringRes: Int) {
36 Recent(R.string.tab_recent),
37 Popular(R.string.tab_popular),
38 Search(R.string.tab_search)
39 }
40
41 @Composable
LottieFilesPagenull42 fun LottieFilesPage(navController: NavController) {
43 var tab by rememberSaveable { mutableStateOf(LottieFilesTab.Recent) }
44
45 Column {
46 Marquee("LottieFiles")
47 LottieFilesTabBar(
48 selectedTab = tab,
49 onTabSelected = { tab = it },
50 )
51 when (tab) {
52 LottieFilesTab.Recent -> LottieFilesRecentAndPopularPage(navController, LottieFilesMode.Recent)
53 LottieFilesTab.Popular -> LottieFilesRecentAndPopularPage(navController, LottieFilesMode.Popular)
54 LottieFilesTab.Search -> LottieFilesSearchPage(navController)
55 }
56 }
57
58 }
59
60 @Composable
LottieFilesTabBarnull61 fun LottieFilesTabBar(
62 selectedTab: LottieFilesTab,
63 onTabSelected: (LottieFilesTab) -> Unit,
64 modifier: Modifier = Modifier
65 ) {
66 Row(
67 horizontalArrangement = Arrangement.Start,
68 modifier = modifier
69 .fillMaxWidth(),
70 ) {
71 for (tab in LottieFilesTab.values()) {
72 LottieFilesTabBarTab(
73 text = stringResource(tab.stringRes),
74 isSelected = tab == selectedTab,
75 onClick = { onTabSelected(tab) },
76 )
77 }
78 }
79 }
80
81 @Composable
LottieFilesTabBarTabnull82 fun LottieFilesTabBarTab(
83 text: String,
84 isSelected: Boolean,
85 onClick: () -> Unit
86 ) {
87 val textWidth = remember { mutableStateOf(0) }
88 val pxRatio = with(LocalDensity.current) { 1.dp.toPx() }
89 val tabWidth by animateDpAsState(if (isSelected) (textWidth.value / pxRatio).dp else 0.dp)
90 val tabAlpha by animateFloatAsState(if (isSelected) 1f else 0f)
91 Column(
92 modifier = Modifier
93 .clickable(onClick = onClick)
94 .padding(horizontal = 16.dp, vertical = 8.dp)
95 ) {
96 Text(
97 text,
98 maxLines = 1,
99 modifier = Modifier
100 .onGloballyPositioned { textWidth.value = it.size.width }
101 .wrapContentWidth()
102 )
103 Box(
104 modifier = Modifier
105 .align(Alignment.CenterHorizontally)
106 .height(3.dp)
107 .background(MaterialTheme.colors.primary.copy(alpha = tabAlpha))
108 .width(tabWidth)
109 )
110 }
111 }