Jetpack Compose实现滑块式标签tab

1. 先完成一个基本的tab

 @Composable
 fun SliderTabs() {
     var selectedIndex by remember { mutableStateOf(0) }
     val bgColor = Color(0xff1E76DA)
 ​
     val list = listOf("Active", "Completed")
     TabRow(
         selectedTabIndex = selectedIndex,
         backgroundColor = bgColor,
         modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp),
         indicator = { tabPositions ->
             TabRowDefaults.Indicator(
                 modifier = Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
                 color = Color.White
             )
         }
     ) {
         list.forEachIndexed { index, text ->
             val selected = selectedIndex == index
             Tab(
                 selected = selected,
                 onClick = { selectedIndex = index },
                 text = { Text(text = text, color = Color.White) }
             )
         }
     }
 }

2. TabRow改为胶囊样式

 Modifier.clip(RoundedCornerShape(50))

3. 指示器改为胶囊样式

 Modifier
     .tabIndicatorOffset(tabPositions[selectedIndex])
     .fillMaxSize()
     .padding(1.dp)
     .clip(RoundedCornerShape(50))

4. 文字置于上层，并且选中时改变文字颜色

指示器尺寸设置为fillMaxSize后遮挡了标签文字，需要将文字置于上层。

 Modifier.zIndex(2f)
 val textColor = if (selected) bgColor else Color.White
 Tab(
     modifier = Modifier.zIndex(2f),
     selected = selected,
     onClick = { selectedIndex = index },
     text = { Text(text = text, color = textColor) }
 )

5. 禁用点击水波纹效果

 class NoRippleInteractionSource : MutableInteractionSource {
     override val interactions: Flow<Interaction> = emptyFlow()
     override suspend fun emit(interaction: Interaction) {}
     override fun tryEmit(interaction: Interaction) = true
 }
 ​
 Tab(
     modifier = Modifier.zIndex(2f),
     selected = selected,
     onClick = { selectedIndex = index },
     text = { Text(text = text, color = textColor) },
     interactionSource = NoRippleInteractionSource()
 )

6. 文字颜色添加渐变动画

 val textColor = remember {
     Animatable(Color.White)
 }
 LaunchedEffect(
     selected
 ) {
     textColor.animateTo(if (selected) bgColor else Color.White)
 }
 Tab(
     modifier = Modifier.zIndex(2f),
     selected = selected,
     onClick = { selectedIndex = index },
     text = { Text(text = text, color = textColor.value) },
     interactionSource = NoRippleInteractionSource()
 )

7. 完整代码

 @Composable
 fun SliderTabs() {
     var selectedIndex by remember { mutableStateOf(0) }
     val bgColor = Color(0xff1E76DA)
 ​
     val list = listOf("Active", "Completed")
     TabRow(
         selectedTabIndex = selectedIndex,
         backgroundColor = Color(0xff1E76DA),
         modifier = Modifier
             .padding(vertical = 4.dp, horizontal = 8.dp)
             .clip(RoundedCornerShape(50)),
         indicator = { tabPositions ->
             TabRowDefaults.Indicator(
                 modifier = Modifier
                     .tabIndicatorOffset(tabPositions[selectedIndex])
                     .fillMaxSize()
                     .padding(1.dp)
                     .clip(RoundedCornerShape(50)),
                 color = Color.White
             )
         }
     ) {
         list.forEachIndexed { index, text ->
             val selected = selectedIndex == index
             val textColor = remember {
                 Animatable(Color.White)
             }
             LaunchedEffect(
                 selected
             ) {
                 textColor.animateTo(if (selected) bgColor else Color.White)
             }
 ​
             Tab(
                 modifier = Modifier.zIndex(2f),
                 selected = selected,
                 onClick = { selectedIndex = index },
                 text = { Text(text = text, color = textColor.value) },
                 interactionSource = NoRippleInteractionSource()
             )
         }
     }
 }