美文网首页Android开发经验
android ViewPager2的使用教程

android ViewPager2的使用教程

作者: android难民 | 来源:发表于2019-03-11 16:54 被阅读6次

    谷歌发布了Android的ViewPager2测试版,让我们看看它有什么不同。

    Android ViewPager2

    首先使用ViewPager2,先在build.gradle添加依赖

    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'
    

    Android ViewPager2的特性

    • 从右到左的布局支持
    • 垂直方向
    • RecyclerView.Adapter取代PagerAdapter
    • registerOnPageChangeCallback 取代 addPageChangeListener
    • 更高效的notifyDataSetChanged

    ViewPaver2与ViewPager的区别

    同样在xml中使用一样。

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

    在以前的ViewPager的addOnPageChangeListener方法,我们需要覆盖三个方法。回顾下代码如下

     viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    
                }
    
                @Override
                public void onPageSelected(int position) {
    
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
    

    在ViewPager2中,不再需要这样的重写。

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

    垂直方向属性

    默认是水平方向ORIENTATION_HORIZONTAL,垂直是ORIENTATION_VERTICAL

    mviewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
    

    ViewPager2与RecycleView的结合使用

    接下来,我们使用RecyclerView.Adapter来结合ViewPager2一起使用。不再需要像ViewPager使用FragmentStateAdapter。

    项目结构如下:


    struct.png

    activity_main.xml代码

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns: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">
    
       <androidx.viewpager2.widget.ViewPager2
           android:id="@+id/viewpager2"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    MainActivity的代码

    public class MainActivity extends AppCompatActivity {
        ViewPager2 mviewPager2;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mviewPager2 = findViewById(R.id.viewpager2);
            List<String> list = new ArrayList<>();
            list.add("页面一");
            list.add("页面二");
            list.add("页面三");
            list.add("页面四");
    
            mviewPager2.setAdapter(new ViewPagerAdapter(this, list, mviewPager2));
    
        }
    }
    

    列表Item的布局recycleview_item.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@android:color/white"
            android:textSize="32sp"
            tools:text="item" />
    </RelativeLayout>
    
    

    ViewPagerAdapter的代码如下,使用跟RecycleView的adapter完全一样

    package com.chaowen.androidviewpager2;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    import android.widget.RelativeLayout;
    import android.widget.TextView;
    
    import java.util.List;
    
    import androidx.annotation.NonNull;
    import androidx.recyclerview.widget.RecyclerView;
    import androidx.viewpager2.widget.ViewPager2;
    
    /**
     * @Author: wuchaowen
     * @Description:
     * @Time:
     **/
    public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewHolder> {
        private List<String> mData;
        private LayoutInflater mInflater;
        private ViewPager2 viewPager2;
    
    
        private int[] colorArray = new int[]{android.R.color.black, android.R.color.holo_blue_dark, android.R.color.holo_green_dark, android.R.color.holo_red_dark};
    
    
        public ViewPagerAdapter(Context context, List<String> data, ViewPager2 viewPager2) {
            this.mInflater = LayoutInflater.from(context);
            this.mData = data;
            this.viewPager2 = viewPager2;
        }
    
        @NonNull
        @Override
        public ViewPagerAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = mInflater.inflate(R.layout.recycleview_item, parent, false);
            return new ViewHolder(view);
        }
    
        @Override
        public void onBindViewHolder(@NonNull ViewPagerAdapter.ViewHolder holder, int position) {
            String animal = mData.get(position);
            holder.myTextView.setText(animal);
            holder.relativeLayout.setBackgroundResource(colorArray[position]);
    
        }
    
        @Override
        public int getItemCount() {
            return mData.size();
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            TextView myTextView;
            RelativeLayout relativeLayout;
    
            ViewHolder(View itemView) {
                super(itemView);
                myTextView = itemView.findViewById(R.id.tvTitle);
                relativeLayout = itemView.findViewById(R.id.container);
    
            }
        }
    }
    
    

    运行效果


    viewpager.gif

    踩坑1 Androidx和Android support库不能共存

    Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
        is also present at [androidx.core:core:1.1.0-alpha04] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory).
        Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:6:5-22:19 to override.
    

    解决方案

    • 将build tools更新到3.2.0,gradle更新到4.6,依赖库统一更新到28.0.0,这一步非常重要,否则会导致第二步不能完全转换成功

    • 选择工程右键→Refactor→Migrate to Androidx


      viewpager2.png
    • 选中所有需要重命名的目录,执行Do Refactor


      viewpager2_1.png
    • 发现已经看不到support库了,运行成功安装app。

    项目代码下载

    相关文章

      网友评论

        本文标题:android ViewPager2的使用教程

        本文链接:https://www.haomeiwen.com/subject/stbbpqtx.html