【Android -- UI 开发】ViewPager 的基本使用

前言

在开发中 ViewPager 肯定是不可或缺的控件，引导页、轮播图、卡片画廊等效果总是缺少不了 ViewPager 的身影。

相信每一位朋友对 ViewPager 的基础使用都已经很熟练了，今天在这里就从简至繁将 ViewPager 的每个用法都梳理一遍。

主要包括以下内容：

• ViewPager 基本使用（简介、适配器）
• ViewPager + TabLayout + Fragment 的使用
• ViewPager2 + TabLayout + Fragment 的使用

ViewPager 基本使用 简介

对于 ViewPager ，官方的描述大概是这样的：页面允许左右滑动的布局管理器，而不同页面带有不同的数据。

这里简单归结如下：

• ViewPager 是 v4 包中的一个类。
• ViewPager 类直接继承了 ViewGroup 类，它是一个容器类，可以在其中添加其他的 view 。
• 类似于 ListView，也有自己的适配器，用来填充数据页面。

常用方法

• setAdapter(PagerAdapter adapter) 设置适配器
• setOffscreenPageLimit(int limit) 设置缓存的页面个数,默认是 1
• setCurrentItem(int item) 跳转到特定的页面
• setOnPageChangeListener(..) 设置页面滑动时的监听器（现在API中建议使用 addOnPageChangeListener(..)）
• setPageTransformer(..PageTransformer) 设置页面切换时的动画效果
• setPageMargin(int marginPixels) 设置不同页面之间的间隔
• setPageMarginDrawable(..) 设置不同页面间隔之间的装饰图也就是 divide ，要想显示设置的图片，需要同时设置 setPageMargin()

PagerAdapter

PagerAdapter 是抽象的类，所以使用时只能使用它的子类，实现子类必须要实现以下四个方法:

• getCount(); 是获取当前窗体界面数，也就是数据的个数。
• isViewFromObject(View view, Object object); 这个方法用于判断是否由对象生成界面，官方建议直接返回 return view == object;。
• instantiateItem(View container, int position); 要显示的页面或需要缓存的页面，会调用这个方法进行布局的初始化。
• destroyItem(ViewGroup container, int position, Object object); 如果页面不是当前显示的页面也不是要缓存的页面，会调用这个方法，将页面销毁。

ViewPager + TabLayout + Fragment 的使用 效果图

1. 布局文件

2. 适配器

public class MyPagerAdapter extends FragmentPagerAdapter {
    private String[] mTitles = {"A","B","C"};
    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public BaseFragment getItem(int position) {
        BaseFragment fragment = SmartFragmentFactory.createFragment(position);
        return fragment;
    }

    @Override
    public int getCount() {
        return mTitles.length;
    }

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

3. SmartFragmentFactory.java

public class SmartFragmentFactory {
    private static HashMap mBaseFragments = new HashMap();
    public static BaseFragment createFragment(int position){
        BaseFragment baseFragment = mBaseFragments.get(position);

        if (baseFragment == null) {
            switch (position) {
                case 0:
                    baseFragment = new AFragment();
                    break;
                case 1:
                    baseFragment = new BFragment();
                    break;
                case 2:
                    baseFragment = new CFragment();
                    break;
            }

        }

        mBaseFragments.put(position, baseFragment);
        return baseFragment;
    }
}

4. MainActivity.java

public class MainActivity extends BaseActivity {
    @BindView(R.id.tabLayout)
    TabLayout mTabLayout;

    @BindView(R.id.viewPager)
    ViewPager mViewPager;

    private MyPagerAdapter mAdapter;

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        mAdapter = new MyPagerAdapter(getSupportFragmentManager());

        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }

}

ViewPager2 + TabLayout + Fragment 的使用 效果图

1. 布局文件

2. 适配器

public class MyPagerAdapter extends FragmentStateAdapter {
    private List fragments;

    public MyPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List fragments) {
        super(fragmentManager, lifecycle);
        this.fragments = fragments;
    }

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

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

4. MainActivity.java

public class MainActivity extends BaseActivity {
    @BindView(R.id.tabLayout)
    TabLayout mTabLayout;

    @BindView(R.id.viewPager2)
    ViewPager2 mViewPager;

    private MyPagerAdapter mAdapter;

    List titles = new ArrayList();
    List fragments=new ArrayList();

    @Override
    protected int getLayoutId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initView() {
        titles.add("A");
        titles.add("B");
        titles.add("C");

        fragments.add(new AFragment());
        fragments.add(new BFragment());
        fragments.add(new CFragment());

        mAdapter = new MyPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);

        mViewPager.setAdapter(mAdapter);

        new TabLayoutMediator(mTabLayout, mViewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                tab.setText(titles.get(position));
            }
        }).attach();

    }

}