ViewPager android 不显示页面 安卓viewpager

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) {
                // 页面状态发生变化时回调
            }
        });

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

源码