Wie kann ich Registerkarte in Jetpack animieren, um Tabrow zu komponieren, um WhatsApp ähnlich zu sein? ⇐ Android

[Anonymous]

Wie erstellen Sie eine glatte Registerkarte Switching -Anzeige in Tabrow in Jetpack, ähnlich wie WhatsApp? < /p>

Code: Select all

@Composable
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
fun TabRowHorizontalPager(
pagerState: PagerState,
fancyIndicator: @Composable (List) -> Unit,
titles: List,
coroutineScope: CoroutineScope,
scrollBehavior: TopAppBarScrollBehavior,
navController: NavHostController
) {
TabRow(
selectedTabIndex = pagerState.currentPage,
containerColor = MaterialTheme.colorScheme.primary,
contentColor = MaterialTheme.colorScheme.onPrimary,
indicator = fancyIndicator,
) {
titles.forEachIndexed { index, title ->
Tab(
selected = pagerState.currentPage == index,
onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
},
text = {
Text(
text = title,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
}
)
}
}
HorizontalPager(
pageCount = 3,
state = pagerState,
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) { tabIndex ->
when (tabIndex) {
0 -> ChatsTabContent(navController = navController)
1 -> StatusTabContent(navController = navController)
2 -> CallsTabContent(navController = navController)
}
}
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun IndicatorHome(
index: PagerState,
tabPositions: List,
tabColors: List = listOf()
) {
val selectedTabIndex = index.currentPage
val colors = tabColors.ifEmpty { listOf(MaterialTheme.colorScheme.surface) }
val transition = updateTransition(selectedTabIndex, label = "")
val indicatorStart by transition.animateDp(
transitionSpec = {
if (initialState < targetState) {
spring(dampingRatio = 1f, stiffness = 50f)
} else {
spring(dampingRatio = 1f, stiffness = 1000f)
}
}, label = ""
) {
tabPositions[it].left
}

val indicatorEnd by transition.animateDp(
transitionSpec = {
if (initialState < targetState) {
spring(dampingRatio = 1f, stiffness = 1000f)
} else {
spring(dampingRatio = 1f, stiffness = 50f)
}
}, label = ""
) {
tabPositions[it].right
}

val indicatorColor by transition.animateColor(label = "") {
colors[it % colors.size]
}

FancyIndicator(
indicatorColor,
modifier = Modifier

.fillMaxSize()
.wrapContentSize(align = Alignment.BottomStart)
.offset(x = indicatorStart, y = 0.dp)
.width(indicatorEnd - indicatorStart)
)
}

@Composable
fun FancyIndicator(indicatorColor: Color, modifier: Modifier) {
TabRowDefaults.Indicator(modifier, color = indicatorColor, height = 4.dp)
}

Dies ist das Ergebnis. Ich erhalte

Dies ist erwartet. Sogar ein bisschen gleiten.