ViewPager2 入門學習

ViewPager2 從出來到現在已經有一段時間了，它修復了 ViewPager 常見的一些 bug，以及支持豎直方法和 RTL , 現在很多小夥伴已經開始使用上了。那麼，學不懂也要學。

一、使用

首先，你的工程必須支持 androidx，我覺得新開的工程都可以使用 androidx了，一些主流的第三方庫也都支持，而且 google 也說28以後，不再支持 support 庫，當然這個看個人。
關聯 viewpager2：

 implementation "androidx.viewpager2:viewpager2:1.0.0"

它 的使用與 ViewPager 沒多大區別。首先在 xml 中寫上佈局：

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/page"
      android:layout_width="match_parent"
      android:layout_height="200dp"/>

ViewPager2 裏面是通過 Recyclerview 去編寫的，所以也是使用 setAdapter 的模式。

1.1 使用RecyclerView.Adapter

當我們使用一個簡單的view 來充當 viewpager 的容器時，可以通過集成 RecycelrView.adater 來實現，既然是 RecyclerView，那麼久需要 ViewHolder 了，所以寫法跟RecyclerView差不多。首先寫一個 ViewHodler

 class ViewPagerHolder extends RecyclerView.ViewHolder {
            TextView textView;

            public ViewPagerHolder(@NonNull View itemView) {
                super(itemView);
                textView = itemView.findViewById(R.id.item_text);
            }
        }

然後在寫一個 類 繼承RecyclerView.Adapter，完整代碼如下：

/**
     * 簡單view
     */
    class ViewAdapter extends RecyclerView.Adapter<ViewAdapter.ViewPagerHolder>{

        List<Integer> datas;

        public ViewAdapter(List<Integer> datas) {
            this.datas = datas;
        }

        @NonNull
        @Override
        public ViewPagerHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_text,parent,false);
            return new ViewPagerHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull ViewPagerHolder holder, int position) {
            holder.textView.setText("頁面"+position);
            holder.textView.setBackgroundColor(datas.get(position));
        }

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

        class ViewPagerHolder extends RecyclerView.ViewHolder {
            TextView textView;

            public ViewPagerHolder(@NonNull View itemView) {
                super(itemView);
                textView = itemView.findViewById(R.id.item_text);
            }
        }
    }

調用也非常簡單，如下：

 ViewPager2 page = findViewById(R.id.page);

        List<Integer> colors = new ArrayList<>();
        colors.add(Color.BLUE);
        colors.add(Color.DKGRAY);
        colors.add(Color.LTGRAY);


        page.setAdapter(new ViewAdapter(colors));

效果如下：

1.2 豎直方向

要使用豎直方向也非常簡單，只需要加一句話：

 //置換成豎直
page.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

看看效果：

就是這麼簡單，如果不使用 ViewPager2，這個豎直的，估計就得借用第三方工具或者自己自定義 ViewGroup 了。

1.3 與Fragment 結合

在使用 ViewPager 的時候，可以使用 FragmentPagerAdapter 實現頁數小的情況，用 FragmentStatePagerAdapter 實現頁面比較多的情況。ViewPager2 則沒有那麼多，直接使用 FragmentStateAdapter 即可。

首先構建一個 fragment，就一個 TextView：

public class TextTitleFragment extends Fragment {

    public static TextTitleFragment newInstance(String title) {

        Bundle args = new Bundle();
        args.putString("title",title);
        TextTitleFragment fragment = new TextTitleFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        TextView textView = new TextView(getContext());
        String title = getArguments().getString("title");
        textView.setText(title);
        textView.setTextSize(32);
        textView.setGravity(Gravity.CENTER);
        textView.setBackgroundColor(Color.parseColor("#30ff0000"));
        return textView;
    }
}

首先編寫 FragmentStateAdapter ，如下：

class FragmentAdapter extends FragmentStateAdapter {
        List<Fragment> fragments;
        public FragmentAdapter(@NonNull FragmentManager fm,List<Fragment> fragments) {
            super(fm);
            this.fragments = fragments;
        }

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



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

跟上面差不多，直接 setAdapter 即可：

  List<Fragment> fragments = new ArrayList<>();
        fragments.add(TextTitleFragment.newInstance("頁面1"));
        fragments.add(TextTitleFragment.newInstance("頁面2"));
        fragments.add(TextTitleFragment.newInstance("頁面3"));

        page2.setAdapter(new FragmentAdapter(getSupportFragmentManager(),fragments));

效果如下：

這樣就可以了。

二 、監聽頁面和刷新

如果想要監聽 頁面滑動，可以使用 registerOnPageChangeCallback 方法：

page2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });

當然，如果你想刷新數據，由於 V誒wPager2 是基於 RecyclerView 的，所以你也可以使用 DiffUtil 去刷新，當然也可以一刀切，使用 adapter.notifyDataSetChanged();

這樣，ViewPager2 就算入門了，你可以使用它來實現 banner，自定義自己的 tablayout 等。