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

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.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的时候调用：

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.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中自己处理。