Android ViewPager之实现轮播广告效果

相信大多数Android开发者在项目中使用到过ViewPager，其实ViewPager在项目开发中使用 的频率是非常高的，比如：首次打开项目的向导界面以及在轮播图中都会使用到ViewPager，那么本篇博客接下来就是记录使用ViewPager来实现轮播图效果。

注：ViewPager存在于 Android Support V4包中。

本博客是对使用ViewPager实现轮播广告效果的封装，大家在开发中如需使用轮播如功能，可在代码中直接引用我定义的view——AutoShowView便可实现轮播广告的效果，如下：

<com.znouy.viewpagerdemo.view.AutoShowView
android:id="@+id/asv"
android:layout_width="match_parent"
android:layout_height="200dp" >
</com.znouy.viewpagerdemo.view.AutoShowView>

以下是分析实现过程。

1、在要使用ViewPager的自定义view中布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<!-- 轮播图 -->

<android.support.v4.view.ViewPager
android:id="@+id/vp_lunbo"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<!-- 文字描述和点的容器点和容器 -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#22000000"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp" >

<TextView
android:id="@+id/tv_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个点的描述"
android:textColor="#ffffff" />

<LinearLayout
android:id="@+id/ll_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

</RelativeLayout>

布局如上，对于点我们在代码中动态添加，但需在xml中定义一个红点和一个白点，白点如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >

<corners android:radius="5dp" />

<solid android:color="#ffffff" />

</shape>

2、创建VewPager的适配器PagerAdapter的子类PicturePagerAdapter

首先要提供ViewPager数据，即图片数据和点数据，代码如下：

private void initImageView() {
for (int i = R.drawable.welcome_1; i < R.drawable.welcome_1 + 4; i++) {
// 创建ImageView容器
ImageView imageView = new ImageView(getContext());

// 设置图片
imageView.setImageResource(i);
imageView.setScaleType(ScaleType.FIT_XY);// 图片填充容器
datas.add(imageView);// 添加到集合中
}
}

private void initPoints() {
// 因为每次页面改变都会调用该方法，所以进入该方法时先清空集合。
ll_points.removeAllViews();

for (int i = 0; i < datas.size(); i++) {
View view = new View(getContext());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
10, 10);
if (i == selectIndex) {
tv_desc.setText("图片" + i + "的描述");
view.setBackgroundResource(R.drawable.point_red);
} else {
view.setBackgroundResource(R.drawable.point_white);
}
params.leftMargin = 10;
view.setLayoutParams(params);// 设置布局参数
ll_points.addView(view);// 添加到点的容器中
}
}

接着创建PicturePagerAdapter，将数据提供给适配器

public class PicturePagerAdapter extends PagerAdapter {
private static final String tag = "PicturePagerAdapter";
List<ImageView> list;

public PicturePagerAdapter(List<ImageView> imageViews) {
this.list = imageViews;

}

@Override
public int getCount() {
// 确定要显示的数据量

return Integer.MAX_VALUE;// 无限轮播
}

@Override
public boolean isViewFromObject(View view, Object object) {
// 判断当前要显示的view是否等于标记object,true则显示
return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % list.size();
Log.d(tag, "instantiateItem==" + position);
// 无限轮播-因为position的值从0~Integer.MAX_VALUE
View view = list.get(position);
// 添加view到VIewPager中
container.addView(view);
return view;

}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// 从容器中移除view
Log.d(tag, "destroyItem==" + position);
container.removeView((View) object);
}

}

注意上面适配器的代码，为了实现轮播图的无限轮播，就需保证getCount()返回的数据足够大，

@Override
public int getCount() {
// 确定要显示的数据量
return Integer.MAX_VALUE;// 无限轮播
}

还有就是当现实到viewpager的最后一张图片，就要调用viewpager控件的setCurrentItem(10000 - 10000 % datas.size())方法将viewpager显示第一张图，代码是在给viewpager设置适配器后，如下：

vp_lunbo.setAdapter(adapter);
// 设置ViewPager当前选中的位置,会调用instantiateItem，最终会选中item0
// 原理：一个数减去其余数后肯定能被除数整除
vp_lunbo.setCurrentItem(10000 - 10000 % datas.size());

3、实现实现轮播图自动轮播

要实现轮播图自动轮播，首先需创建一个Runnable接口的子类，代码如下：

/** 实现轮播图自动轮播 */

class AutoScrollTask implements Runnable {

@Override
public void run() {
int currentItem = vp_lunbo.getCurrentItem();
currentItem++;
vp_lunbo.setCurrentItem(currentItem);
start();
}

/**
* 开始轮播
*/
public void start() {
handler.postDelayed(this, 2000);
}

/**
* 停止轮播
*/
public void stop() {
handler.removeCallbacks(this);
}
}

然后再给viewpager设置触摸监听器，实现触摸停止轮播，松开又可以自动轮播了

// viewpager 注册触摸事件监听器，实现自动轮播
vp_lunbo.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:// 按下停止轮播
autoScrollTask.stop();
break;
case MotionEvent.ACTION_MOVE:

break;
case MotionEvent.ACTION_UP:// 松开，取消 开始轮播
case MotionEvent.ACTION_CANCEL:
autoScrollTask.start();
break;

default:
break;
}
return false;// 不会影响其他view的事件分发
}
});

4、如何使用自定义的轮播图视图View

只需在需要使用该轮播图视图View的activity中进行布局即可，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<com.znouy.viewpagerdemo.view.AutoShowView
android:id="@+id/asv"
android:layout_width="match_parent"
android:layout_height="200dp" >
</com.znouy.viewpagerdemo.view.AutoShowView>

</RelativeLayout>

这样在以后开发中，如需使用轮播图效果，直接在activity多对应的布局引用即可，是不是极大的减轻你开发的工作量了。

以上只是部分代码，有兴趣的请点击此处下载。