Android-Compose-Tab

Posted 2022-11-12 LZ涸泽而渔

SnakeTab - 一个高度灵活与定制性的ComposeTab

• 效果图
• 开源地址：
• 功能介绍：
• • SnakeRowTab：
  • SnakeRowTab：
• 关于构造函数的解释
• 使用示例:

最近研究且学习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)
                [e-mail]()
            
            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的用法