Android ViewPager 几种开发案例的使用

一. 带有小圆点的无限轮播广告

// 准备显示的图片集合
mList = new ArrayList<>();
    for (int i = 0; i < mImages.length; i++) {
    ImageView imageView = new ImageView(this);
    // 将图片设置到ImageView控件上
    imageView.setImageResource(mImages[i]);

    // 将ImageView控件添加到集合
    mList.add(imageView);

    // 制作底部小圆点
    ImageView pointImage = new ImageView(this);
    pointImage.setImageResource(R.drawable.shape_point_selector);

    // 设置小圆点的布局参数
    int PointSize = getResources().getDimensionPixelSize(R.dimen.point_size);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(PointSize, PointSize);

    if (i > 0) {
        params.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin);
        pointImage.setSelected(false);
    } else {
        pointImage.setSelected(true);
    }
    pointImage.setLayoutParams(params);
    // 添加到容器里
    pointGroup.addView(pointImage);
}

实现滚动时,小圆点同步更新

// 对ViewPager设置滑动监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    int lastPosition;
    @Override
    public void onPageSelected(int position) {
        // 页面被选中

        // 修改position
        position = position % mList.size();

        // 设置当前页面选中
        pointGroup.getChildAt(position).setSelected(true);
        // 设置前一页不选中
        pointGroup.getChildAt(lastPosition).setSelected(false);

        // 替换位置
        lastPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
})

实现自动轮播

mHandler.postDelayed(new Runnable() {
    @Override
    public void run() {
        int currentPosition = viewPager.getCurrentItem();

        if(currentPosition == viewPager.getAdapter().getCount() - 1){
            // 最后一页
            viewPager.setCurrentItem(0);
        }else{
            viewPager.setCurrentItem(currentPosition + 1);
        }

        // 一直给自己发消息
        mHandler.postDelayed(this,3000);
    }
},3000);

然后后面就是适配器,getCount为最大实现无限轮播

private class MyAdapter extends PagerAdapter {
    @Override
    public int getCount() {
        // 返回整数的最大值
        return Integer.MAX_VALUE;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // return super.instantiateItem(container, position);
        // 修改position
        position = position % mList.size();
        // 将图片控件添加到容器
        container.addView(mList.get(position));

        // 返回
        return mList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //super.destroyItem(container, position, object);
        container.removeView((View) object);
    }
}

二 广告引导页

    

逻辑分析：看效果图可以知道，白点是浮动在上面的，也就是说，底下灰点是背景，上面白点随着页面的偏移而偏移。那就可以这样设计，灰点用LinearLayout包裹 ，白点用ImageView或View包裹并且浮在LinearLayout上面，在填充图片的时候初始化这两种类型的点，然后监听ViewPager页面的滑动，动态的设置白点的位置。

白点的位置分析：监听ViewPager的滑动，我们会得到一个页面的偏移百分比，有了百分比，我们还差一个白点之间的距离，他俩相乘后累加就会得到白点随着页面滑动的移动轨迹，那我们现在还缺白点之间的距离。白点之间的距离可以在布局完成之后用第二个点的左边距减去第一个点的左边距得到，所以需要的数据就基本分析出来了。

 for (int i = 0; i < mIcons.length; i++) {
      // 设置底部小圆点
      ImageView point = new ImageView(this);
      point.setImageResource(R.drawable.shape_point_normal);

      // 设置白点的布局参数
      int pointSize = getResources().getDimensionPixelSize(R.dimen.point_size);
      RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(pointSize, pointSize);
  	
      mWhitePoint.setLayoutParams(params1);

      // 设置灰色点的布局参数
      LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(pointSize, pointSize);
      if (i > 0) {
          params2.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin);
      }

      point.setLayoutParams(params2);

  	// 灰点添加到容器
      mPointGroup.addView(point);
  }

// 获取视图树对象，通过监听白点布局的显示，然后获取两个圆点之间的距离
mWhitePoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 此时layout布局已经显示出来了，可以获取小圆点之间的距离了
        mPointMargin = mPointGroup.getChildAt(1).getLeft() - mPointGroup.getChildAt(0).getLeft();

        // 将自己移除掉
        mWhitePoint.getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }
});

监听ViewPager的滑动，在onPageScrolled方法中动态修改白点的左边距，(注意positionOffset参数是偏移百分率)这样白点就会随着页面的滑动而移动

/**
 * 对View Pager添加监听
 */
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 页面滑动的时候，动态的获取小圆点的左边距
        int leftMargin = (int) (mPointMargin * (position + positionOffset));
        // Log.d("GuideActivity", "leftMargin:" + leftMargin);

        // 获取布局参数，然后设置布局参数
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mWhitePoint.getLayoutParams();
        // 修改参数
        params.leftMargin = leftMargin;
        // 重新设置布局参数
        mWhitePoint.setLayoutParams(params);
    }

    @Override
    public void onPageSelected(int position) {

      
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

查看Demo