美文网首页
TabLayout 常见设置

TabLayout 常见设置

作者: 王家匀匀 | 来源:发表于2020-11-24 10:10 被阅读0次

    全路径地址为:com.google.android.material.tabs.TabLayout

    1. app:tabPaddingEnd 与 app:tabPaddingStart 要相等,否则会导致indicator 不是居中的;
    2. app:tabMode="scrollable", 并设置了paddingStart, 会导致左边滑动。这时候 可以使用 margingStart 达到左边指定间距的效果;
    3. indicator 希望是固定宽度,并且与文字居中。
      最简单的办法:做一个 .9 图,左右留白区域 设置可以缩放,左右和上下全部为内容区域。 设置 indicator 高度为 预期高度。


      indicator_with_padding.png
          <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="35dp"
                    android:background="@color/white"
                    app:tabIndicatorFullWidth="false"
                    app:tabMode="scrollable"
                    app:tabPadding="0dp"
                    app:tabIndicatorHeight="3dp"
                    app:tabRippleColor="@null"
                    app:tabIndicator="@drawable/indicator_with_padding" />
    

    app:tabRippleColor 是取消点击波纹效果;
    app:tabPadding可以设置tab 左右间距、可以实现取消额外间距的效果;
    app:tabIndicatorFullWidth 是设置indicator宽度是不是跟tab 等宽,设置为false, 则效果为 左右比tab文字小一点;
    app:tabIndicator 为设置indicator drawable. 可以使用png图片;
    app:tabIndicatorHeight 设置indicator高度。

    app:tabIndicatorColor 设置indicator颜色。
    一定要设置,不然效果就是colorPrimary颜色加app:tabIndicator 形状。设置成app:tabIndicator drawable的主题色即可。

    1. 实现 tab 自定义view
      在tabLayout 设置adapter 后(个数确定),遍历个数,对每个tab 设置customView。然后设置默认选中的那个的文字颜色、大小、加粗与否。并在tab 选中和取消选中时再设置文字等ui。

    step1.先设置tab选中后ui变化

      binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
                override fun onTabReselected(p0: TabLayout.Tab?) {
                }
    
                override fun onTabUnselected(tab: TabLayout.Tab?) {
                    tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 14f
                    tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.gray))
                }
    
                override fun onTabSelected(tab: TabLayout.Tab?) {
                    //修改文字大小
                    tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
                    tab?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
                }
            })
    

    step2:给tablayout绑定viewpager;
    step3:绑定viewpager后,给tab设置custom view. tab_text_view 实际就是一个TextView。

        /**
         * 给tab设置custom view。需要在tabLayout 绑定viewpager后调用(此时才有child)
         */
        private fun setTabCustomLayout() {
            val count = binding.tabLayout.tabCount
            for (i in 0 until count) {
                val tab = binding.tabLayout.getTabAt(i)
                tab?.setCustomView(R.layout.tab_text_view)
                (tab?.customView as? TextView)?.text = binding.viewPager.adapter?.getPageTitle(i)
                //文字加粗
                (tab?.customView as? TextView)?.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
            }
            if (count > 0) {
                //选中第一个,设置文字大小和颜色
                binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.textSize = 18f
                binding.tabLayout.getTabAt(0)?.customView?.findViewById<TextView>(R.id.tabTextView)?.setTextColor(ResUtil.getColor(R.color.brand_text_color))
            }
        }
    
    

    相关文章

      网友评论

          本文标题:TabLayout 常见设置

          本文链接:https://www.haomeiwen.com/subject/ncmliktx.html