ViewPager结合Fragment、tabLayout实现可滑动标签页

GIF.gif

参考:
ViewPager 全面剖析及使用详解，作者:西瓜太郎123
使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换,作者: liuyvhao

---

一、ViewPager简介

1.用于左右切换
2.ViewPager类直接继承了ViewGroup类，是一个容器类，可以添加其他的view类
3.适配器：PagerAdapter
4.与fragment结合使用：适配器：FragmentPagerAdapter和FragmentStatePagerAdapter

---

二、ViewPager适配器

1.实现一个最基本的PagerAdapter 必须实现四个方法

public class AdapterViewpager extends PagerAdapter {
    private List mViewList;

    public AdapterViewpager(List mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public int getCount() {//必须实现
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {//必须实现
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {//必须实现，实例化
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {//必须实现，销毁
        container.removeView(mViewList.get(position));
    }
}

2.实现一个基本的FragmentPagerAdapter，同样

public class AdapterFragment extends FragmentPagerAdapter {
    private List mFragments;

    public AdapterFragment(FragmentManager fm, List mFragments) {
        super(fm);
        this.mFragments = mFragments;
    }

    @Override
    public Fragment getItem(int position) {//必须实现
        return mFragments.get(position);
    }

    @Override
    public int getCount() {//必须实现
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {//选择性实现
        return mFragments.get(position).getClass().getSimpleName();
    }
}

3.三种适配器的区别和场景

PagerAdapter是基类适配器是一个通用的ViewPager适配器,用处应该不大
结合Fragment使用：
FragmentPagerAdapter适用于页面比较少的情况
FragmentStatePagerAdapter适用于页面比较多的情况

---

三、ViewPager结合FragmentPagerAdapter、tabLayout实现可滑动标签页(文首的gif)

首先是布局文件acticity_main.xml

*tabIndicatorColor属性为标签底部下滑线颜色
tabTextColor为标签未选中时字体颜色
tabSelectedTextColor为选中时字体颜色
之后需要自定义一个FragmentPagerAdapter

public class AdapterFragment extends FragmentPagerAdapter {
    private List fragments;
    private String[] titles;

    public AdapterFragment(FragmentManager fm,String[] titles,List fragments) {
        super(fm);
        this.titles=titles;
        this.fragments=fragments;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

创建4个默认的fragment，只修改了布局文件的背景色，代码不贴了
最后是MainActivity

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private AdapterFragment viewPagerAdapter;
//TabLayout标签
    private String[] titles=new String[]{"one","two","three","four"};
    private List fragments=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init(){
        tabLayout=(TabLayout)findViewById(R.id.tab_layout);
        viewPager=(ViewPager)findViewById(R.id.view_pager);
//Tablayout标签的显示方式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
//循环注入标签
        for (String tab:titles){
            tabLayout.addTab(tabLayout.newTab().setText(tab));
        }
        tabLayout.addOnTabSelectedListener(this);

        fragments.add(new oneFragment());
        fragments.add(new twoFragment());
        fragments.add(new threeFragment());
        fragments.add(new fourFragment());
        viewPagerAdapter=new AdapterFragment(getSupportFragmentManager(),titles,fragments);
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

}