通过TabLayout和ViewPager实现Tab切换

浅浅的花香味﹌ 2022-05-27 11:57 207阅读 0赞

## 一、效果图 ##

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

![20180418115851458][]

## 二、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

[20180418115851458]: /images/20220527/c7efc232b93b4b1f9ac660a0c8db677e.png