ViewPager+TabLayout的两种使用方式

1.什么是TabLayout

在源码中给出了TabLayout的定义：

TabLayout provides a horizontal layout to display tabs.

意思很明显：TabLayout提供了一个水平的布局用来展示Tabs。

Fragment适配器区别:

1.FragmentStatePagerAdapter
继承子 pager。该 PagerAdapter 的实现将只保留当前页面，当页面不在当前显示的时候，页面会清理，释放其资源。而在页面需要显示时，生成新的页面，重新生成数据。这么实现的好处就是当拥有大量的页面时，不必在内存中占用大量的内存。

2.FragmentPagerAdapter

同样继承于pagerAdapter,但是该适配器在页面不显示（比如滑到其他页面），他只会把当前view视图移除，但是保留了内部的数据。

(本文使用了第二种适配器)

那么来看一下两种方式的实现效果：

          

从实现效果上面来看好像是一样但是两者之间还是有区别的

这个可以看一下大神的解释：https://blog.csdn.net/zhangphil/article/details/48934039

我来列举下两种实现ViewPager+TabLayout实现方法。

第一种：

xml主界面

准备三个tabview_main(tab标签）

然后准备三个Fragment，Tab1,Tab2,Tab3(这个命名有点随意了)

adapter代码

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * Created by Administrator on 2018/6/16.
 */

public class TabFragmentAdapter extends FragmentPagerAdapter {
    private String [] mTitles;
    public TabFragmentAdapter(FragmentManager fm,String [] mTitles) {
        super(fm);
     this.mTitles=mTitles;
    }

    @Override
    public Fragment getItem(int position) {
        if (position==0){
            return  new Tab1();
        }else if (position==1){
            return new Tab2();
        }else if (position==2){
            return new Tab3();
        }
        return new Tab1();
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }
   /* public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }*/
}

MainActivity

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
    public TabLayout t1;
    public ViewPager vp;
    private TabFragmentAdapter adapter;
    private TextView tabText1;
    private TextView tabText2;
    private TextView tabText3;
    String [] titles={"商品","详情","评论"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        t1= (TabLayout) findViewById(R.id.tl);
        vp= (ViewPager) findViewById(R.id.vp);
        //初始化ViewPager
        initViewPager();
        //初始化TabLayout
        initTabLayout();
    }



    public void initViewPager() {
      adapter=new TabFragmentAdapter(getSupportFragmentManager(),titles);
        vp.setAdapter(adapter);
        //ViewPager点击事件
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //选中ViewPager与TabLayout联动
                t1.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
    public void initTabLayout(){
          t1.setTabMode(TabLayout.MODE_SCROLLABLE);//模式，可滑动，默认是不可滑动
          t1.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.holo_blue_dark));//指示器颜色
          t1.setSelectedTabIndicatorHeight((int) getResources().getDimension(R.dimen.indicatorHeight));//指示器高度
          t1.addTab(t1.newTab().setCustomView(R.layout.tabview_main));  //这一段是可以改写简单点.可以借鉴第二种方式自定义标签布局
          tabText1= (TextView) findViewById(R.id.tv_title1);
          tabText1.setText("商品");
          t1.addTab(t1.newTab().setCustomView(R.layout.tabview_main2));
          tabText2= (TextView) findViewById(R.id.tv_title2);
          tabText2.setText("详情");
         t1.addTab(t1.newTab().setCustomView(R.layout.tabview_main3));
         tabText3= (TextView) findViewById(R.id.tv_title3);
         tabText3.setText("评论");
        //TabLayout点击事件
        t1.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //选中tab
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中tab时,TabLayout与ViewPager联动
                vp.setCurrentItem(tab.getPosition());
                switch (tab.getPosition()){
                    case 0:
                     tabText1.setTextColor(getResources().getColor(R.color.colorAccent));
                    break;
                    case 1:
                        tabText2.setTextColor(getResources().getColor(R.color.colorAccent));
                    break;
                    case 2:
                        tabText3.setTextColor(getResources().getColor(R.color.colorAccent));
                    break;
                }
            }
             //未选择tab
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }
            //重复选中tab
            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

对应第一张图片

 

第二种实现方式

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.administrator.mymusic.FragmentTab.Fragment1;
import com.example.administrator.mymusic.FragmentTab.Fragment2;
import com.example.administrator.mymusic.FragmentTab.Fragment3;
import com.example.administrator.mymusic.FragmentTab.Fragment4;
import com.example.administrator.mymusic.FragmentTab.Fragment5;
import com.example.administrator.mymusic.FragmentTab.Fragment6;

import java.util.ArrayList;
import java.util.List;


/**
 * A simple {@link Fragment} subclass.
 */
public class OnlieFragment extends Fragment {
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private Fragment4 fragment4;
    private Fragment5 fragment5;
    private Fragment6 fragment6;
    private TabLayout tl;
    private ViewPager vp;

    //当标签数目小于等于4个时，标签栏不可滑动
    public static final int MOVABLE_COUNT = 4;

    private int tabCount = 6;
    private List tabs;
    String [] titles={"s1","s2","s3","s4","s5","s6"};
    private List fragments;
    public OnlieFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_onlie, container, false);
    }
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        tl = view.findViewById(R.id.tl);
        vp =view.findViewById(R.id.vp);

        initDatas();
        initViewPager();
        initTabLayout();
    }
    private void initTabLayout() {
        //MODE_FIXED标签栏不可滑动，各个标签会平分屏幕的宽度
        tl.setTabMode(tabCount <= MOVABLE_COUNT ? TabLayout.MODE_FIXED : TabLayout.MODE_SCROLLABLE);
        //指示条的颜色
        tl.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.holo_blue_dark));
        tl.setSelectedTabIndicatorHeight((int) getResources().getDimension(R.dimen.indicatorHeight));
        //关联tabLayout和ViewPager,两者的选择和滑动状态会相互影响
        tl.setupWithViewPager(vp);
        //自定义标签布局
        for (int i = 0; i < tabs.size(); i++) {
            TabLayout.Tab tab = tl.getTabAt(i);
            TextView tv = (TextView) LayoutInflater.from(getActivity()).inflate(R.layout.tabview_main, tl, false);
            tv.setText(tabs.get(i));
            tab.setCustomView(tv);
        }
    }

    private void initViewPager() {
        vp.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager()));
    }

    private void initDatas() {
        tabs = new ArrayList<>();
        for (int i = 0; i <=5; i++) {
            tabs.add(titles[i]);
        }
           //将fragment放入arrayList集合中
        fragments = new ArrayList<>();
        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();
        fragment5=new Fragment5();
        fragment6=new Fragment6();
        fragments.add(fragment1);    //这里可以写的简单点
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);
        fragments.add(fragment5);
        fragments.add(fragment6);
       /* for (int i = 0; i < tabs.size(); i++) {
            fragments.add(TabFragment.newInstance(tabs.get(i)));
        }*/

    }

    private class MyPagerAdapter extends FragmentPagerAdapter {


        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

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

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

        /*Adapter的写法非常简单,在自定义Adapter的时候需要重写里面的getPagerTitle()方法,
        实现这个方法是为了当Tablayout与ViewPager绑定的时候能够绑定Tab标签的标题
        tab里面的文字绑定
        * */
        public CharSequence getPageTitle(int position) {
            return tabs.get(position);
        }
    }


}

 

嗯这样就实现了ViewPager+TabLayout的效果了。