利用Toolbar和SlidingTabLayout实现Tab

利用Toolbar和SlidingTabLayout实现Tab

@(Blog)[马克飞象|Markdown|Android]

首先你必须清楚Toolbar、ViewPaper的使用，之前选择直接看网上Toolbar下增加Tab的Blog，看起来好像很难的样子，于是乎，便把这几个分开看了，再回来实现这个功能的时候，发现其实很简单。
利用Toolbar替换ActionBar
ViewPager 用法

实现Tab功能我们需要使用到Google已经实现好了的一个Tab布局(SlidingTabLayout)，这并不是在support包里的控件，而是在Sample中一个实现类。

布局

已经了解Toolbar和ViewPager的同学应该会发现这只需要在Toolbar下加入SlidingTabLayout就行了

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#B6B6B6">
    <com.example.focus.androidnote.toolbar.SlidingTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

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

代码

mTabLayout = (SlidingTabLayout) findViewById(R.id.tab_layout);
mPage = (ViewPager) findViewById(R.id.pager);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
//替换ActionBar
setSupportActionBar(mToolbar);
//getSupportActionBar().setHomeButtonEnabled(true);
//getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//关联menu布局文件
//mToolbar.inflateMenu(R.menu.menu_main);
//mToolbar.setTitle("Title");
//设置导航按钮
mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);

mListFragment = new ArrayList<>();
for (int i = 0; i < 3; i++) {
    mListFragment.add(TextFragment.newInstance("Fragment" + i));
}

PagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());
mPage.setAdapter(adapter);

mTabLayout.setViewPager(mPage);

关键是最后一句mTabLayout.setViewPager(mPage);，在这之前的代码都是为了实现Toolbar和ViewPager的代码

提示
Android M里引入一个新的包compile 'com.android.support:design:22.2.0'里面添加了很多新的控件，包括TabLayout，目前还没试过，在此做下记录。
Android M新控件之FloatingActionButton，TextInputLayout，Snackbar，TabLayout的使用