TabLayout随笔

本文要实现的最终效果：可滑动的，指定样式的，均分屏幕宽度的TabLayout 

先上最终效果图：

本文主要包括的技术点如下：

一，TabLayout中的Tab间隔设置方法

二，单个tab的样式的定制

三，TabLayout有多个标签tab时，如何在标签可滑动的情况下，一屏只显示指定的tab数

下面直接上代码：

1，主界面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jrzl.rb.com.tablayout.MainActivity">

    <jrzl.rb.com.tablayout.MBTabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        app:tabBackground="@drawable/tablayout_item_selector"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabSelectedTextColor="#4a4a4a"
        app:tabTextColor="#4a4a4a"/>

</RelativeLayout>

MBTablayout继承自Tablayout，通过反射的方法实现在TabLayout有多个标签tab时，在保证标签可滑动的情况下，一屏只显示指定的tab数。

android:layout_height="35dp"   用来指定Tablayout的高度。

app:tabBackground="@drawable/tablayout_item_selector"  用来指定单个tab的样式，包括选中状态及未选中状态。

app:tabIndicatorHeight="0dp"  通过把下划线高度设置为0dp，可以去掉下划线。

app:tabMode="scrollable"  保证tab标签可以滑动。

app:tabTextAppearance="@style/TabLayoutTextStyle"   通过这个属性可以设置tab的字体大小颜色。

下面两个属性基本就见名知意了。

2，下面是MainActivity的代码

package jrzl.rb.com.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mTabLayout.addTab(mTabLayout.newTab().setText("全部"));
        mTabLayout.addTab(mTabLayout.newTab().setText("营销"));
        mTabLayout.addTab(mTabLayout.newTab().setText("客户"));
        mTabLayout.addTab(mTabLayout.newTab().setText("项目"));
        mTabLayout.addTab(mTabLayout.newTab().setText("合同"));
        mTabLayout.addTab(mTabLayout.newTab().setText("资管"));
        mTabLayout.addTab(mTabLayout.newTab().setText("运营"));
        mTabLayout.addTab(mTabLayout.newTab().setText("办公"));

        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(MainActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();

            }

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

            }

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

            }
        });

    }
}

3，自定义MBTabLayout代码

package jrzl.rb.com.tablayout;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import java.lang.reflect.Field;

/**
 * Created by cuilk on 2018/2/28.
 * 通过设置TabViewNumber的值，可以决定一屏被几个tab均分
 */
public class MBTabLayout extends TabLayout {
    private static final int TabViewNumber = 4;
    private static final String SCROLLABLE_TAB_MIN_WIDTH = "mScrollableTabMinWidth";
    public MBTabLayout(Context context) {
        super(context);
        initTabMinWidth();
    }

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

    public MBTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initTabMinWidth();
    }
    private void initTabMinWidth() {
        int screenWidth=getResources().getDisplayMetrics().widthPixels;
        int tabMinWidth = screenWidth / TabViewNumber;

        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();
        }
    }
}

参考文章：http://www.jb51.net/article/131304.htm

http://blog.csdn.net/wanglaohushiwo/article/details/72857691

最后附上完整demo链接