Android design支持库中的TabLayout一般都用来实现头部Tab的效果。例如：

m3.png

但是像微信这种底部Tab布局在我们实际项目中还是非常常见的设计，现在我们也可以用TabLayout非常方便的实现。

TabLayout.gif

布局

下面开始实现底部Tab，layout布局比较简单，只用把TabLayout放置在底部即可。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v4.view.ViewPager
        android:id="@+id/Tab_ViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>
    <android.support.design.widget.TabLayout
        android:id="@+id/TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyCustomTabLayout">
    </android.support.design.widget.TabLayout>
</LinearLayout>

自定义的style,把tabIndicatorHeight设为0dp。

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">0dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabBackground">@color/colorgrey</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
    </style>

代码实现

首先设置好ViewPager，然后设置TabLayout与ViewPager的对应关系，最后最关键的是使用TabLayout的setCustomView设置自定义的TAB View。

public class TabLayoutActivity extends AppCompatActivity {
    private static final String TAG = "TabLayoutActivity";
    private  ViewPager mViewPager;
    private TabLayout mTabLayout;
    private MyAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        mViewPager = (ViewPager) findViewById(R.id.Tab_ViewPager);
        mTabLayout = (TabLayout) findViewById(R.id.TabLayout);
        mAdapter = new MyAdapter(getSupportFragmentManager(),this);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);


//        mViewPager.setCurrentItem(0);

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                changeTabSelect(tab);
            }

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

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

            }
        });

        for (int i = 0;i<mTabLayout.getTabCount();i++){
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            Log.d(TAG, "onCreate: getChildCount"+mTabLayout.getChildCount());
            if (tab!=null){
                Log.d(TAG, "onCreate: tab!=null  "+i);
                tab.setCustomView(mAdapter.getTabView(i));
            }
        }
    }
    private void changeTabSelect(TabLayout.Tab tab) {
        View view = tab.getCustomView();
        ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
        TextView txt_title = (TextView) view.findViewById(R.id.textview);
        txt_title.setTextColor(Color.GREEN);
        if (txt_title.getText().toString().equals("标题一")) {
            img_title.setImageResource(R.mipmap.homepage_select);
            mViewPager.setCurrentItem(0);
        } else if (txt_title.getText().toString().equals("标题二")) {
            img_title.setImageResource(R.mipmap.startorder_select);
            mViewPager.setCurrentItem(1);
        } else {
            img_title.setImageResource(R.mipmap.shopcar_select);
            mViewPager.setCurrentItem(2);
        }
    }

    private void changeTabNormal(TabLayout.Tab tab) {
        View view = tab.getCustomView();
        ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
        TextView txt_title = (TextView) view.findViewById(R.id.textview);
        txt_title.setTextColor(Color.BLACK);
        if (txt_title.getText().toString().equals("标题一")) {
            img_title.setImageResource(R.mipmap.homepage_normal);
        } else if (txt_title.getText().toString().equals("标题二")) {
            img_title.setImageResource(R.mipmap.startorder_normal);
        } else {
            img_title.setImageResource(R.mipmap.shopcar_normal);
        }
    }
}

其中changeTabSelect(TabLayout.Tab tab)与changeTabNormal(TabLayout.Tab tab)是用来实现Tab页转换的时候图片以及文字颜色的改变。
Fragment中：

public class PageFragment extends Fragment{
    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment pageFragment = new PageFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
//        TextView textView = (TextView) view;
        TextView textView = (TextView) view.findViewById(R.id.Fragment_Page_TV);
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

在MyAdapter中：

public class MyAdapter extends FragmentPagerAdapter{
    private final int PAGE_COUNT = 3;
    private String[] tabs = new String[]{"标题一","标题二","标题三"};
    private Context context;
    private int imageResId[] = new int[]{R.mipmap.homepage_normal,R.mipmap.startorder_normal,R.mipmap.shopcar_normal};
    private int imageResPress[] = new int[]{R.mipmap.homepage_select,R.mipmap.startorder_select,R.mipmap.shopcar_select};
    public MyAdapter(FragmentManager fm,Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position+1);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return tabs[position];
    }
    public View getTabView(int position) {
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textview);
        tv.setText(tabs[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imageview);
        img.setImageResource(imageResId[position]);
        if (position == 0) {
            tv.setTextColor(Color.GREEN);
            img.setImageResource(imageResPress[position]);
        } else {
            tv.setTextColor(Color.BLACK);
            img.setImageResource(imageResId[position]);
        }
        return v;
    }
}

其中getTabView(int position)是用来初始化Tab页面的图标与文字的。

 public View getTabView(int position) {
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textview);
        tv.setText(tabs[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imageview);
        img.setImageResource(imageResId[position]);
        if (position == 0) {
            tv.setTextColor(Color.GREEN);
            img.setImageResource(imageResPress[position]);
        } else {
            tv.setTextColor(Color.BLACK);
            img.setImageResource(imageResId[position]);
        }
        return v;
    }