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、支持RTL（right-to-left）布局，對於一些有出海需求的APP非常有用
5、支持ItemDecorator

---

一、ViewPager2和ViewPager的對比：

1、ViewPager2內部實現是RecyclerView，所以ViewPager2的性能更高。
2、ViewPager2可以實現豎向滑動，ViewPager只能橫向滑動。
3、ViewPager2只有一個adapter，FragmentStateAdapter繼承自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) {
    
        }
    };