安卓中ViewPager控件的使用

来源：互联网发布：java 统一异常处理编辑：程序博客网时间：2024/06/05 04:00

ViewPaper简介

ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view。
1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

ViewPaper的使用步骤

①找到ViewPager的全路径
- 工程目录->Android Private Libraries ->v4.jar->v4.view包->ViewPager.class->copy qualified name。将其粘贴到布局文件中。

<android.support.v4.view.ViewPager        android:id="@+id/vp_guide"        android:layout_width="match_parent"        android:layout_height="match_parent" />

②准备数据

//图片数组    private int[] Images = new int[] { R.drawable.guide_1, R.drawable.guide_2,            R.drawable.guide_3 };    //存放ImageView对象    private ArrayList<ImageView> imageLists = new ArrayList<ImageView>();

初始化数据

// 初始化数据    private void initDate() {        ImageView mImage;        for (int i = 0; i < Images.length; i++) {            mImage = new ImageView(this);            mImage.setBackgroundResource(Images[i]);// 能让图片宽高适应屏幕            // mImage.setImageResource(resId);            //将ImageView对象加到集合中            imageLists.add(mImage);    }

③定义ViewPager的适配器

/**     * ViewPager的适配器     *      * @author Administrator     *      */    class MyVpAdapter extends PagerAdapter {        //返回数据个数        @Override        public int getCount() {            return imageLists.size();        }        //用来判断pager的一个view是否和instantiateItem方法返回的object有关联        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            //固定写法            return arg0 == arg1;        }        // 销毁item        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            //固定写法            container.removeView((View) object);        }        // 初始化item布局        @Override        public Object instantiateItem(ViewGroup container, int position) {            ImageView imageView = imageLists.get(position);            container.addView(imageView);            return imageView;        }    }}

④找到控件，设置适配器

vp_guide = (ViewPager) findViewById(R.id.vp_guide);        //设置适配器        vp_guide.setAdapter(new MyVpAdapter());

经过了以上步骤，ViewPager的各个页面就可以自由左右滑动了。
这里写图片描述

页面指示器小红点的开发

指示器开发的原理是定义三个小灰点和一个小红点，当滑动时让小红点跟着移动，覆盖小黑点。

①三个小灰点和一个小红点的摆放

 <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/btn_start"        android:layout_centerHorizontal="true"        android:layout_marginTop="10dp" >        <LinearLayout            android:id="@+id/ll_container"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:orientation="horizontal" >        </LinearLayout>        <ImageView            android:id="@+id/iv_redPoint"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/point_red" />    </RelativeLayout>

小红点和小黑点定义的xml文件如下：
- 小红点：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <size        android:height="10dp"        android:width="10dp" />    <solid android:color="#f00" /></shape>

小灰点：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <size        android:height="10dp"        android:width="10dp" />    <solid android:color="#cccccc" /></shape>

②让小灰点之间的间距变宽

            // 设置图片小圆点            iv_point = new ImageView(this);            //设置图片形状    iv_point.setImageResource(R.drawable.point_gray); // 初始化布局参数，宽高包裹内容，父控件是谁，就是谁声明的布局参数            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                    LinearLayout.LayoutParams.WRAP_CONTENT,// 从第二个圆点开始设置边距            if (i > 0) {                params.leftMargin = 10;             }            // 设置参数给小圆点            iv_point.setLayoutParams(params);             // 加载小圆点            ll_container.addView(iv_point);

③设置ViewPager的监听事件，让小红点跟随移动。
1）小红点移动距离的算法，因为控件的摆放是由measure->layout->draw(Activity的onCreate方法执行后)三步组成，必须在layout方法执行完后才能确定控件的距离，所以需要对layout方法进行监听。

// 监听layout方法执行的事件，待其结束后再取小圆点之间的距离。        iv_redPoint.getViewTreeObserver().addOnGlobalLayoutListener(                new OnGlobalLayoutListener() {                    @Override                    public void onGlobalLayout() {                        // layout方法执行结束后回调                        // 移除监听，避免重复调用                        iv_redPoint.getViewTreeObserver()                                .removeGlobalOnLayoutListener(this);                        // iv_redPoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);            // 计算两个圆点之间的距离            // 距离 = 第二个圆点左边值 - 第一个圆点左边值            // measure->layout->draw(Activity的onCreate方法执行后)mPointDis = ll_container.getChildAt(1).getLeft()- ll_container.getChildAt(0).getLeft();                    }                });

    2）得到距离后，要根据ViewPager的滑动来移动小红点。// ViewPager的滑动监听        vp_guide.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                // 某个页面被选中时回调            }            @Override            public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {                // 当页面滑动过程中的回调                int leftMargin = (int) (mPointDis * positionOffset) + position* mPointDis;                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) iv_redPoint                params.leftMargin = leftMargin;                iv_redPoint.setLayoutParams(params);            }            @Override            public void onPageScrollStateChanged(int state) {                // 页面状态发生变化时回调            }        });

这样，页面指示器小红点就开发成功了。

源码

0 0