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

<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/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:fillViewport="false"
        app:layout_scrollFlags="scroll"
        app:tabGravity="center"
        app:tabIndicatorColor="#057523"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#057523"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
        app:tabTextColor="#ced0d3">
    </android.support.design.widget.TabLayout>

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

FragmentPagerAdapter_TabLayout.class ViewPager所需要的adapter

public class FragmentPagerAdapter_TabLayout extends FragmentPagerAdapter {
    private ArrayList<String> list_title;
    private ArrayList<Fragment> list_fragment;
    public FragmentPagerAdapter_TabLayout(FragmentManager fm, ArrayList<String> list_title, ArrayList<Fragment> 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<String> list_title= new ArrayList<String>() {{
    add("Fragment1");
    add("Fragment2");
    add("Fragment3");
}};
private ArrayList<Fragment> list_fragment= new ArrayList<Fragment>() {{
    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();

待续，欢迎补充