TabLayout使用

1. 效果图：

 2. layout_activity.xml

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/dip_15"
        android:layout_marginTop="@dimen/dip_20"
        android:background="@drawable/bg_white_radius_10"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ll_top"
        app:tabBackground="@drawable/tab_item_live_indicator_seletor"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="0dp"
        app:tabRippleColor="@android:color/transparent"
        app:tabSelectedTextColor="@color/color_FF843D"
        app:tabTextColor="@color/cube_mints_333333">
    </android.support.design.widget.TabLayout>

选择器 res/drawable/tab_item_live_indicator_seletor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/transparent" android:state_selected="false"/>
    <item android:drawable="@drawable/tab_item_live_indicator_layer_list" android:state_selected="true" />
</selector>

资源文件 tab_item_live_indicator_layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 整个背景色-->
    <item>
        <shape>
            <corners android:radius="@dimen/dip_10" />
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item
        android:width="30dp"
        android:height="3dp"
        android:gravity="bottom|center_horizontal">
        <shape>
            <corners android:radius="@dimen/dip_5" />
            <gradient
                android:endColor="@color/color_FF843D"
                android:startColor="@color/color_FF150A" />
        </shape>
    </item>
</layer-list>

自定义item的布局tab_item_live.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_tab_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:lines="1"
    android:textColor="@color/white"
    android:textSize="@dimen/sp_14"></TextView>

activity.java

   @BindView(R.id.tablayout)
    TabLayout tablayout;

private void initTab(){
        String[] str = {"预告", "回放"};
        List<String> titles = Arrays.asList(str);
        for(String s : titles){
            TabLayout.Tab tab = tablayout.newTab();
            tab.setCustomView(R.layout.tab_item_live);
            if (tab.getCustomView() != null) {
                TextView tab_text = tab.getCustomView().findViewById(R.id.tv_tab_item);
                tab_text.setTextColor(getResources().getColor(R.color.cube_mints_333333));
                tab_text.setText(s);
            }
            tablayout.addTab(tab);
        }
        //设置分割线
        LinearLayout linearLayout = (LinearLayout) tablayout.getChildAt(0);
        linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        linearLayout.setDividerDrawable(getResources().getDrawable(R.color.color_B3B3B3));
        //可以调整分割线高度
        linearLayout.setDividerPadding(20);
        //设置监听
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tab != null && tab.getCustomView() != null) {
                    TextView textView = tab.getCustomView().findViewById(R.id.tv_tab_item);
                    //设置粗体
                    textView.setTypeface(Typeface.DEFAULT_BOLD);
                    //设置渐变色
                    setTextViewStyles(textView);
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if(tab != null && tab.getCustomView() != null) {
                    TextView textView = tab.getCustomView().findViewById(R.id.tv_tab_item);
                    textView.setTextColor(getResources().getColor(R.color.cube_mints_333333));
                    //取消粗体
                    textView.setTypeface(Typeface.DEFAULT);
                    //取消渐变色
                    textView.getPaint().setShader(null);
                    textView.invalidate();
                }
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        tablayout.getTabAt(1).select();
    }

    /**
     * 设置渐变色
     * @param textView
     */
    private void setTextViewStyles(TextView textView) {
        int[] colors = {getResources().getColor(R.color.color_FF150A), getResources().getColor(R.color.color_FF843D)};//颜色的数组
        float[] position = {0f, 1.0f};//颜色渐变位置的数组
        LinearGradient mLinearGradient = new LinearGradient(0, 0, textView.getPaint().getTextSize() * textView.getText().length(), 0, colors, position, Shader.TileMode.CLAMP);
        textView.getPaint().setShader(mLinearGradient);
        textView.invalidate();
    }

参考于：https://blog.csdn.net/qq_26413249/article/details/54093288

               https://www.jianshu.com/p/fde38f367019

               https://blog.csdn.net/ezconn/article/details/96122825