组合控件——升级版翻页——第二代翻页视图ViewPager2

RecyclerView可取代ListView和GridView，同样ViewPager2可取代ViewPager。

与ViewPager相比，ViewPager2支持更丰富的界面特效，包括：

(1)不但支持水平方向翻页，还支持垂直方向翻页；(2)支持RecyclerView.Adapter，也允许调用适配器对象的notifyItem***方法，从而动态刷新某个页面项；(3)除了当前页，也支持展示左右两页的部分区域；(4)支持在翻页过程中展示自定义的切换动画；

===============================================================================================================

xml布局：

1.  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.  
   android:layout_width="match_parent"
3.  
   android:layout_height="match_parent"
4.  
   android:orientation="vertical">
5.  
    
6.  
   <RadioGroup
7.  
   android:id="@ id/rg_orientation"
8.  
   android:layout_width="match_parent"
9.  
   android:layout_height="wrap_content"
10.  
    android:orientation="horizontal" >
11.  
     
12.  
    <RadioButton
13.  
    android:id="@ id/rb_horizontal"
14.  
    android:layout_width="0dp"
15.  
    android:layout_height="wrap_content"
16.  
    android:layout_weight="1"
17.  
    android:checked="true"
18.  
    android:text="水平方向"
19.  
    android:textColor="@color/black"
20.  
    android:textSize="17sp" />
21.  
     
22.  
    <RadioButton
23.  
    android:id="@ id/rb_vertical"
24.  
    android:layout_width="0dp"
25.  
    android:layout_height="wrap_content"
26.  
    android:layout_weight="1"
27.  
    android:checked="false"
28.  
    android:text="垂直方向"
29.  
    android:textColor="@color/black"
30.  
    android:textSize="17sp" />
31.  
    </RadioGroup>
32.  
     
33.  
    <androidx.viewpager2.widget.ViewPager2
34.  
    android:id="@ id/vp2_content"
35.  
    android:layout_width="match_parent"
36.  
    android:layout_height="0dp"
37.  
    android:layout_weight="1" />
38.  
     
39.  
    </LinearLayout>

主代码：

1.  
   package com.example.myapplication;
2.  
    
3.  
   import androidx.appcompat.app.AppCompatActivity;
4.  
   import androidx.viewpager2.widget.ViewPager2;
5.  
   import android.os.Bundle;
6.  
   import android.widget.RadioGroup;
7.  
   import com.example.myapplication.adapter.MobileRecyclerAdapter;
8.  
   import com.example.myapplication.bean.GoodsInfo;
9.  
    
10.  
    public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener
11.  
    {
12.  
     
13.  
    private ViewPager2 vp2_content; // 声明一个二代翻页视图对象
14.  
     
15.  
    @Override
16.  
    protected void onCreate(Bundle savedInstanceState)
17.  
    {
18.  
    super.onCreate(savedInstanceState);
19.  
    setContentView(R.layout.activity_main);
20.  
     
21.  
    RadioGroup rg_orientation = findViewById(R.id.rg_orientation);
22.  
     
23.  
    rg_orientation.setOnCheckedChangeListener(this);
24.  
     
25.  
    // 从布局文件中获取名叫vp2_content的二代翻页视图
26.  
    vp2_content = findViewById(R.id.vp2_content);
27.  
     
28.  
    // 设置二代翻页视图的排列方向为水平方向
29.  
    vp2_content.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
30.  
     
31.  
    // 构建一个商品信息列表的循环适配器
32.  
    MobileRecyclerAdapter adapter = new MobileRecyclerAdapter(this, GoodsInfo.getDefaultList());
33.  
     
34.  
    vp2_content.setAdapter(adapter); // 设置二代翻页视图的适配器
35.  
     
36.  
    // ViewPager2支持展示左右两页的部分区域
37.  
    // RecyclerView cv_content = (RecyclerView) vp2_content.getChildAt(0);
38.  
    // cv_content.setPadding(Utils.dip2px(this, 60), 0, Utils.dip2px(this, 60), 0);
39.  
    // cv_content.setClipToPadding(false); // false表示不裁剪下级视图
40.  
     
41.  
    // ViewPager2支持在翻页时展示切换动画，通过页面转换器计算切换动画的各项参数
42.  
    // ViewPager2.PageTransformer animator = new ViewPager2.PageTransformer() {
43.  
    // @Override
44.  
    // public void transformPage(@NonNull View page, float position) {
45.  
    // page.setRotation(position * 360); // 设置页面的旋转角度
46.  
    // }
47.  
    // };
48.  
    // vp2_content.setPageTransformer(animator); // 设置二代翻页视图的页面转换器
49.  
    }
50.  
     
51.  
    @Override
52.  
    public void onCheckedChanged(RadioGroup group, int checkedId)
53.  
    {
54.  
     
55.  
    if (checkedId == R.id.rb_horizontal)
56.  
    {
57.  
     
58.  
    // 设置二代翻页视图的排列方向为水平方向
59.  
    vp2_content.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
60.  
     
61.  
    }
62.  
    else if (checkedId == R.id.rb_vertical)
63.  
    {
64.  
     
65.  
    // 设置二代翻页视图的排列方向为垂直方向
66.  
    vp2_content.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
67.  
    }
68.  
    }
69.  
    }

GoodsInfo

1.  
   package com.example.myapplication.bean;
2.  
    
3.  
   import com.example.myapplication.R;
4.  
   import java.util.ArrayList;
5.  
    
6.  
   public class GoodsInfo {
7.  
   public long rowid; // 行号
8.  
   public int xuhao; // 序号
9.  
   public String name; // 名称
10.  
    public String desc; // 描述
11.  
    public float price; // 价格
12.  
    public String pic_path; // 大图的保存路径
13.  
    public int pic; // 大图的资源编号
14.  
     
15.  
    public GoodsInfo() {
16.  
    rowid = 0L;
17.  
    xuhao = 0;
18.  
    name = "";
19.  
    desc = "";
20.  
    price = 0;
21.  
    pic_path = "";
22.  
    pic = 0;
23.  
    }
24.  
     
25.  
    // 声明一个手机商品的名称数组
26.  
    private static String[] mNameArray = {
27.  
    "iPhone11", "Mate30", "小米10", "OPPO Reno3", "vivo X30", "荣耀30S"
28.  
    };
29.  
     
30.  
     
31.  
    // 声明一个手机商品的描述数组
32.  
    private static String[] mDescArray = {
33.  
    "Apple iPhone11 256GB 绿色 4G全网通手机",
34.  
    "华为 HUAWEI Mate30 8GB 256GB 丹霞橙 5G全网通 全面屏手机",
35.  
    "小米 MI10 8GB 128GB 钛银黑 5G手机 游戏拍照手机",
36.  
    "OPPO Reno3 8GB 128GB 蓝色星夜 双模5G 拍照游戏智能手机",
37.  
    "vivo X30 8GB 128GB 绯云 5G全网通 美颜拍照手机",
38.  
    "荣耀30S 8GB 128GB 蝶羽红 5G芯片 自拍全面屏手机"
39.  
    };
40.  
     
41.  
    // 声明一个手机商品的价格数组
42.  
    private static float[] mPriceArray = {6299, 4999, 3999, 2999, 2998, 2399};
43.  
     
44.  
    // 声明一个手机商品的大图数组
45.  
    private static int[] mPicArray = {
46.  
    R.drawable.iphone, R.drawable.huawei, R.drawable.xiaomi,
47.  
    R.drawable.oppo, R.drawable.vivo, R.drawable.rongyao
48.  
    };
49.  
     
50.  
    // 获取默认的手机信息列表
51.  
    public static ArrayList<GoodsInfo> getDefaultList()
52.  
    {
53.  
    ArrayList<GoodsInfo> goodsList = new ArrayList<GoodsInfo>();
54.  
     
55.  
    for (int i = 0; i < mNameArray.length; i )
56.  
    {
57.  
     
58.  
    GoodsInfo info = new GoodsInfo();
59.  
    info.name = mNameArray[i];
60.  
    info.desc = mDescArray[i];
61.  
    info.price = mPriceArray[i];
62.  
    info.pic = mPicArray[i];
63.  
    goodsList.add(info);
64.  
    }
65.  
     
66.  
    return goodsList;
67.  
     
68.  
    }
69.  
     
70.  
    }

CustomPagerTab

1.  
   package com.example.myapplication.widget;
2.  
    
3.  
   import android.content.Context;
4.  
   import android.content.res.TypedArray;
5.  
   import android.graphics.Canvas;
6.  
   import android.graphics.Color;
7.  
   import android.util.AttributeSet;
8.  
   import android.util.Log;
9.  
   import android.util.TypedValue;
10.  
    import androidx.viewpager.widget.PagerTabStrip;
11.  
    import com.example.myapplication.R;
12.  
    import com.example.myapplication.util.Utils;
13.  
     
14.  
    public class CustomPagerTab extends PagerTabStrip
15.  
    {
16.  
    private final static String TAG = "CustomPagerTab";
17.  
    private int textColor = Color.BLACK; // 文本颜色
18.  
    private int textSize = 15; // 文本大小
19.  
     
20.  
    public CustomPagerTab(Context context)
21.  
    {
22.  
     
23.  
    super(context);
24.  
    }
25.  
     
26.  
    public CustomPagerTab(Context context, AttributeSet attrs)
27.  
    {
28.  
    super(context, attrs);
29.  
     
30.  
    if (attrs != null)
31.  
    {
32.  
    // 根据CustomPagerTab的属性定义，从XML文件中获取属性数组描述
33.  
    TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.CustomPagerTab);
34.  
     
35.  
    // 根据属性描述定义，获取XML文件中的文本颜色
36.  
    textColor = attrArray.getColor(R.styleable.CustomPagerTab_textColor, textColor);
37.  
     
38.  
    // 根据属性描述定义，获取XML文件中的文本大小
39.  
    // getDimension得到的是px值，需要转换为sp值
40.  
    textSize = Utils.px2dip(context, attrArray.getDimension(R.styleable.CustomPagerTab_textSize, textSize));
41.  
     
42.  
    Log.d(TAG, "origin textSize=" attrArray.getDimension(R.styleable.CustomPagerTab_textSize, textSize));
43.  
     
44.  
    Log.d(TAG, "textColor=" textColor ", textSize=" textSize);
45.  
     
46.  
    attrArray.recycle(); // 回收属性数组描述
47.  
    }
48.  
    }
49.  
     
50.  
    // //PagerTabStrip没有三个参数的构造方法
51.  
    // public CustomPagerTab(Context context, AttributeSet attrs, int defStyleAttr) {
52.  
    // }
53.  
     
54.  
    @Override
55.  
    protected void onDraw(Canvas canvas) // 绘制方法
56.  
    {
57.  
    super.onDraw(canvas);
58.  
    setTextColor(textColor); // 设置标题文字的文本颜色
59.  
     
60.  
    setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize); // 设置标题文字的文本大小
61.  
    }
62.  
     
63.  
    }

MobileRecyclerAdapter

1.  
   package com.example.myapplication.adapter;
2.  
    
3.  
   import android.content.Context;
4.  
   import android.view.LayoutInflater;
5.  
   import android.view.View;
6.  
   import android.view.ViewGroup;
7.  
   import android.widget.ImageView;
8.  
   import android.widget.TextView;
9.  
    
10.  
    import androidx.recyclerview.widget.RecyclerView;
11.  
     
12.  
    import com.example.myapplication.R;
13.  
    import com.example.myapplication.bean.GoodsInfo;
14.  
     
15.  
    import java.util.ArrayList;
16.  
    import java.util.List;
17.  
     
18.  
    public class MobileRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
19.  
    private final static String TAG = "MobileRecyclerAdapter";
20.  
    private Context mContext; // 声明一个上下文对象
21.  
    private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>(); // 声明一个商品列表
22.  
     
23.  
    public MobileRecyclerAdapter(Context context, List<GoodsInfo> goodsList) {
24.  
    mContext = context;
25.  
    mGoodsList = goodsList;
26.  
    }
27.  
     
28.  
    // 获取列表项的个数
29.  
    public int getItemCount() {
30.  
    return mGoodsList.size();
31.  
    }
32.  
     
33.  
    // 创建列表项的视图持有者
34.  
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup vg, int viewType) {
35.  
    // 根据布局文件item_mobile.xml生成视图对象
36.  
    View v = LayoutInflater.from(mContext).inflate(R.layout.item_mobile, vg, false);
37.  
    return new ItemHolder(v);
38.  
    }
39.  
     
40.  
    // 绑定列表项的视图持有者
41.  
    public void onBindViewHolder(RecyclerView.ViewHolder vh, final int position) {
42.  
    ItemHolder holder = (ItemHolder) vh;
43.  
    holder.iv_pic.setImageResource(mGoodsList.get(position).pic);
44.  
    holder.tv_desc.setText(mGoodsList.get(position).desc);
45.  
    }
46.  
     
47.  
    // 获取列表项的类型
48.  
    public int getItemViewType(int position) {
49.  
    return 0;
50.  
    }
51.  
     
52.  
    // 获取列表项的编号
53.  
    public long getItemId(int position) {
54.  
    return position;
55.  
    }
56.  
     
57.  
    // 定义列表项的视图持有者
58.  
    public class ItemHolder extends RecyclerView.ViewHolder {
59.  
    public ImageView iv_pic; // 声明列表项图标的图像视图
60.  
    public TextView tv_desc; // 声明列表项描述的文本视图
61.  
     
62.  
    public ItemHolder(View v) {
63.  
    super(v);
64.  
    iv_pic = v.findViewById(R.id.iv_pic);
65.  
    tv_desc = v.findViewById(R.id.tv_desc);
66.  
    }
67.  
    }
68.  
     
69.  
    }

item_mobile.xml

1.  
   <!-- ViewPager2要求每页的宽高都必须是match_parent -->
2.  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  
   android:layout_width="match_parent"
4.  
   android:layout_height="match_parent"
5.  
   android:orientation="vertical">
6.  
    
7.  
   <ImageView
8.  
   android:id="@ id/iv_pic"
9.  
   android:layout_width="match_parent"
10.  
    android:layout_height="360dp"
11.  
    android:scaleType="fitCenter" />
12.  
     
13.  
    <TextView
14.  
    android:id="@ id/tv_desc"
15.  
    android:layout_width="match_parent"
16.  
    android:layout_height="wrap_content"
17.  
    android:textColor="@color/black"
18.  
    android:textSize="17sp" />
19.  
     
20.  
    </LinearLayout>

Utils

1.  
   package com.example.myapplication.util;
2.  
    
3.  
   import android.content.Context;
4.  
   import android.graphics.Rect;
5.  
   import android.os.Build;
6.  
   import android.util.DisplayMetrics;
7.  
   import android.view.WindowManager;
8.  
    
9.  
   public class Utils {
10.  
    // 根据手机的分辨率从 dp 的单位 转成为 px(像素)
11.  
    public static int dip2px(Context context, float dpValue) {
12.  
    // 获取当前手机的像素密度(1个dp对应几个px)
13.  
    float scale = context.getResources().getDisplayMetrics().density;
14.  
    return (int) (dpValue * scale 0.5f); // 四舍五入取整
15.  
    }
16.  
     
17.  
    // 根据手机的分辨率从 px(像素) 的单位 转成为 dp
18.  
    public static int px2dip(Context context, float pxValue) {
19.  
    // 获取当前手机的像素密度(1个dp对应几个px)
20.  
    float scale = context.getResources().getDisplayMetrics().density;
21.  
    return (int) (pxValue / scale 0.5f); // 四舍五入取整
22.  
    }
23.  
     
24.  
    // 获得屏幕的宽度
25.  
    public static int getScreenWidth(Context ctx) {
26.  
    int screenWidth;
27.  
    // 从系统服务中获取窗口管理器
28.  
    WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
29.  
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
30.  
    // 获取当前屏幕的四周边界
31.  
    Rect rect = wm.getCurrentWindowMetrics().getBounds();
32.  
    screenWidth = rect.width();
33.  
    } else {
34.  
    DisplayMetrics dm = new DisplayMetrics();
35.  
    // 从默认显示器中获取显示参数保存到dm对象中
36.  
    wm.getDefaultDisplay().getMetrics(dm);
37.  
    screenWidth = dm.widthPixels;
38.  
    }
39.  
    return screenWidth; // 返回屏幕的宽度数值
40.  
    }
41.  
     
42.  
    // 获得屏幕的高度
43.  
    public static int getScreenHeight(Context ctx) {
44.  
    int screenHeight;
45.  
    // 从系统服务中获取窗口管理器
46.  
    WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
47.  
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
48.  
    // 获取当前屏幕的四周边界
49.  
    Rect rect = wm.getCurrentWindowMetrics().getBounds();
50.  
    screenHeight = rect.height();
51.  
    } else {
52.  
    DisplayMetrics dm = new DisplayMetrics();
53.  
    // 从默认显示器中获取显示参数保存到dm对象中
54.  
    wm.getDefaultDisplay().getMetrics(dm);
55.  
    screenHeight = dm.heightPixels;
56.  
    }
57.  
    return screenHeight; // 返回屏幕的高度数值
58.  
    }
59.  
     
60.  
    }

DateUtil

1.  
   package com.example.myapplication.util;
2.  
    
3.  
   import android.annotation.SuppressLint;
4.  
   import android.text.TextUtils;
5.  
    
6.  
   import java.text.SimpleDateFormat;
7.  
   import java.util.Date;
8.  
    
9.  
   @SuppressLint("SimpleDateFormat")
10.  
    public class DateUtil {
11.  
    // 获取指定格式的日期时间
12.  
    public static String getNowDateTime(String formatStr) {
13.  
    String format = formatStr;
14.  
    if (TextUtils.isEmpty(format)) {
15.  
    format = "yyyyMMddHHmmss";
16.  
    }
17.  
    SimpleDateFormat sdf = new SimpleDateFormat(format);
18.  
    return sdf.format(new Date());
19.  
    }
20.  
     
21.  
    // 获取当前的日期时间
22.  
    public static String getNowDateTime() {
23.  
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
24.  
    return sdf.format(new Date());
25.  
    }
26.  
     
27.  
    // 获取当前的时间
28.  
    public static String getNowTime() {
29.  
    SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
30.  
    return sdf.format(new Date());
31.  
    }
32.  
     
33.  
    }