TabLayout ViewPager快速实现滑动切换页面及对应

前言：

---

本章节要对 ViewPager 以及 PagerAdapter 有所了解，该章节部分代码沿用我的这个帖子 ：使用ViewPager与ActionBar.Tab 。TabLayout 是Android官方在 support design library 库中带来的新控件，让 Tab 不再依赖 ActionBar 来创建，也封装了 Tab 和 ViewPager 的交互代码，切换 Pages 的动画效果更加自然美观。接下来让我们来学习怎么用。

导入 Android support design library ：

---

因为 TabLayout 是在支持库里的控件，在我们应用 build.gradle 中的 dependencies{}，加入
compile 'com.android.support:design:25.0.0'，后面的 25.0.0是当前支持库的版本号，然后 点击上方提示的 sync now

添加 ViewPager 以及设置 PageAdapter ：

---

这里沿用 使用ViewPager与ActionBar.Tab 里的 MyFragment 和 MyFragmentAdapter，就不再赘述了，把 ViewPager 添加进布局，设置 ViewPager 的适配器为 MyFragmentAdapter，ViewPager 就能够使用了

public class MainActivity extends AppCompatActivity {    
    private ViewPager viewPager;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {       
          super.onCreate(savedInstanceState);        
          setContentView(R.layout.activity_main);                      
          viewPager = (ViewPager) findViewById(R.id.pager);        
          MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager());
          viewPager.setAdapter(adapter);   
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.runhuaoil.tablayouttest.MainActivity"
    android:weightSum="1">


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

    </android.support.v4.view.ViewPager>


</LinearLayout>

使用 TabLayout ：

---

添加 TabLayout 布局:

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill">

</android.support.design.widget.TabLayout>

• tabMode属性有两种取值 fixed 以及 scrollable
• tabGravity属性有两种取值 center 以及 fill
  这两个属性都和控制 Tab 在界面上显示大小，居中，可伸缩有关系

接下来是添加相应的 Tab ,添加 TabLayout 布局后有两种方式添加 Tab

• 通过 XML 代码添加，使用 TabItem 标签，例如(这里添加了两个 Tab)：

• 另一种是用 JAVA 代码添加：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout_id);
 tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
 tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

注意：如果设置 TabItem 后与 ViewPager 关联，这些设置的 TabItem 将全部被移除，取而代之的是 MyFragmentAdapter 提供的 Tab 标签内容 ，一般使用 MyFragmentAdapter 提供的Tab内容可不必设置 TabItem.

TabLayout 与 ViewPager建立关联：

---

TabLayout 与 ViewPager 建立关联的方式有两种：

• 通过 tabLayout.setupWithViewPager() 方法

• 第二种是把 TabLayout 放进 ViewPager 控件中，相当于把两者绑定，系统会自动回调 setupWithViewPager() 方法

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill">

        </android.support.design.widget.TabLayout>

    </android.support.v4.view.ViewPager>

设置后 TabLayout 将自动检索 ViewPager 设置适配器里的 getCount() 数量来新建 Tab 个数，getPageTitle()方法设置 Tab 的 text 属性，且把 Tab 的点击事件与ViewPager的 Item建立关联，这比起 ActionBar.Tab里方便得多，因为 TabLayout 把这一切都封装好了。

总结：

---

TabLayout 的简单使用就介绍结束了，如果对你有帮助，请点击 喜欢 按钮。
Demo地址：https://github.com/RunHuaOil/AndroidPractice/tree/master/TabLayoutTest