翻页视图 ViewPager

1. 创建一个activity，命名为：ViewPagerActivity，如下：

public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private static final String TAG  = "ViewPagerActivity";
    private ArrayList<GoodsInfo> goodsList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        goodsList = GoodsInfo.getDefaultList();
        ImagePagerAdapter adapter = new ImagePagerAdapter(this, goodsList);
        ViewPager vp_content = findViewById(R.id.vp_content);
        vp_content.setAdapter(adapter);
        vp_content.setCurrentItem(0);
        vp_content.addOnPageChangeListener(this);
    }

    /**
     * 在翻页过程中触发
     * @param position 当前页面的序号
     * @param positionOffset 当前页面偏移的百分比,取值为0到1；
     * @param positionOffsetPixels 当前页面的偏移距离
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.d(TAG, "onPageScrolled: position = " + position + " positionOffset = " + positionOffset + " positionOffsetPixels = " + positionOffsetPixels);
    }

    /**
     * 在翻页结束后触发
     * @param position 表示当前滑到了哪一个页面
     */
    @Override
    public void onPageSelected(int position) {
        Log.d(TAG, "onPageSelected: position = " + position);
        ToastUtil.showToast(this, "您翻到的手机品牌是：" + goodsList.get(position).name);
    }

    /**
     * 翻页状态改变时触发
     * @param state 取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕  在翻页过程中，状态值变化依次为：正在滑动→滑动完毕→静止
     */
    @Override
    public void onPageScrollStateChanged(int state) {
        Log.d(TAG, "onPageScrollStateChanged: state = " + state);
    }
}

2. ViewPagerActivity 对应的布局文件为：activity_view_pager，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="400dp" />

</LinearLayout>

3. ViewPagerActivity 对应的适配器为：ImagePagerAdapter，继承于PagerAdapter，如下：

public class ImagePagerAdapter extends PagerAdapter {
    private Context mContext;
    private ArrayList<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>();
    private ArrayList<ImageView> mViewList = new ArrayList<ImageView>();

    public ImagePagerAdapter(Context mContext, ArrayList<GoodsInfo> mGoodsList) {
        this.mContext = mContext;
        this.mGoodsList = mGoodsList;
        for (int i = 0; i < mGoodsList.size(); i ++) {
            ImageView view = new ImageView(mContext);
            view.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            view.setImageResource(mGoodsList.get(i).pic);
            view.setScaleType(ImageView.ScaleType.FIT_CENTER);
            mViewList.add(view);
        }
    }

    @Override
    public int getCount() {
        return mViewList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }

    // 从容器中销毁指定位置的页面
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(mViewList.get(position));
    }

    // 实例化指定位置的页面，并将其添加到容器中
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

    // 获得指定页面的标题文本
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mGoodsList.get(position).name;
    }
}

4. ImagePagerAdapter 用到的模型是GoodsInfo，如下

public class GoodsInfo {
    public long rowId; // 行号
    public int xuHao; // 序号
    public String name;
    public String desc;
    public float price;
    public String thumb_path; // 小图的保存路径
    public String pic_path; // 大图的保存路径
    public int thumb;
    public int pic;
    public int count;

    public GoodsInfo() {
        rowId = 0L;
        xuHao = 0;
        name = "";
        desc = "";
        price = 0f;
        thumb_path = "";
        pic_path = "";
        thumb = 0;
        pic = 0;
        count = 0;
    }

    private static String[] mNameArr = {
            "iPhone8", "Mate10", "小米6", "OPPO R11", "vivo X9S", "魅族Pro6S"
    };

    private static String[] mDescArr = {
            "Apple iPhone 8 256GB 玫瑰金色 移动联通电信4G手机",
            "华为 HUAWEI Mate10 6GB+128GB 全网通（香槟金）",
            "小米 MI6 全网通版 6GB+128GB 亮白色",
            "OPPO R11 4G+64G 全网通4G智能手机 玫瑰金",
            "vivo X9s 4GB+64GB 全网通4G拍照手机 玫瑰金",
            "魅族 PRO6S 4GB+64GB 全网通公开版 星空黑 移动联通电信4G手机"
    };

    // 声明一个手机商品的价格数组
    private static float[] mPriceArr = {6888, 3999, 2999, 2899, 2698, 2098};

    private static int[] mCountArr = {1, 5, 3, 2, 4, 2};

    // 声明一个手机商品的小图数组
    private static int[] mThumbArr = {
            R.drawable.iphone_s, R.drawable.huawei_s, R.drawable.xiaomi_s,
            R.drawable.oppo_s, R.drawable.vivo_s, R.drawable.meizu_s
    };

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

    // 获取默认的手机信息列表
    public static ArrayList<GoodsInfo> getDefaultList() {
        ArrayList<GoodsInfo> goodsList = new ArrayList<GoodsInfo>();
        for (int i = 0; i < mNameArr.length; i++) {
            GoodsInfo info = new GoodsInfo();
            info.name = mNameArr[i];
            info.desc = mDescArr[i];
            info.price = mPriceArr[i];
            info.thumb = mThumbArr[i];
            info.pic = mPicArr[i];
            info.count = mCountArr[i];
            goodsList.add(info);
        }
        return goodsList;
    }
}

5. 效果图如下：