08 Android常用组件--ViewPager2 的基本使用

08 Android常用组件--ViewPager2 的基本使用

ViewPager2的概念

ViewPager2是一个翻页视图组件

ViewPager2能做什么

• 支持垂直方向的滑动且实现极其简单。
• 完全支持RecyclerView的相关配置功能。
• 支持多个PageTransformer。
• 支持DiffUtil，局部数据刷新和Item动画。
• 支持模拟用户滑动与禁止用户操作。

ViewPager2的用法

因为ViewPager2是基于RecyclerView的，所以在使用上与RecyclerView的使用基本一致

• ViewPager2常用的API

1.setAdapter()   为viewpager2设置是配置
 2.setOrientation()  设置视图翻页的方向，可以设置垂直方向，也可以设置水平方向。
 3.setPageTransformer() 设置翻页的动画

举个简单的例子，adapter部分的代码省略了

1. 第一步： activity_main.xml

// 第一步： activity_main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><androidx.viewpager2.widget.ViewPager2android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/view_pager"/></LinearLayout>

1. 第二步：创建适配器的视图

// 第二步：创建适配器的视图
<!-- ViewPager2要求每页的宽高都必须是match_parent --><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageViewandroid:id="@+id/iv_pic"android:layout_width="match_parent"android:layout_height="360dp"android:scaleType="fitCenter"/><TextViewandroid:id="@+id/tv_desc"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>

1. 第三步： 创建适配器adapter

// 第三步：创建适配器adapterpublicclass viewpagerAdapter extendsRecyclerView.Adapter<RecyclerView.ViewHolder>{// 声明一个上下文对象privateContext mContext;// 声明一个商品列表，用于渲染adapterprivateList<GoodsInfo> mGoodsList =newArrayList<GoodsInfo>();// 函数构造publicviewpagerAdapter(Context context,List<GoodsInfo> goodsList){
        mContext = context;
        mGoodsList = goodsList;}// 创建列表项的视图持有者publicRecyclerView.ViewHolderonCreateViewHolder(ViewGroup vg,int viewType){// 根据布局文件item_mobile.xml生成视图对象View v =LayoutInflater.from(mContext).inflate(R.layout.item_mobile, vg,false);returnnewItemHolder(v);}// 绑定列表项的视图持有者publicvoidonBindViewHolder(RecyclerView.ViewHolder vh,finalint position){ItemHolder holder =(ItemHolder) vh;
        holder.iv_pic.setImageResource(mGoodsList.get(position).pic);
        holder.tv_desc.setText(mGoodsList.get(position).desc);}// 定义列表项的视图持有者publicclassItemHolderextendsRecyclerView.ViewHolder{publicImageView iv_pic;// 声明列表项图标的图像视图publicTextView tv_desc;// 声明列表项描述的文本视图publicItemHolder(View v){super(v);
            iv_pic = v.findViewById(R.id.iv_pic);
            tv_desc = v.findViewById(R.id.tv_desc);}}}

1. 第四步：书写MainAcvitivity.java，调用ViewPager的API

//第四步：书写MainAcvitivity.java，调用ViewPager的API publicclassMainActivityextendsAppCompatActivity{privateList<GoodsInfo> viewPagerList =newArrayList<>();@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();// 从布局文件中获取翻页视图ViewPager2 viewPager2 =findViewById(R.id.view_pager);// 构建适配器
        viewpagerAdapter vpa =newviewpagerAdapter(viewPagerList);// 设置翻页视图的排列方向为水平方向
        viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);// 为翻页视图添加适配器
        viewPager2.setAdapter(vpa);}privatevoidinitData(){GoodsInfo g1 =newGoodsInfo("123",R.drawable.cloudy);
            viewPagerList.add(g1);GoodsInfo g2 =newGoodsInfo("456",R.drawable.moon);
            viewPagerList.add(g2);GoodsInfo g3 =newGoodsInfo("789",R.drawable.sunny);
            viewPagerList.add(g3);}}

有没有发现，这个和recycleView的写法一摸一样。

ViewPager2与fragment结合使用

1. 第一步：activity_main.xml视图

// 第一步：activity_main.xml视图  

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><androidx.viewpager2.widget.ViewPager2android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/view_pager"/></LinearLayout>

1. 第二步：创建fragment所需要的视图fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"tools:context=".BlankFragment"><!-- TODO: Update blank fragment layout --><TextViewandroid:id="@+id/mTextView"android:layout_width="match_parent"android:layout_height="match_parent"android:text="@string/hello_blank_fragment"android:textSize="36sp"android:gravity="center"/></FrameLayout>

1. 第三步：fragment所需的代码

publicclassBlankFragmentextendsFragment{privatestaticfinalString ARG_PARAM1 ="param1";String mTextString ="xxx";View rootView;publicstaticBlankFragmentnewInstance(String param1){BlankFragment fragment =newBlankFragment();Bundle args =newBundle();
        args.putString(ARG_PARAM1, param1);
        fragment.setArguments(args);return fragment;}@OverridepublicvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);if(getArguments()!=null){
            mTextString =getArguments().getString(ARG_PARAM1);}}@OverridepublicViewonCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){if(rootView ==null){
            rootView = inflater.inflate(R.layout.fragment_blank, container,false);}initView();return rootView;}privatevoidinitView(){TextView textView = rootView.findViewById(R.id.mTextView);
        textView.setText(mTextString);}}

1. 第四步：创建承载fragment所需要的适配器

publicclassMyFragmentAdapterextendsFragmentStateAdapter{List<Fragment> fragments =newArrayList<>();publicMyFragmentAdapter(@NonNullFragmentManager fragmentManager,@NonNullLifecycle lifecycle,List<Fragment> fragments){super(fragmentManager, lifecycle);this.fragments = fragments;}@NonNull@OverridepublicFragmentcreateFragment(int position){return fragments.get(position);}@OverridepublicintgetItemCount(){return fragments.size();}}

1. 第五步：书写MainAcvitivity.java，调用ViewPager的API

publicclassMainActivityextendsAppCompatActivity{ViewPager2 viewPager2;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initPage();}privatevoidinitPage(){List<Fragment> fragments =newArrayList<>();
        fragments.add(BlankFragment.newInstance("fragment1"));
        fragments.add(BlankFragment.newInstance("fragment2"));
        fragments.add(BlankFragment.newInstance("fragment3"));
        fragments.add(BlankFragment.newInstance("fragment4"));

        viewPager2 =findViewById(R.id.myViewPager);
        viewPager2.setAdapter(newMyFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragments));}}

ViewPager2与导航栏配合使用

代码简写，只写相关的部分

// activity_main.xml 写上用到的两个组件TabLayout与ViewPager2
<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><com.google.android.material.tabs.TabLayoutandroid:id="@+id/mTabLayout"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="0.1"><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Monday"/><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tuesday"/><com.google.android.material.tabs.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Wednesday"/></com.google.android.material.tabs.TabLayout><androidx.viewpager2.widget.ViewPager2android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:id="@+id/myViewPager"android:background="@color/purple_500"></androidx.viewpager2.widget.ViewPager2></LinearLayout>

publicclassMainActivityextendsAppCompatActivity{ViewPager2 viewPager2;@OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initPage();}privatevoidinitPage(){List<Fragment> fragments =newArrayList<>();
        fragments.add(BlankFragment.newInstance("fragment1"));
        fragments.add(BlankFragment.newInstance("fragment2"));
        fragments.add(BlankFragment.newInstance("fragment3"));
        fragments.add(BlankFragment.newInstance("fragment4"));

        viewPager2 =findViewById(R.id.myViewPager);
        viewPager2.setAdapter(newMyFragmentAdapter(getSupportFragmentManager(),getLifecycle(),fragments));//绑定使用newTabLayoutMediator(findViewById(R.id.mTabLayout),viewPager2,newTabLayoutMediator.TabConfigurationStrategy(){@OverridepublicvoidonConfigureTab(@NonNullTabLayout.Tab tab,int position){switch(position){case0:
                        tab.setText("1");break;case1:
                        tab.setText("2");break;case2:
                        tab.setText("3");break;}}}).attach();}}