利用 TabLayout 和 ToolBar 实现滑动标签页

最近在实现便签滑动页的时候突然发现 ActionBar 已经不被官方推荐使用，比较好的一个方法就是利用 ToolBar 和 TabLayout 来实现，以下是实现步骤：

• TalLayout 是 Android Support Design 中的一个控件，在使用之前需要在 build.gradle 文件中添加compile'com.android.support:design:23.2.0' 才能够正常使用。

• 对 values 中的 style 文件进行设置以屏蔽 Activity 的 ActionBar，让主题继承于 NoActionBar，如果需要改变 Acitivity 的背景颜色设置 windowBackground 即可：

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="colorPrimary">@color/material_blue_grey_800</item>
      <!--Status bar color-->
      <item name="colorPrimaryDark">@color/accent_material_light</item>
      <!--Window color-->
      <item name="colorAccent">@color/colorAccent</item>
  </style>

• 由于需要实现标签页的滑动效果所以需要用到 ViewPager ，加上 TabLayout 和 TooBar 基本的布局如下：

  <android.support.v7.widget.Toolbar
      android:id="@+id/topToolBar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:paddingTop="@dimen/bar_top_padding"></android.support.v7.widget.Toolbar>
  
  <android.support.design.widget.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/topToolBar"
      app:tabSelectedTextColor="#3da6a2"
      app:tabTextColor="#817f7f"></android.support.design.widget.TabLayout>
  
  <android.support.v4.view.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@id/tabLayout"></android.support.v4.view.ViewPager>

  其中 TabLayout 中tabSelectedTextColor 用于设置选中Tab的字体颜色，tabTextColor 用于设置未选中的Tab字体的颜色，Toolbar 中设置 paddingTop 主要用于4.4中沉浸式状态栏的适配，防止 ToolBar 和状态栏重合。

• 之后是为 ToolBar 设置各种属性创建 FramePagerAdapter，对 ViewPager 和 TabLayout 设置监听事件：

  public class Bar_Activity extends AppCompatActivity {
      Toolbar topToolBar;
      TabLayout tabLayout;
      ViewPager viewPager;
      FragmentPagerAdapter pagerAdapter;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_bar_);
  
          init();
          topToolBar.setTitle("BarDemo");
          setSupportActionBar(topToolBar);
          /*设置状态栏为透明*/
          WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
          layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
          getSupportActionBar().setDisplayHomeAsUpEnabled(false);
          //遍历FragmentPagerAdapter为TabLayout添加Tab
          for (int i = 0; i < pagerAdapter.getCount(); i++) {
              tabLayout.addTab(
                      tabLayout.newTab().setText(pagerAdapter.getPageTitle(i)));
          }
          //为ViewPager设置适配器
          viewPager.setAdapter(pagerAdapter);
          //为viewPager设置监听事件，当frame改变时更改Tab
          viewPager.addOnPageChangeListener(
                  new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
          //为tabLayout设置监听事件，当选中tab的时候切换frame
          tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
              @Override
              public void onTabSelected(TabLayout.Tab tab) {
                  viewPager.setCurrentItem(tab.getPosition());
              }
  
              @Override
              public void onTabUnselected(TabLayout.Tab tab) {
  
              }
  
              @Override
              public void onTabReselected(TabLayout.Tab tab) {
  
              }
          });
          topToolBar.setNavigationIcon(R.drawable.ic_account_circle_white_24dp);
      }
  
      protected void init() {
          topToolBar = (Toolbar) findViewById(R.id.topToolBar);
          tabLayout = (TabLayout) findViewById(R.id.tabLayout);
          viewPager = (ViewPager) findViewById(R.id.viewPager);
          topToolBar.setBackgroundColor(Color.parseColor("#1aae98"));
          tabLayout.setBackgroundColor(Color.GRAY);
          //创建针对ViewPager的FragmentPagerAdapter
          pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
              @Override
              public Fragment getItem(int position) {
                  Fragment tabFragment = new TabFragment();
                  Bundle args = new Bundle();
                  args.putInt(TabFragment.FLAG_TAB, position + 1);
                  tabFragment.setArguments(args);
                  return tabFragment;
              }
  
              @Override
              public int getCount() {
                  return 3;
              }
  
              @Override
              public CharSequence getPageTitle(int position) {
                  switch (position) {
                      case 0:
                          return "tab1";
                      case 1:
                          return "tab2";
                      case 2:
                          return "tab3";
                  }
                  return null;
              }
          };
      }
  
      //设置 toolBar 右上角的菜单项
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
          getMenuInflater().inflate(R.menu.menu, menu);
          return true;
      }
  
      @Override
      public boolean onOptionsItemSelected(MenuItem item) {
          return super.onOptionsItemSelected(item);
      }
  }

• 最后看下 menu 文件

  <menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <item android:id="@+id/search_item"
          android:title="search"
          android:icon="@drawable/ic_search_white_24dp"
          app:actionViewClass="android.support.v7.widget.SearchView"
          app:showAsAction="ifRoom|collapseActionView"></item>
  </menu>

  最终实现效果如图所示：

---