Android——引导页ViewPager的使用

分手后的思念是犯贱 2022-06-06 06:11 257阅读 0赞

## Android——引导页ViewPager的使用 ##

前言：ViewPager（android.support.v4.view.ViewPager）是android扩展包v4包中的类，这个类可以让用户左右切换当前的view，实现滑动切换的效果。ViewPager最常用于三个场景，分别是应用的新手引导页，广告轮播控件，和Fragment结合做应用内的标签页。

效果图：

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

**1、引导页布局文件activity\_guide.xml：**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v4.view.ViewPager
            android:id="@+id/guide_vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    
        <LinearLayout
            android:id="@+id/guide_ll_point"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="40dp"
            android:gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
        </LinearLayout>
    
        <ImageButton
            android:id="@+id/guide_ib_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_above="@+id/guide_ll_point"
            android:src="@mipmap/enter_app"
            android:background="@null"
            android:visibility="gone"/>
    
    </RelativeLayout>

**2、引导页适配器GuidePageAdapter.java**

public class GuidePageAdapter extends PagerAdapter {
        
    
        private List<View> viewList;
    
        public GuidePageAdapter(List<View> viewList) {
            this.viewList = viewList;
        }
    
        /**
         * 返回页面的个数
         * @return
         */
        @Override
        public int getCount() {
            if (viewList != null) {
                return viewList.size();
            }
            return 0;
        }
    
        /**
         * 判断对象是否生成界面
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        /**
         * 初始化position位置的页面
         * @param container
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(viewList.get(position));
            return viewList.get(position);
        }
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(viewList.get(position));
        }
    }

**3、引导页Activity**

public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
        
    
        private ViewPager vp;
        private int[] imageIdArray;//图片资源的数组
        private List<View> viewList;//图片资源的集合
        private ViewGroup vg;//放置圆点
    
        private ImageView iv_point;
        private ImageView[] ivPointArray;
    
        private ImageButton ib_start;//进入首页的ImageButton
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_guide);
    
            ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
            ib_start.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Intent intent = new Intent(GuideActivity.this,MainActivity.class);
                    startActivity(intent);
                    finish();
                }
            });
    
            //加载ViewPager
            initViewPager();
    
            //加载底部圆点
            initPoint();
    
            vg.getChildAt(0).setBackgroundResource(R.mipmap.full_holo);
        }
    
        /**
         * 加载底部圆点
         */
        private void initPoint() {
            //这里实例化LinearLayout
            vg = (ViewGroup) findViewById(R.id.guide_ll_point);
            //根据viewpager的item数量实例化数组
            ivPointArray = new ImageView[viewList.size()];
            //循环新建底部圆点imageview，将生成的imageview保存到数组中
            int size = viewList.size();
            for (int i = 0; i < size; i++) {
                iv_point = new ImageView(this);
                iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));
                iv_point.setPadding(30,0,30,0);//left,top,right,bottom
                ivPointArray[i] = iv_point;
                //第一个页面需要设置为选中状态，这里采用两张不同的图片
                if (i == 0) {
                    iv_point.setImageResource(R.mipmap.full_holo);
                } else {
                    iv_point.setImageResource(R.mipmap.empty_holl);
                }
                //将数组中的imageView加到viewGroup
                vg.addView(ivPointArray[i]);
            }
        }
    
        /**
         * 加载图片ViewPager
         */
        private void initViewPager() {
            vp = (ViewPager) findViewById(R.id.guide_vp);
            //实例化图片资源
            imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
            viewList = new ArrayList<>();
            //获取一个Layout参数，设置为全屏
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
            //循环创建View并加入到集合中
            int len = imageIdArray.length;
            for (int i = 0; i < len; i++) {
                //new ImageView并设置全屏和图片资源
                ImageView imageView = new ImageView(this);
                imageView.setLayoutParams(params);
                imageView.setBackgroundResource(imageIdArray[i]);
    
                //将ImageView加入到集合中
                viewList.add(imageView);
            }
            //view集合初始化好后，设置Adapter
            vp.setAdapter(new GuidePageAdapter(viewList));
            //设置滑动监听
            vp.setOnPageChangeListener(this);
        }
    
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
        }
    
        /**
         * 滑动后的监听
         * @param position
         */
        @Override
        public void onPageSelected(int position) {
            //循环设置当前页的标记图标
            int length = imageIdArray.length;
            for (int i = 0; i < length; i++) {
                if (i == position) {
                    vg.getChildAt(position).setBackgroundResource(R.mipmap.full_holo);
                } else {
                    vg.getChildAt(i).setBackgroundResource(R.mipmap.empty_holl);
                }
            }
    
            //判断是否是最后一页
            if (position == imageIdArray.length - 1) {
                ib_start.setVisibility(View.VISIBLE);
            } else {
                ib_start.setVisibility(View.GONE);
            }
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    }

[SouthEast]: /images/20220606/1d33adc7223949338798e2421ba7bbdc.png
[SouthEast 1]: /images/20220606/7e58267983754987a33d25a1f7dc3df1.png
[SouthEast 2]: /images/20220606/e7862dcb168a450eae544602057a112d.png