SnakeTab - 一个高度灵活与定制性的ComposeTab
最近研究且学习Compose，目的是能够用Compose进行商业项目开发，过程中发现了Compose官方提供的Tab 为TabRow和ScrollTabRow，使用后感觉效果不错，但是定制性太差，完全无法用到项目中去，因此自己造轮子
效果图
有水印，将就着看一下吧…
开源地址：
SnakeTab
我的项目开源在Gitee，且代码量非常小，
可选择直接使用（使用过后觉得好用，请给我点个star）
功能介绍：
snakeTab目前支持横向Tab，包含两个主要Compose组件，SnakeRowTab与SnakeScrollTab
SnakeRowTab：
宽度不满一屏，且想要在轴上摆放Tab
SnakeRowTab，主要功能是用于在轴方向上摆放Tab，对齐方式有：
SpaceBetween,SpaceAround,SpaceEvenly等
SnakeRowTab：
其主要功能是，当tab宽度超过一屏时，可滚动tab，切能够跟随设定的tabScrollPosition进行位置固定的滚动，如上方效果图中，当pager滚动后，tab滚动位置总是停留在scrollPOsition
当然关于效果，描述上去始终是乏力的，感兴趣的，去拉代码run起来看一看
关于构造函数的解释
首先两个组件在细节上会有不同，在这里只做简单的描述，如果有不太清楚的，可以私信给我
modifier：装饰器
tabWidth：tab的总宽度
selectIndex：选中的位置，通常与pager等联动
tabs :@Composable()->Unit 具体的tab内容，文章下方会给出使用示例
tabAlignment: tab自身的对齐方式，目前tab支持的是Text类型的tab，以baseLine为基准进行对齐，以后会支持任何类型组件对齐
tabAxisAlignment ：tab在轴上的分配方式，SpaceEvenly，SpaceBetween，SpaceAround等
indicator: 指示器，通常为tab下方，当tab被选中时展示的组件
indicatorRule： 指示器规则，设定指示器的宽度是跟随自身 还是跟随每一个Tab的宽度
indicatorOffset: 指示器的Offset，支持4个方向上位移
indicatorScrollPercentage: 指示器的滚动百分比，当需要指示器跟随pager之类的进行滚动时，需要传一个百分比，使得指示器跟随（例如：手指在pager中滑动 10.dp，这10.dp相对于pager的宽度，占比为 5%，因此传入这0.05），文章下方会有使用示例
tabContentPadding : tab的内容间距
使用示例:
class SnakeRowTabActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val pagerData = mutableListOf<String>()
val tabData = mutableListOf<String>()
for (index in 1..3) {
pagerData.add("${index}--page")
tabData.add("tab$index")
}
val pagerWidth = with(LocalDensity.current){
this@SnakeRowTabActivity.resources.displayMetrics.widthPixels.toDp()
}
ShowContent(pagerData, tabData,pagerWidth,pagerWidth)
}
}
@OptIn(ExperimentalPagerApi::class)
@Composable
fun ShowContent(pagerData: List<String>, tabData: List<String>,tabWidth :Dp,pagerWidth:Dp){
val pagerState = rememberPagerState()
val pagerWidthPx = with(LocalDensity.current){
pagerWidth.toPx()
}
var tabSelectIndex by remember {
mutableStateOf(0)
}
var lastTabSelectIndex by remember {
mutableStateOf(0)
}
var indicatorScrollPercentage by remember {
mutableStateOf(0f)
}
LaunchedEffect(key1 = pagerState.currentPage + tabSelectIndex, block = {
if (tabSelectIndex == lastTabSelectIndex) {
//触发来源于pagerState
tabSelectIndex = pagerState.currentPage
} else {
//触发来源于tabSelect
pagerState.animateScrollToPage(tabSelectIndex)
}
indicatorScrollPercentage = 0f
lastTabSelectIndex = tabSelectIndex
})
val nestedScroll = remember {
object : NestedScrollConnection {
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
indicatorScrollPercentage += available.x / pagerWidthPx
return Offset.Zero
}
}
}
Column(
modifier = Modifier
.background(Color.White)
.fillMaxWidth()
.fillMaxHeight()
) {
SnakeRowTab(
Modifier.background(Color.Blue),
tabWidth=tabWidth,
selectIndex = tabSelectIndex,
tabs = {
tabData.forEachIndexed { index, s ->
Text(
text = s,
Modifier.clickable {
tabSelectIndex = index
},
fontSize = if (index == tabSelectIndex) 20.sp else 13.sp,
color = if (index == tabSelectIndex) Color.Red else Color.White
)
}
},
tabAlignment = SnakeTabSetting.tabAlignment,
tabAxisAlignment=SnakeTabSetting.tabAxisAlignment,
indicator = {
Box(
Modifier
.width(20.dp)
.height(4.dp)
.background(Color.Red)
)
}, indicatorRule = SnakeTabSetting.indicatorRule,
indicatorOffset = DpOffset(0.dp, 0.dp),
indicatorScrollPercentage = if (SnakeTabSetting.moveByOther) indicatorScrollPercentage else 0f,
)
HorizontalPager(
count = pagerData.size,
modifier = Modifier
.background(Color.Gray)
.nestedScroll(nestedScroll),
state = pagerState
) { index ->
Text(text = pagerData[index], textAlign = TextAlign.Center, fontSize = 20.sp)
}
}
}
}
另一个组件的使用也雷同，因此不做额外展示
代码中只是对SnakeRowTab做使用，为了与pager进行联动，使用nestedScroll进行pager的事件获取，在计算后，返回给了SnakeRowTab，也算是顺便演示了一下nestedScroll的用法