MD学习之TabLayout+ViewPager

d.png

想必如上图的旧版本首页的这种效果应该是很常见了吧，这种需求几乎涵盖了每一个app应用。
那么这种效果要怎么实现呢？

TabWidget
FragmentTabHost
TabLayout
Bottom navigation

这里我们选择第四种的TabLayout来作实现

一.添加依赖

    compile "com.android.support:design:25.0.0"

Tip: 使用TabLayout的时候，对应的activity使用android:theme="@style/Theme.AppCompat"或者直接继承AppcompatActivity

二.相关代码

activity_test_tab_layout.xml

FragmentPagerAdapter_TabLayout.class ViewPager所需要的adapter

public class FragmentPagerAdapter_TabLayout extends FragmentPagerAdapter {
    private ArrayList list_title;
    private ArrayList list_fragment;
    public FragmentPagerAdapter_TabLayout(FragmentManager fm, ArrayList list_title, ArrayList list_fragment) {
        super(fm);
        this.list_title= list_title;
        this.list_fragment= list_fragment;
    }
    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return list_fragment.get(position);
    }    
    @Override
    public int getCount() {
        return list_fragment.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return list_title.get(position);
    }
}

TestTabLayoutActivity.class部分代码对应的Activity（继承AppcompatActivity或者设置appcompat主题）

TabLayout mTabLayout;
ViewPager mViewPager;
FragmentPagerAdapter_TabLayout mFragmentPagerAdapter_tabLayout;
private ArrayList list_title= new ArrayList() {{
    add("Fragment1");
    add("Fragment2");
    add("Fragment3");
}};
private ArrayList list_fragment= new ArrayList() {{
    add(new Fragment1());
    add(new Fragment2());
    add(new Fragment3());
}};

mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mFragmentPagerAdapter_tabLayout = new FragmentPagerAdapter_TabLayout(getSupportFragmentManager(), list_title, list_fragment);
mViewPager.setAdapter(mFragmentPagerAdapter_tabLayout);
mTabLayout.setupWithViewPager(mViewPager);

对应的若干个Fragment自行补上。

三.TabLayout相关属性

属性	说明
app:tabTextColor	字体颜色
app:tabSelectedTextColor	选中时字体颜色
app:tabTextAppearance	字体属性，此处可以通过style设置字体大小
app:tabBackground	tab背景颜色
app:layout_scrollFlags	[详细说明]: http://www.jianshu.com/p/7caa5f4f49bd
app:tabMaxWidth	tab最大宽度
app:tabMinWidth	tab最小宽度
app:tabPadding	tab内边距
app:tabIndicatorColor	tab指示器颜色
app:tabIndicatorHeight	tab指示器高度
app:tabMode	模式有fixed(默认)和scrollable
app:tabGravity	模式有fill(默认)和center

Tips

当不需要指示器的时候设置app:tabIndicatorHeight="0dp"
当选项卡很少需要置于中心时，就需要设置app:tabGravity="center",此时的app:tabMode只能为fixed
动态设置TabLayout选中页mTabLayout.getTabAt(page).select();