通过TabLayout和ViewPager实现Tab切换

一、效果图

通过TabLayout和ViewPager这两个控件可以实现Tab切换的效果。而且能通过属性设置来设定滑动条的高度和颜色、字体的颜色等。效果如图所示。

二、Android布局文件

Activity的布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical">
   <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@android:color/white"
            app:tabIndicatorColor="?attr/colorPrimary"
            app:tabIndicatorHeight="5dp"
            app:tabSelectedTextColor="?attr/colorPrimary"
            app:tabTextColor="@android:color/darker_gray"/>
    

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

</LinearLayout>

TabLayout和ViewPager控件依赖于com.android.support:design包。因此需要在gradle构建器中dependencies添加相关的依赖。如下所示：

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    //compile 'com.android.support:appcompat-v7:26.+'
    //compile 'com.android.support:design:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:26.0.0-alpha1'
}

三、准备工作

1、创建Fragment

Tab切换，实际上每一个Tab都是一个Fragment对象，Fragment对象可以实现在一个Activity里面显示多个界面，动态的删除和添加。因此，实现Tab切换，我们需要准备几个Fragment类，即显示的具体界面。注意Fragment继承的基类是v4包的Fragment！这里我只粘贴其中一个Fragment的代码，因为其他Fragment的代码都是类似的。

public class Fragment1 extends BaseFragment_SupportV4{

   private static Fragment1 FRAGMENT1;

   /**
    * 获取对象实例
    * @return
    */
   public static Fragment1 getInstance(){
      if(FRAGMENT1==null){
         FRAGMENT1=new Fragment1();
      }
      return FRAGMENT1;
   }

   @Override
   public View onCreateView(LayoutInflaterinflater, ViewGroup container,
         BundlesavedInstanceState) {
      super.onCreateView(inflater,container,savedInstanceState);
      mBaseView =inflater.inflate(R.layout.fragment1, container, false);
      initFragment();
      initView();
      return mBaseView;
   }

    @Override
    protected void initFragment() {

    }

   @Override
   protected void initView() {

   }

}

2、创建Fragment适配器

ViewPager控件需要使用一个适配器才能显示对应的数据。Fragment适配器跟ListView的适配器是类似的，其代码如下：

/**
* 对于FragmentPagerAdapter的派生类，只重写getItem(int)和getCount()就可以了。
*
* @version 1.0.0
*
* @date 2017-7-14 上午8:36:36
*
* @author chenliwu
*/
public class FragmentAdapter extends FragmentPagerAdapter{

   private List<Fragment>mFragmentList;

   private String[] mTitles;

   public FragmentAdapter(FragmentManagerfm, List<Fragment> fragmentList, String[] titles) {
      super(fm);
      mFragmentList=fragmentList;
      mTitles=titles;
   }


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

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

   @Override
   public CharSequence getPageTitle(int position) {
      //设置标题
      return mTitles[position];
   }
}

适配器里面通过一个List来记录多个Fragment，当切换Tab的时候，就会调用相应的getItem()方法来切换显示的Fragment。

3、Activity初始化

前面的一二步准备好相关资源以后，就可以在Activity中进行初始化操作了。即初始化控件、添加数据、设置适配器。代码如下：

public class MainActivity extends AppCompatActivity {

    ViewPager mViewPager;
    List<Fragment>mFragments;

    String[] mTitles = new String[]{"健康资讯", "健康问答"};

    private TabLayout mTabLayout;

    private Context mContext;

    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext=this;
        findView();
        setupViewPager();
    }

    private void findView(){
        // 第一步，初始化ViewPager和TabLayout
        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mTabLayout = (TabLayout)findViewById(R.id.tabs);
    }

    private void setupViewPager() {
        mFragments=new ArrayList<Fragment>();
        mFragments.add(Fragment1.getInstance());
        mFragments.add(Fragment2.getInstance());
        FragmentAdapterfragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),mFragments,mTitles);
        // 第二步：为ViewPager设置适配器
        mViewPager.setAdapter(fragmentAdapter);
        // 第三步：将ViewPager与TableLayout 绑定在一起
        mTabLayout.setupWithViewPager(mViewPager);
    }
}

四、下载地址

CSDN下载地址：https://download.csdn.net/download/qq_33721382/10357122