TabLayout的使用

TabLayout的使用

简介：TabLayout是Android Design库提供的控件。TabLayout提供一个横向布局用来显示标签。如果在Layout中与 android.support.v4.view.ViewPager 联用，可以使用setupWithViewPager(ViewPager)将两者关联起来，实现根据标签自动从PagerAdapter中填充layout。

效果：

一、导包

compile 'com.android.support:design:25.3.1'

使用TabLayout必须使用Theme.AppCompat系列主题，否则：

还需要导入appcompat-v7包。

compile 'com.android.support:appcompat-v7:25.3.1'

然后更换主题样式。

二、xml中添加

<?xml version="1.0" encoding="utf-8"?>
<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.TabLayout
        android:id="@+id/tl_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#ff4400"
        app:tabIndicatorHeight="1dp"
        app:tabSelectedTextColor="#ff4400"
        app:tabTextColor="#000000"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/tl_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

TabLayout属性说明：

• app:tabIndicatorColor：设置指示器下标颜色。
• app:tabIndicatorHeight：设置指示器下标高度。
• app:tabTextColor：设置标签默认字体颜色。
• app:tabSelectedTextColor：设置标签选中字体颜色。
• app:tabMode：设置标签显示模式。fixed模式：不可滑动。scrollable模式：标签设置为默认大小，标签数量多时，Tab区域可滑动。默认为fixed模式。
• app:theme:设置主题。
• app:tabBackground：设置Tab区域的背景。
• app:tabGravity：设置标签的内容显示模式。center模式：所有标签居中显示。fill模式：所有标签充满Tab区域。默认为fill模式。
• app:tabMinWidth：设置标签的最小宽度。
• app:tabMaxWidth：设置标签的最大宽度。
• app:tabTextAppearance：设置标签字体样式。
• app:paddingStart：设置Tab区域的padding。
• app:paddingEnd：设置Tab区域的padding。
• app:tabPadding：设置标签的padding。
• app:tabPaddingTop：设置标签的paddingTop。
• app:tabPaddingBottom：设置标签的paddingBottom。
• app:tabPaddingStart：设置标签的paddingLeft。
• app:tabPaddingEnd：设置标签的paddingRight。
• app:tabContentStart：设置标签开始位置偏移量。

三、代码中使用

3.1 声明控件并初始化

@BindView(R.id.tl_tabLayout)
TabLayout mTabLayout;
@BindView(R.id.tl_viewPager)
ViewPager mViewPager;

private List<Fragment> mFViews = new ArrayList<>();
private String [] mFTabs = new String[]{"第一页","第二页","第三页"};
private FragmentPagerAdapter mfpAdapter;

    //onCreate()
    mFViews.add(new OneFragment());
    mFViews.add(new TwoFragment());
    mFViews.add(new ThreeFragment());

3.2 设置Adapter并建立关联

方式一：手动重写Adapter里的getPageTitle()方法

mfpAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

        @Override
        public Fragment getItem(int position) {
            return mFViews.get(position);
        }

        @Override
        public int getCount() {
            return mFViews.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFTabs[position];
        }
    };


    mViewPager.setAdapter(mfpAdapter);

    //关联TabLayout和ViewPager
    mTabLayout.setupWithViewPager(mViewPager);

方式二： 关联后再设置标签内容

    mfpAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return mFViews.get(position);
        }

        @Override
        public int getCount() {
            return mFViews.size();
        }
    };

mViewPager.setAdapter(mfpAdapter);

//关联TabLayout和ViewPager
mTabLayout.setupWithViewPager(mViewPager);

//设置标签text
for(int i = 0 ;i<mFViews.size();i++){
        mTabLayout.getTabAt(i) .setText(mFTabs[i]);
    }

注意：要先【关联TabLayout和ViewPager】，再【设置标签text】。因为执行setupWithViewPager()方法时，会调用populateFromPagerAdapter()方法。

不执行【设置标签text】会出现标签丢失，界面不显示标签，例如：

四、 TabLayout设置分割线

效果：

4.1 创建分隔线资源文件

文件位置：//drawable/tablayout_divider.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/theme_background_deep"/>
    <size android:width="2dp"/>

</shape>

4.2 代码中使用

LinearLayout linearLayout = (LinearLayout) mTabLayout.getChildAt(0);
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,R.drawable.tablayout_divider));

五、TabLayout添加角标

效果：

5.1 自定义Tab布局

文件位置：//layout/tab_title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="14dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textSize="16sp"/>

</RelativeLayout>

5.2 代码中使用

自定义方法：

private void setUpTabBadge(int position) {
    TabLayout.Tab tab = mTabLayout.getTabAt(position);//拿到对应位置的tab
    if (tab != null) {
        View view = LayoutInflater.from(this).inflate(R.layout.tab_title_layout, null);//填充一个布局拿到View的引用
        ((TextView) view.findViewById(R.id.tv_title)).setText(mFTabs[position]);//设置标题
        tab.setCustomView(view);//tab设置自定义view

        Badge badgeView = new QBadgeView(this).bindTarget(view.findViewById(R.id.tv_title));//将Badge与view绑定
        badgeView.setBadgeGravity(Gravity.END | Gravity.TOP);
        badgeView.setBadgeText(position+"");
        badgeView.setBadgeTextSize(10,true);
        badgeView.setBadgePadding(2,true);

    }
}

循环调用：

for(int i = 0; i< mFTabs.length;i++){
        setUpTabBadge(i);
    }

备注：Badge是一个gitHub上的开源库，详见项目。点击此处跳转