ViewPager2和VIewPager的区别以及ViewPager2实现轮播图

---

前言

2019初Google发布了ViewPager2预览版并在同年I/O上推出正式版。只要你已经从Suppor库切换到AndroidX便可以使用ViewPager2完全取代旧的ViewPager。

ViewPager2最显著的特点是基于RecyclerView实现RecyclerView是目前Android端最成熟的AdapterView解决方案这带来诸多好处
1、抛弃传统的PagerAdapter统一了Adapter的API/
2、通过LinearLayoutManager可以实现类似抖音的纵向滑动
3、支持DiffUitl可以通过diff实现局部刷新
4、支持RTLright-to-left布局对于一些有出海需求的APP非常有用
5、支持ItemDecorator

---

一、ViewPager2和ViewPager的对比

1、ViewPager2内部实现是RecyclerView所以ViewPager2的性能更高。
2、ViewPager2可以实现竖向滑动ViewPager只能横向滑动。
3、ViewPager2只有一个adapterFragmentStateAdapter继承自RecyclerView.Adapter。
而ViewPager有两个adapter,FragmentStatePagerAdapter和FragmentPagerAdapter均是继承PagerAdapter。FragmentStatePagerAdapter和FragmentPagerAdapter两者的区别是FragmentStatePagerAdapter不可以缓存FragmentPagerAdapter可以缓存。
4、ViewPager2模式实现了懒加载默认不进行预加载。内部是通过Lifecycle 对 Fragment 的生命周期进行管理。ViewPager会进行预加载懒加载需要我们自己去实现。

	ViewPager	ViewPager2
Adapter	ViewPager	RecyclerView.Adapter
滑动监听	addPageChangeListener	registerOnPageChangeCallback
	无	从右到左 (RTL) 的布局支持
	无	垂直方向支持
	无	停用用户输入的功能setUserInputEnabled、isUserInputEnabled

二、ViewPager2的使用实现轮播图

1、实现效果

2、实现代码

a、XML布局

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
	
         <!--轮播图-->
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/homeFragment_view_banner"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="horizontal" />

        <!--下标点-->
        <LinearLayout
            android:id="@+id/homeFragment_view_dot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="5dp"/>
    </RelativeLayout>

b、适配器

适配器布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/itemBanner_iv_img"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"/>
</RelativeLayout>

适配器代码

public class BannerAdapter extends RecyclerView.Adapter<BannerAdapter.ViewHolder> {
    private Context context;
    private List<Integer> imgUrl;

    public  BannerAdapter(Context context,List<Integer> imgUrl){
        this.context = context;
        this.imgUrl = imgUrl;

    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout_banner,parent,false));
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Glide.with(context).load(imgUrl.get(position)).into(holder.iv_img);
    }

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

    class ViewHolder extends RecyclerView.ViewHolder{

        ImageView iv_img;

        public ViewHolder(View itemView) {
            super(itemView);
            iv_img = itemView.findViewById(R.id.itemBanner_iv_img);
        }
    }
}

c、完整Activity代码

使用Handler和线程实现轮播功能使用LinearLayout动态添加点。

 private ViewPager2 view_banner;
    private LinearLayout layout_dot;

    private List<Integer> imgUrl;
    private List<ImageView> dotList;

    private BannerAdapter bannerAdapter;


    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        initViews(view);
        return view;
    }
    /* 当应用被唤醒时让轮播图开始轮播 */
    @Override
    public void onResume() {
        super.onResume();
        handler.postDelayed(runnable,5000);
    }

    /* 当应用被暂停时让轮播图停止轮播 */
    @Override
    public void onPause() {
        super.onPause();
        handler.removeCallbacks(runnable);
    }

    private void initViews(View view) {
        view_banner = view.findViewById(R.id.homeFragment_view_banner);
        layout_dot= view.findViewById(R.id.homeFragment_view_dot);


        imgUrl = new ArrayList<>();
        dotList = new ArrayList<>();

        imgUrl.add(R.mipmap.aa);
        imgUrl.add(R.mipmap.ab);
        bannerAdapter = new BannerAdapter(context,imgUrl);
        view_banner.setAdapter(bannerAdapter);
        initIndicatorDots();


        //注册轮播图的滚动事件监听器
        view_banner.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {   //轮播时改变指示点
                super.onPageSelected(position);
                for(int i = 0; i < dotList.size(); i++){
                    if(i==position){
                        dotList.get(i).setBackgroundResource(R.drawable.shape_dot_blue);
                    }else{
                        dotList.get(i).setBackgroundResource(R.drawable.shape_dot_gray);
                    }
                }
            }
        });
    }


    //初始化指示点
    private void initIndicatorDots(){
        for(int i = 0; i < imgUrl.size(); i++){
            ImageView imageView = new ImageView(context);
            if (i == 0) imageView.setBackgroundResource(R.drawable.shape_dot_blue);
            else imageView.setBackgroundResource(R.drawable.shape_dot_gray);

            //为指示点添加间距
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
            layoutParams.setMargins(0,0,10,0);
            imageView.setLayoutParams(layoutParams);
            int index = i;
            imageView.setOnClickListener(new View.OnClickListener() {//点击点击效果进行切换功能
                @Override
                public void onClick(View v) {
                    view_banner.setCurrentItem(index);
                    for(ImageView iv :dotList){
                        iv.setBackgroundResource(R.drawable.shape_dot_gray);
                    }
                    v.setBackgroundResource(R.drawable.shape_dot_blue);

                }
            });
            dotList.add(imageView);
            layout_dot.addView(imageView);  //将指示点添加进容器
        }
    }



    private final Runnable runnable = new Runnable() {
        @Override
        public void run() {
            int currentPosition = view_banner.getCurrentItem();  //获得轮播图当前的位置
            currentPosition++;
            if(currentPosition==imgUrl.size()){//重新开始
                view_banner.setCurrentItem(0,true);
            }else{
                view_banner.setCurrentItem(currentPosition,true);
            }

            handler.postDelayed(runnable,5000);
        }
    };

    Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
        }
    };