Android Studio App开发之翻页视图ViewPager的讲解及实战（附源码包括翻页视图和翻页标签栏）

朱雀 2023-09-30 16:36 4阅读 0赞

> **需要源码或图片集请点赞关注收藏后评论区留言~~~**

## 一、翻页视图ViewPager ##

为了实现左右滑动的翻页功能，Android提供了相应的控件，翻页视图ViewPager，对于它来说，一个页面就是一个项，许多个页面组成了ViewPager的页面项。既然明确了翻页视图的基本原理类似列表视图和网格视图，那么它们的用法也很类似，翻页视图则使用翻页适配器PagerAdapter。下面是它三个常用方法的说明

> 1：setAdapter 设置页面项的适配器
> 
> 2：setCurrentItem 设置当前页码
> 
> 3：addOnPageChangeListener 添加翻页视图的页面变更监听器

由于翻页视图包含了多个页面项，因此要借助翻页适配器展示每个页面，翻页适配器的原来与基本适配器类似，主要实现以下六个方法

> 1：构造方法 指定适配器需要处理的数据集合
> 
> 2：getCount 获取页面项的个数
> 
> 3：isViewFromObject 判断当前视图是否来自指定对象
> 
> 4：instantiateItem 实例化指定位置的页面
> 
> 5：destoryItem 从容器中销毁指定位置的页面
> 
> 6：getPageTitle 获得指定页面的标题文本

实战效果如下

![ed2842272df6442bad63625d453909f4.png][]

![bb64b67e1a7a4991a5bd69b72ceb582d.png][]

![5beebd41994645c0854f0abe5a0bd352.png][]

![0fd8e3b988324ba080c41953ac10422a.png][]

### Java类代码 ###

package com.example.chapter08;
    
    import android.os.Bundle;
    import android.widget.Toast;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.ViewPager;
    import androidx.viewpager.widget.ViewPager.OnPageChangeListener;
    
    import com.example.chapter08.adapter.ImagePagerAdapater;
    import com.example.chapter08.bean.GoodsInfo;
    
    import java.util.List;
    
    public class ViewPagerActivity extends AppCompatActivity implements OnPageChangeListener {
        private List<GoodsInfo> mGoodsList; // 手机商品列表
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_view_pager);
            mGoodsList = GoodsInfo.getDefaultList();
            // 构建一个商品图片的翻页适配器
            ImagePagerAdapater adapter = new ImagePagerAdapater(this, mGoodsList);
            // 从布局视图中获取名叫vp_content的翻页视图
            ViewPager vp_content = findViewById(R.id.vp_content);
            vp_content.setAdapter(adapter); // 设置翻页视图的适配器
            vp_content.setCurrentItem(0); // 设置翻页视图显示第一页
            vp_content.addOnPageChangeListener(this); // 给翻页视图添加页面变更监听器
    //        // 给翻页视图添加简化版的页面变更监听器
    //        vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    //            @Override
    //            public void onPageSelected(int position) {
    //                Toast.makeText(ViewPagerActivity.this, "您翻到的手机品牌是："
    //                        + mGoodsList.get(position).name, Toast.LENGTH_SHORT).show();
    //            }
    //        });
        }
    
        // 翻页状态改变时触发。state取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕
        // 在翻页过程中，状态值变化依次为：正在滑动→滑动完毕→静止
        public void onPageScrollStateChanged(int state) {}
    
        // 在翻页过程中触发。该方法的三个参数取值说明为 ：第一个参数表示当前页面的序号
        // 第二个参数表示页面偏移的百分比，取值为0到1；第三个参数表示页面的偏移距离
        public void onPageScrolled(int position, float ratio, int offset) {}
    
        // 在翻页结束后触发。position表示当前滑到了哪一个页面
        public void onPageSelected(int position) {
            Toast.makeText(this, "您翻到的手机品牌是：" + mGoodsList.get(position).name, Toast.LENGTH_SHORT).show();
        }
    }

### 适配器代码 ###

package com.example.chapter08.adapter;
    
    import android.content.Context;
    import android.view.View;
    import android.view.ViewGroup;
    import android.view.ViewGroup.LayoutParams;
    import android.widget.ImageView;
    import android.widget.ImageView.ScaleType;
    
    import androidx.viewpager.widget.PagerAdapter;
    
    import com.example.chapter08.bean.GoodsInfo;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class ImagePagerAdapater extends PagerAdapter {
        // 声明一个图像视图列表
        private List<ImageView> mViewList = new ArrayList<ImageView>();
        // 声明一个商品信息列表
        private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>();
    
        // 图像翻页适配器的构造方法，传入上下文与商品信息列表
        public ImagePagerAdapater(Context context, List<GoodsInfo> goodsList) {
            mGoodsList = goodsList;
            // 给每个商品分配一个专用的图像视图
            for (int i = 0; i < mGoodsList.size(); i++) {
                ImageView view = new ImageView(context); // 创建一个图像视图对象
                view.setLayoutParams(new LayoutParams(
                        LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
                view.setImageResource(mGoodsList.get(i).pic);
                mViewList.add(view); // 把该商品的图像视图添加到图像视图列表
            }
        }
    
        // 获取页面项的个数
        public int getCount() {
            return mViewList.size();
        }
    
        // 判断当前视图是否来自指定对象
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        // 从容器中销毁指定位置的页面
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));
        }
    
        // 实例化指定位置的页面，并将其添加到容器中
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }
    
        // 获得指定页面的标题文本
        public CharSequence getPageTitle(int position) {
            return mGoodsList.get(position).name;
        }
    
    }

### XML文件 ###

## 二、翻页标签栏PagerTabStrip ##

尽管翻页视图实现了左右滑动，可是没滑动的时候看不出这是一个翻页视图，而且也不知道当前滑到了哪个页面，为此Android提供了翻页标签栏PagerTabStrip，它能够在翻页视图上方显示页面标题，从而方便用户的浏览操作 效果如下

可见上方有相应的标签栏提示

![40398b3d01ec4c5caa52718d1a499181.png][]

![56858c2c593746dcad945326e2b18710.png][]

![4e5ed2354e8148749a4ee7df07031400.png][]

### Java类代码 ###

package com.example.chapter08.adapter;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.ViewGroup;
    import android.view.ViewGroup.LayoutParams;
    import android.widget.Button;
    import android.widget.ImageView;
    import android.widget.RadioButton;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    
    import androidx.viewpager.widget.PagerAdapter;
    
    import com.example.chapter08.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class LaunchSimpleAdapter extends PagerAdapter {
        private List<View> mViewList = new ArrayList<View>(); // 声明一个引导页的视图列表
    
        // 引导页适配器的构造方法，传入上下文与图片数组
        public LaunchSimpleAdapter(final Context context, int[] imageArray) {
            for (int i = 0; i < imageArray.length; i++) {
                // 根据布局文件item_launch.xml生成视图对象
                View view = LayoutInflater.from(context).inflate(R.layout.item_launch, null);
                ImageView iv_launch = view.findViewById(R.id.iv_launch);
                RadioGroup rg_indicate = view.findViewById(R.id.rg_indicate);
                Button btn_start = view.findViewById(R.id.btn_start);
                iv_launch.setImageResource(imageArray[i]); // 设置引导页的全屏图片
                // 每个页面都分配一个对应的单选按钮
                for (int j = 0; j < imageArray.length; j++) {
                    RadioButton radio = new RadioButton(context); // 创建一个单选按钮
                    radio.setLayoutParams(new LayoutParams(
                            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                    radio.setButtonDrawable(R.drawable.launch_guide); // 设置单选按钮的图标
                    radio.setPadding(10, 10, 10, 10); // 设置单选按钮的四周间距
                    rg_indicate.addView(radio); // 把单选按钮添加到页面底部的单选组
                }
                // 当前位置的单选按钮要高亮显示，比如第二个引导页就高亮第二个单选按钮
                ((RadioButton) rg_indicate.getChildAt(i)).setChecked(true);
                // 如果是最后一个引导页，则显示入口按钮，以便用户点击按钮进入主页
                if (i == imageArray.length - 1) {
                    btn_start.setVisibility(View.VISIBLE);
                    btn_start.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            // 这里要跳到应用主页
                            Toast.makeText(context, "欢迎您开启美好生活",
                                    Toast.LENGTH_SHORT).show();
                        }
                    });
                }
                mViewList.add(view); // 把该图片对应的页面添加到引导页的视图列表
            }
        }
    
        // 获取页面项的个数
        public int getCount() {
            return mViewList.size();
        }
    
        // 判断当前视图是否来自指定对象
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        // 从容器中销毁指定位置的页面
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViewList.get(position));
        }
    
        // 实例化指定位置的页面，并将其添加到容器中
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViewList.get(position));
            return mViewList.get(position);
        }
    }

### XML文件 ###

**创作不易 觉得有帮助请点赞关注收藏~~~**

[ed2842272df6442bad63625d453909f4.png]: https://img-blog.csdnimg.cn/ed2842272df6442bad63625d453909f4.png
[bb64b67e1a7a4991a5bd69b72ceb582d.png]: https://img-blog.csdnimg.cn/bb64b67e1a7a4991a5bd69b72ceb582d.png
[5beebd41994645c0854f0abe5a0bd352.png]: https://img-blog.csdnimg.cn/5beebd41994645c0854f0abe5a0bd352.png
[0fd8e3b988324ba080c41953ac10422a.png]: https://img-blog.csdnimg.cn/0fd8e3b988324ba080c41953ac10422a.png
[40398b3d01ec4c5caa52718d1a499181.png]: https://img-blog.csdnimg.cn/40398b3d01ec4c5caa52718d1a499181.png
[56858c2c593746dcad945326e2b18710.png]: https://img-blog.csdnimg.cn/56858c2c593746dcad945326e2b18710.png
[4e5ed2354e8148749a4ee7df07031400.png]: https://img-blog.csdnimg.cn/4e5ed2354e8148749a4ee7df07031400.png