Android之解决TabLayout里面每个Tab项的间距和修改指示线的长度(非反射)和修改选中字体大小

1 问题

1）由于TabLayout设置了可滑动Tab参数

app:tabMode="scrollable"

导致每个Tab之间的间距很大，但是UI设计图里面的字体之间的间距很小，我们改怎么解决？

2）修改TabLayout指示线的长度(非反射)

3）修改选中的字体大小并且加粗

 

 

 

 

 

 

 

 

2 解决办法

问题1解决办法：

对TabLayout进行自定义，然后反射下面字段进行修改

scrollableTabMinWidth

import android.content.Context;
import android.util.AttributeSet;

import com.appsinnova.android.keepdrop.R;
import com.google.android.material.tabs.TabLayout;

import java.lang.reflect.Field;

public class MyTabLayout extends TabLayout {
    // 一屏显示多少个tab
    private static final int TabViewNumber = 8;
    // support 低版本可能不一样
    private static final String SCROLLABLE_TAB_MIN_WIDTH = "scrollableTabMinWidth";

    public MyTabLayout(Context context) {
        super(context);
        initTabMinWidth();
    }

    public MyTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTabMinWidth();
    }

    public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initTabMinWidth();
    }

    private void initTabMinWidth() {
//        int screenWidth = getResources().getDisplayMetrics().widthPixels;
//        int tabMinWidth = screenWidth / TabViewNumber;
        // scrollable模式时，tab的最小宽度
        int tabMinWidth = (int) getResources().getDimension(R.dimen.value_25_dp);

        Field field;
        try {
            field = TabLayout.class.getDeclaredField(SCROLLABLE_TAB_MIN_WIDTH);
            field.setAccessible(true);
            field.set(this, tabMinWidth);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}

 

 

问题2解决办法：

网上很多反射，感觉不靠谱，提供简单粗暴的方法

在drawable下面创建一个xml文件layer_tab_indicator.xml

然后放到MyTabLayout里面去

                <**********************.MyTabLayout
                    android:layout_marginStart="@dimen/value_10_dp"
                    android:id="@+id/vedioTabLayout"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    app:tabRippleColor = "@android:color/transparent"
                    app:elevation="0dp"
                    android:layout_height="match_parent"
                    app:tabGravity="fill"
                    app:tabIndicatorHeight="4dp"
                    app:tabIndicator="@drawable/layer_tab_indicator"
                    app:tabIndicatorColor="@color/rocket_backgroud"
                    app:tabMode="scrollable"
                    app:tabSelectedTextColor="@color/rocket_backgroud"
                    app:tabTextColor="@color/t9" />

 

 

 

 

问题3解决办法：

自定义选项卡内容

关键代码如下

tab_vedio_item_view.xml文件

    var viewPager: ViewPager? = null
    var tabLayout: TabLayout? = null
    var isShow = false
    var fragmentSize = 0
    var vedioTitleTabs = ArrayList()
    //切换
    var fragment: Fragment? = null
    constructor() {}

    var gameView: View? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        gameView = LayoutInflater.from(getContext()).inflate(R.layout.fragment_recommend_vedio, null)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        vedioTitleTabs = getTitleTabs()
        fragmentSize = vedioTitleTabs.size
        LogUtil.i(TAG,"vedioTitleTabs is: ${vedioTitleTabs}")
        LogUtil.i(TAG,"fragmentSize is: ${fragmentSize}")

        viewPager = gameView?.findViewById(R.id.viewpagerContentView) as ViewPager
        tabLayout = gameView?.findViewById(R.id.vedioTabLayout) as TabLayout
        viewPager?.adapter = MyAdapter(fragmentManager)
        //将TabLayout与ViewPager绑定
        tabLayout!!.setupWithViewPager(viewPager)

        for (i in vedioTitleTabs.indices) {
            tabLayout?.getTabAt(i)?.setCustomView(getTabView(vedioTitleTabs[i]))
        }
        if (fragmentSize > 0) {
            changeTabSelect(tabLayout?.getTabAt(0)!!)
        }
        tabLayoutListener()
        return gameView
    }

    fun getTitleTabs():ArrayList {
        var recommendVedioModel = SPHelper.getInstance().getObject(SpConstants.RECOMMEND_VEDIO_CATETGORY, RecommendVedioModel().javaClass)
        LogUtil.i(TAG,"recommendVedioModel为${recommendVedioModel?.items?.toString()}")
        var titleTabs = ArrayList()
        if (recommendVedioModel == null || recommendVedioModel.items == null || recommendVedioModel.items.size == 0) {
            return titleTabs
        }
        recommendVedioModel.items.forEach {
            titleTabs.add(it.name)
        }
        return titleTabs;
    }

    private fun tabLayoutListener() { //TabLayout切换时导航栏图片处理
        tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) { //选中图片操作
                Log.i(TAG, "onTabSelected start")
                changeTabSelect(tab)
            }

            override fun onTabUnselected(tab: TabLayout.Tab) { //未选中图片操作
                Log.i(TAG, "onTabUnselected start");
                changeTabNormal(tab)
            }

            override fun onTabReselected(tab: TabLayout.Tab) {
                Log.i(TAG, "onTabReselected start")
            }
        })
    }

    // Tab自定义view
    fun getTabView(title: String?): View? {
        val v: View =
            LayoutInflater.from(activity).inflate(R.layout.tab_vedio_item_view, null)
        val textView: TextView = v.findViewById(R.id.textview) as TextView
        textView.setText(title)
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,18f);
        return v
    }

    private fun changeTabSelect(tab: TabLayout.Tab) {
        val view = tab.customView
        (view?.findViewById(R.id.textview))?.let {
            val txt_title = it as TextView
            txt_title.setTextSize(TypedValue.COMPLEX_UNIT_SP,20f);
            txt_title?.paint.isFakeBoldText = true
        }
    }

    private fun changeTabNormal(tab: TabLayout.Tab) {
        val view = tab.customView
        (view?.findViewById(R.id.textview))?.let {
            val txt_title = it as TextView
            txt_title.setTextSize(TypedValue.COMPLEX_UNIT_SP,18f);
            txt_title?.paint.isFakeBoldText = false
        }
    }

    inner class MyAdapter(fm: FragmentManager?) : FragmentPagerAdapter(fm!!) {
        override fun getCount(): Int {
            return fragmentSize
        }
        override fun getItem(position: Int): Fragment {
            Log.i(TAG, "getItem position is:" + position)
            return GameFragment()
        }
        override fun getPageTitle(position: Int): CharSequence? {
            Log.i(TAG, "getPageTitle position is:" + position)
            return ""
        }
    }

 

 

 

 

 

3 效果如下

滑动起来刷刷的