使用TabLayout實現底部Tab布局

但是像微信這種底部Tab布局在我們實際項目中還是非常常見的設計，

現在我們也可以用TabLayout非常方便的實現。

布局

下面我們開始實現底部Tab，layout布局比較簡單，我們只用把TabLayout放置在底部即可

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbar"
        android:orientation="vertical">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:scrollbars="none" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


</LinearLayout></pre>

我定義了一個自定義的style,把tabIndicatorHeight設為0dp 

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <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/tab_bgcolor</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>


代碼實現 

我們首先設置好ViewPager，然后設置TabLayout與ViewPager的對應關系，最后最關鍵的是使用TabLayout的setCustomView設置自定義的TAB View。 

viewPager = (ViewPager)findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);

SampleFragmentPagerAdapter pagerAdapter =
        new SampleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if (tab != null) {
        tab.setCustomView(pagerAdapter.getTabView(i));
    }
}
viewPager.setCurrentItem(1);</pre>

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(tabTitles[position]);
            ImageView img = (ImageView) v.findViewById(R.id.imageView);
            //img.setImageResource(imageResId[position]);
            return v;
        }


代碼例子： BottomTabActivity.java