Material Design ( 3 ) - TabLayou

首发于我的博客,转载请注明作者和原文链接。

TabLayout用以实现Android上常见的页面切换效果。

属性说明

• 下方滚动的下划线颜色

app:tabIndicatorColor

setSelectedTabIndicatorColor 

• tab被选中后，文字的颜色

app:tabSelectedTextColor

setTabTextColors  

• tab默认的文字颜色

app:tabTextColor

setTabTextColors  

• tab的背景

app:tabBackground

android:background 

• 排列模式，可选：[ fixed | scrollable ]

app:tabMode

setTabMode

• 对齐方式，可选：[ fill | center ]

app:tabGravity

setTabGravity

XML布局：activity_toolbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/view_pager"></android.support.v4.view.ViewPager>

</LinearLayout>

Java：TabLayoutActivity

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tablayout);

    TabFragment tfAndroid = TabFragment.newInstance("Android");
    TabFragment tfIos = TabFragment.newInstance("iOS");
    TabFragment tfWeb = TabFragment.newInstance("WEB");

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    TabFragmentPagerAdapter tabFragmentPagerAdapter =
            new TabFragmentPagerAdapter(getSupportFragmentManager());
    tabFragmentPagerAdapter.add(tfAndroid, "Android");
    tabFragmentPagerAdapter.add(tfIos, "iOS");
    tabFragmentPagerAdapter.add(tfWeb, "WEB");

    viewPager.setAdapter(tabFragmentPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
}

public static class TabFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList = new ArrayList<>(); //fragment列表
    private List<String> titleList = new ArrayList<>(); //tab名的列表

    public TabFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public void add(Fragment fragment, String title) {
        fragmentList.add(fragment);
        titleList.add(title);
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titleList.get(position);
    }
}

public static class TabFragment extends Fragment {

    private String title;

    public static TabFragment newInstance(String title) {
        TabFragment tabFragment = new TabFragment();
        Bundle args = new Bundle();
        args.putString("title", title);
        tabFragment.setArguments(args);
        return tabFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        title = getArguments().getString("title");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        TextView tv = new TextView(container.getContext());
        tv.setText(title);

        return tv;
    }
}

• 在继承FragmentPagerAdapter时，会重写getPageTitle()方法，返回当前页面的标题。

• TabLayout.setupWithViewPager()绑定ViewPager和TabLayout。

另外

大多数时候，这个应该都会跟AppBarLayout配合一起使用：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab_layout"></android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>

• android:theme="@style/AppTheme.AppBarOverlay"上一篇提过，是定义在styles.xml中的。
  设置之后，背景颜色就会变成styles.xml中的colorPrimary颜色，字体颜色就会变成白色，非常方便。