Android TabLayout 浅显总结

环境搭建

1.Android?design支持包和Android?v4?支持包。

2.在build.gradle中添加

dependencies {    compile files('libs/android-support-v4.jar')    compile 'com.android.support:design:23.1.0'}

3.如果TabLayout的Title想自己定义Layout则需根据需求自己添加Layout文件。

示例代码（如何使用）

布局文件：activity_sxp_tablayout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/tb_transitions"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:popupTheme="@style/AppTheme.PopupOverlay" />    </android.support.design.widget.AppBarLayout>    <android.support.design.widget.TabLayout        android:id="@+id/sliding_tabs"        style="@style/CustomTabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="fixed" />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0px"        android:layout_weight="1"        android:background="@android:color/white" /></LinearLayout>

TabLayout?Title?样式

<style name="CustomTabLayout" parent="Widget.Design.TabLayout">    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->    <item name="tabIndicatorColor">@color/tab_indicator_color</item>    <item name="tabIndicatorHeight">10dp</item>    <item name="tabPaddingStart">12dp</item>    <item name="tabPaddingEnd">12dp</item>    <item name="tabBackground">@color/colorPrimary</item>    <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>    <item name="tabSelectedTextColor">@color/tab_indicator_color</item></style><style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">    <item name="android:textSize">20sp</item>    <item name="android:textColor">@color/white</item>    <item name="textAllCaps">false</item></style>

1.tabMaxWidth：tab?item的最大宽度，当app:tabMode="fixed"时不起作用，当app:tabMode="fixed"时才起作用。其中：

2.tabIndicatorColor：TabLayout指示器的颜色

3.tabIndicatorHeight：TabLayout指示器高度

4.tabPaddingStart：距离开始的长度

5.tabPaddingEnd：距离结束的长度

6.tabBackground：背景

7.tabTextAppearance：TabLayout?title字体属性

8.tabSelectedTextColor：当前选择的tab的字体颜色

9.textAllCaps：TabLayout创建的Tab默认的是true，如果设置图标的话要设置成false。

初始化TabLayout和ViewPager

//初始化ViewPagerviewPager = (ViewPager) findViewById(R.id.viewpager);// 设置适配器pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);viewPager.setAdapter(pagerAdapter);// 初始化TabLayouttabLayout = (TabLayout) findViewById(R.id.sliding_tabs);// 为TabLayout设置ViewPagertabLayout.setupWithViewPager(viewPager);

ViewPager适配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {    private Context context;    // TabLayout title    private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"};    // TabLayout 图标    private int[] imageResId = {R.mipmap.icon_tab,            R.mipmap.icon_tab,            R.mipmap.icon_tab};    public SimpleFragmentPagerAdapter(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 tabTitles.length;    }    @Override    public CharSequence getPageTitle(int position) {        // 返回纯文字        // return tabTitles[position];        // 返回ICON和文字        Drawable image = context.getResources().getDrawable(imageResId[position]);        image.setBounds(0, 0, image.getIntrinsicWidth() * 2, image.getIntrinsicHeight() * 2);        SpannableString sb = new SpannableString(tabTitles[position]);        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);        return sb;    }    /**     * 自定义TabLayout title     * @param position     * @return     */    public View getTabView(int position){        View view = LayoutInflater.from(context).inflate(R.layout.view_sxp_tab_title, null);        TextView tv= (TextView) view.findViewById(R.id.textView);        tv.setText(tabTitles[position]);        ImageView img = (ImageView) view.findViewById(R.id.imageView);        img.setImageResource(imageResId[position]);        return view;    }}

其中getTagView()方法是自己定义的方法，作用是自定义TabLayout?Title，需要在初始化TabLayout的时候调用：

//初始化ViewPagerviewPager = (ViewPager) findViewById(R.id.viewpager);// 设置适配器pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);viewPager.setAdapter(pagerAdapter);// 初始化TabLayouttabLayout = (TabLayout) findViewById(R.id.sliding_tabs);// 为TabLayout设置ViewPagertabLayout.setupWithViewPager(viewPager);for (int i = 0; i < tabLayout.getTabCount(); i++) {    TabLayout.Tab tab = tabLayout.getTabAt(i);    tab.setCustomView(pagerAdapter.getTabView(i));}

常见问题

1.自定义TabLayout?Title时需要自己在ViewPager的OnPageChangeListener中自己处理。