1. 云图网首页
  2. 技术专区

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

• 技术专区


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

 

 

 

 

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

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

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

 

 

 

 

 

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

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

xml布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RadioGroup
        android:id="@+id/rg_orientation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="true"
            android:text="水平方向"
            android:textColor="@color/black"
            android:textSize="17sp" />

        <RadioButton
            android:id="@+id/rb_vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="false"
            android:text="垂直方向"
            android:textColor="@color/black"
            android:textSize="17sp" />
    </RadioGroup>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp2_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

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

 

 

 

 

 

 

 

 

 

 

主代码：

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.widget.RadioGroup;
import com.example.myapplication.adapter.MobileRecyclerAdapter;
import com.example.myapplication.bean.GoodsInfo;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener
{

    private ViewPager2 vp2_content; // 声明一个二代翻页视图对象

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RadioGroup rg_orientation = findViewById(R.id.rg_orientation);

        rg_orientation.setOnCheckedChangeListener(this);

        // 从布局文件中获取名叫vp2_content的二代翻页视图
        vp2_content = findViewById(R.id.vp2_content);

        // 设置二代翻页视图的排列方向为水平方向
        vp2_content.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        // 构建一个商品信息列表的循环适配器
        MobileRecyclerAdapter adapter = new MobileRecyclerAdapter(this, GoodsInfo.getDefaultList());

        vp2_content.setAdapter(adapter); // 设置二代翻页视图的适配器

        // ViewPager2支持展示左右两页的部分区域
//        RecyclerView cv_content = (RecyclerView) vp2_content.getChildAt(0);
//        cv_content.setPadding(Utils.dip2px(this, 60), 0, Utils.dip2px(this, 60), 0);
//        cv_content.setClipToPadding(false); // false表示不裁剪下级视图

        // ViewPager2支持在翻页时展示切换动画，通过页面转换器计算切换动画的各项参数
//        ViewPager2.PageTransformer animator = new ViewPager2.PageTransformer() {
//            @Override
//            public void transformPage(@NonNull View page, float position) {
//                page.setRotation(position * 360); // 设置页面的旋转角度
//            }
//        };
//        vp2_content.setPageTransformer(animator); // 设置二代翻页视图的页面转换器
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId)
    {

        if (checkedId == R.id.rb_horizontal)
        {

            // 设置二代翻页视图的排列方向为水平方向
            vp2_content.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        }
        else if (checkedId == R.id.rb_vertical)
        {

            // 设置二代翻页视图的排列方向为垂直方向
            vp2_content.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
        }
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

GoodsInfo
package com.example.myapplication.bean;

import com.example.myapplication.R;
import java.util.ArrayList;

public class GoodsInfo {
    public long rowid; // 行号
    public int xuhao; // 序号
    public String name; // 名称
    public String desc; // 描述
    public float price; // 价格
    public String pic_path; // 大图的保存路径
    public int pic; // 大图的资源编号

    public GoodsInfo() {
        rowid = 0L;
        xuhao = 0;
        name = "";
        desc = "";
        price = 0;
        pic_path = "";
        pic = 0;
    }

    // 声明一个手机商品的名称数组
    private static String[] mNameArray = {
            "iPhone11", "Mate30", "小米10", "OPPO Reno3", "vivo X30", "荣耀30S"
    };


    // 声明一个手机商品的描述数组
    private static String[] mDescArray = {
            "Apple iPhone11 256GB 绿色 4G全网通手机",
            "华为 HUAWEI Mate30 8GB+256GB 丹霞橙 5G全网通 全面屏手机",
            "小米 MI10 8GB+128GB 钛银黑 5G手机 游戏拍照手机",
            "OPPO Reno3 8GB+128GB 蓝色星夜 双模5G 拍照游戏智能手机",
            "vivo X30 8GB+128GB 绯云 5G全网通 美颜拍照手机",
            "荣耀30S 8GB+128GB 蝶羽红 5G芯片 自拍全面屏手机"
    };

    // 声明一个手机商品的价格数组
    private static float[] mPriceArray = {6299, 4999, 3999, 2999, 2998, 2399};

    // 声明一个手机商品的大图数组
    private static int[] mPicArray = {
            R.drawable.iphone, R.drawable.huawei, R.drawable.xiaomi,
            R.drawable.oppo, R.drawable.vivo, R.drawable.rongyao
    };

    // 获取默认的手机信息列表
    public static ArrayList<GoodsInfo> getDefaultList()
    {
        ArrayList<GoodsInfo> goodsList = new ArrayList<GoodsInfo>();

        for (int i = 0; i < mNameArray.length; i++)
        {

            GoodsInfo info = new GoodsInfo();
            info.name = mNameArray[i];
            info.desc = mDescArray[i];
            info.price = mPriceArray[i];
            info.pic = mPicArray[i];
            goodsList.add(info);
        }

        return goodsList;

    }

}

 

 

 

 

 

 

 

CustomPagerTab

 

package com.example.myapplication.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import androidx.viewpager.widget.PagerTabStrip;
import com.example.myapplication.R;
import com.example.myapplication.util.Utils;

public class CustomPagerTab extends PagerTabStrip
{
    private final static String TAG = "CustomPagerTab";
    private int textColor = Color.BLACK; // 文本颜色
    private int textSize = 15; // 文本大小

    public CustomPagerTab(Context context)
    {

        super(context);
    }

    public CustomPagerTab(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        if (attrs != null)
        {
            // 根据CustomPagerTab的属性定义，从XML文件中获取属性数组描述
            TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.CustomPagerTab);

            // 根据属性描述定义，获取XML文件中的文本颜色
            textColor = attrArray.getColor(R.styleable.CustomPagerTab_textColor, textColor);

            // 根据属性描述定义，获取XML文件中的文本大小
            // getDimension得到的是px值，需要转换为sp值
            textSize = Utils.px2dip(context, attrArray.getDimension(R.styleable.CustomPagerTab_textSize, textSize));

            Log.d(TAG, "origin textSize="+attrArray.getDimension(R.styleable.CustomPagerTab_textSize, textSize));

            Log.d(TAG, "textColor=" + textColor + ", textSize=" + textSize);

            attrArray.recycle(); // 回收属性数组描述
        }
    }

//    //PagerTabStrip没有三个参数的构造方法
//    public CustomPagerTab(Context context, AttributeSet attrs, int defStyleAttr) {
//    }

    @Override
    protected void onDraw(Canvas canvas)   // 绘制方法
    {
        super.onDraw(canvas);
        setTextColor(textColor); // 设置标题文字的文本颜色

        setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize); // 设置标题文字的文本大小
    }

}

 

 

 

 

 

 

 

MobileRecyclerAdapter
package com.example.myapplication.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import com.example.myapplication.R;
import com.example.myapplication.bean.GoodsInfo;

import java.util.ArrayList;
import java.util.List;

public class MobileRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final static String TAG = "MobileRecyclerAdapter";
    private Context mContext; // 声明一个上下文对象
    private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>(); // 声明一个商品列表

    public MobileRecyclerAdapter(Context context, List<GoodsInfo> goodsList) {
        mContext = context;
        mGoodsList = goodsList;
    }

    // 获取列表项的个数
    public int getItemCount() {
        return mGoodsList.size();
    }

    // 创建列表项的视图持有者
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup vg, int viewType) {
        // 根据布局文件item_mobile.xml生成视图对象
        View v = LayoutInflater.from(mContext).inflate(R.layout.item_mobile, vg, false);
        return new ItemHolder(v);
    }

    // 绑定列表项的视图持有者
    public void onBindViewHolder(RecyclerView.ViewHolder vh, final int position) {
        ItemHolder holder = (ItemHolder) vh;
        holder.iv_pic.setImageResource(mGoodsList.get(position).pic);
        holder.tv_desc.setText(mGoodsList.get(position).desc);
    }

    // 获取列表项的类型
    public int getItemViewType(int position) {
        return 0;
    }

    // 获取列表项的编号
    public long getItemId(int position) {
        return position;
    }

    // 定义列表项的视图持有者
    public class ItemHolder extends RecyclerView.ViewHolder {
        public ImageView iv_pic; // 声明列表项图标的图像视图
        public TextView tv_desc; // 声明列表项描述的文本视图

        public ItemHolder(View v) {
            super(v);
            iv_pic = v.findViewById(R.id.iv_pic);
            tv_desc = v.findViewById(R.id.tv_desc);
        }
    }

}

 

 

 

 

 

 

 

 

item_mobile.xml

<!-- ViewPager2要求每页的宽高都必须是match_parent -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:scaleType="fitCenter" />

    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Utils
package com.example.myapplication.util;

import android.content.Context;
import android.graphics.Rect;
import android.os.Build;
import android.util.DisplayMetrics;
import android.view.WindowManager;

public class Utils {
    // 根据手机的分辨率从 dp 的单位 转成为 px(像素)
    public static int dip2px(Context context, float dpValue) {
        // 获取当前手机的像素密度（1个dp对应几个px）
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f); // 四舍五入取整
    }

    // 根据手机的分辨率从 px(像素) 的单位 转成为 dp
    public static int px2dip(Context context, float pxValue) {
        // 获取当前手机的像素密度（1个dp对应几个px）
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f); // 四舍五入取整
    }

    // 获得屏幕的宽度
    public static int getScreenWidth(Context ctx) {
        int screenWidth;
        // 从系统服务中获取窗口管理器
        WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            // 获取当前屏幕的四周边界
            Rect rect = wm.getCurrentWindowMetrics().getBounds();
            screenWidth = rect.width();
        } else {
            DisplayMetrics dm = new DisplayMetrics();
            // 从默认显示器中获取显示参数保存到dm对象中
            wm.getDefaultDisplay().getMetrics(dm);
            screenWidth = dm.widthPixels;
        }
        return screenWidth; // 返回屏幕的宽度数值
    }

    // 获得屏幕的高度
    public static int getScreenHeight(Context ctx) {
        int screenHeight;
        // 从系统服务中获取窗口管理器
        WindowManager wm = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            // 获取当前屏幕的四周边界
            Rect rect = wm.getCurrentWindowMetrics().getBounds();
            screenHeight = rect.height();
        } else {
            DisplayMetrics dm = new DisplayMetrics();
            // 从默认显示器中获取显示参数保存到dm对象中
            wm.getDefaultDisplay().getMetrics(dm);
            screenHeight = dm.heightPixels;
        }
        return screenHeight; // 返回屏幕的高度数值
    }

}

 

 

 

 

 

 

 

 

 

DateUtil
package com.example.myapplication.util;

import android.annotation.SuppressLint;
import android.text.TextUtils;

import java.text.SimpleDateFormat;
import java.util.Date;

@SuppressLint("SimpleDateFormat")
public class DateUtil {
    // 获取指定格式的日期时间
    public static String getNowDateTime(String formatStr) {
        String format = formatStr;
        if (TextUtils.isEmpty(format)) {
            format = "yyyyMMddHHmmss";
        }
        SimpleDateFormat sdf = new SimpleDateFormat(format);
        return sdf.format(new Date());
    }

    // 获取当前的日期时间
    public static String getNowDateTime() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
        return sdf.format(new Date());
    }

    // 获取当前的时间
    public static String getNowTime() {
        SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
        return sdf.format(new Date());
    }

}

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/288920.html

赞 (0)
0
上一篇 2022年9月12日
下一篇 2022年9月12日

相关推荐

发表回复

登录后才能评论