使用ViewPager实现广告轮播图效果

1、杂谈

作为一名始终走在it路上的菜鸟，走上Android这条路有 很长一段时间了，但是总是感觉自己太笨，技术总是会了新的就忘了旧的……以前总是喜欢看别人写博客，自己不太喜欢动手写，因为最近都有在学别的知识和技术，害怕自己弄混乱，同时也为了巩固Android，（不能丢了吃饭的家伙不是）。。。从这篇开始走上博客之路啦

我始终相信：努力一定是有回报的，好奇心很重要，三分钟热度和懒惰以及“明日复明日”的想法不可要……<

2、概述及思路

（1）概述

现在接触到的好多项目都有轮播图效果，也有很多不同的实现方式，在这里记录一下自己的实现之路

所要实现的效果：

- 添加图片（这里不从网络取了）

- 轮播图上添加点

- 实现轮播图的自动跳转

嗯，虽然可能实现起来比较简单，但是技术不都是从简单开始的么，罗马不是一天建成的。。。。

（2）思路

轮播图实现肯定是离不开viewpager的，根据现在的需求，需要添加图片，同时我们需要添加点，并且点的数目要和图片的数目刚好相等，虽然viewpager本身就有滑动效果，但是我们需要的是它自动跳转，所以这里我用handler发送延迟消息来实现，最后要解决事件分发的滑动冲突问题

3、代码实现

一、主界面（我是在fragment中写的）

（1）布局（部分代码）

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:padding="10dp"
>

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

<LinearLayout
android:id="@+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:orientation="horizontal"
android:paddingBottom="7dp"
>
</LinearLayout>

</RelativeLayout>

（2）初始化布局

//放轮播图片
private int[]           imageUrls = {R.mipmap.pic1,R.mipmap.run,R.mipmap.yundong};
//放轮播图片的ImageView 的 list
public  List<ImageView> imageViewsList;
//放圆点的View的list
public  List<View>      dotList;
private ViewPager mHeadViewPager;
//用来布局点的（水平）
private LinearLayout mContainer;

//首先需要拿到我们需要的控件
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {

initToolbar(view);
//这用来进行viewpager的操作
initHeadVp(view);

//TODO   需要从服务器拿数据,这里先用假的数据
initViewPagerData();

//在这个方法中进行点布局
initUI();
}

（3）

public void initViewPagerData() {
imageViewsList = new ArrayList<ImageView>();
dotList=new ArrayList<View>();

//TODO 异步任务获取图片（预留）
}

（4）initUi，在这个方法中，我用来去判断图片的个数，然后去new 相同个数的点（dotView ）

private void initUI() {

if (imageUrls == null || imageUrls.length == 0)
return;

//热点个数与图片个数相等
for (int i = 0; i < imageUrls.length; i++) {
ImageView view = new ImageView(getContext());
view.setTag(imageUrls[i]);
view.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageViewsList.add(view);

ImageView dotView = new ImageView(getContext());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);

//点与点之间的间距
params.leftMargin = 4;
params.rightMargin = 4;
//将点添加进  LinearLayout中
mContainer.addView(dotView,params);
dotList.add(dotView);
}

mHeadViewPager.setFocusable(true);

//给vp添加适配器，将图片，imageview集合作为参数传递
mHeadViewPager.setAdapter(new HeadViewPagerAdapter(imageUrls, imageViewsList, getActivity()));
//给vp设置当前位置
mHeadViewPager.setCurrentItem(imageViewsList.size() * 10000);
//在这里我用了监听，监听vp的page变化，当page变化时，我们的点的背景也要不同
mHeadViewPager.setOnPageChangeListener(new HeadViewPagerChangeListener(imageViewsList, dotList));

//延时2秒更新广告条的消息
mHandler.sendEmptyMessageDelayed(0,3000);
}

（5）适配器 HeadViewPagerAdapter

public class HeadViewPagerAdapter extends PagerAdapter {

public static int             pos;
private       int[]           imageUrls;
private       List<ImageView> imageViewsList;
private       Context         mContext;

public HeadViewPagerAdapter(int[] imageUrls, List<ImageView> imageViewsList, Context context) {
this.imageUrls = imageUrls;
this.imageViewsList = imageViewsList;
this.mContext = context;
}

@Override
public int getCount() {
//这里使用integer的最大值
return Integer.MAX_VALUE;
}

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

@Override
public Object instantiateItem(ViewGroup container, int position) {

//因为我们设置的position在0-imageViewsList.size() * 1
a348
0000之间，取余可以实现在0-imageViewsList.size() -1之间
pos = position % imageViewsList.size();
ImageView imageView = imageViewsList.get(pos);
//这是加载图片的开源        Picasso.with(context).load((imageUrls[pos]).getAdvImg()).into(imageView);
imageView.setImageResource(imageUrls[pos]);
((ViewPager)container).addView(imageView);
return imageViewsList.get(pos);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
pos = position % imageViewsList.size();
((ViewPager)container).removeView(imageViewsList.get(pos));
}
}

（6）HeadViewPagerChangeListener

在这里实现点的移动

public class HeadViewPagerChangeListener implements ViewPager.OnPageChangeListener{

private List<ImageView> mImageViewList;
public int mPreviousPos;//上一个页面位置
private List<View> dotList;

public HeadViewPagerChangeListener(List<ImageView> imageViewsList, List<View> dotList) {
this.mImageViewList = imageViewsList;
this.dotList = dotList;
}

//这里主要的方法
@Override
public void onPageSelected(int position) {

int pos = position % mImageViewList.size();
for (int i = 0;i<dotList.size();i++){
if (i == pos){
dotList.get(pos).setBackgroundResource(R.mipmap.hint_point_enable);
}else{
dotList.get(i).setBackgroundResource(R.mipmap.hint_point);
}
}

//更新上一个页面位置
mPreviousPos = pos;

}

（7 )自动跳转

这里是实现自动跳转的最主要代码

private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {

int currentItem = mHeadViewPager.getCurrentItem();
mHeadViewPager.setCurrentItem(++currentItem);

//继续发送延时2秒的消息，形成类似递归的效果。
mHandler.sendEmptyMessageDelayed(0, 3000);

}
};

（8）解决事件冲突

在initUi方法中

mHeadViewPager.setOnTouchListener(new View.OnTouchListener(){

private long downTime;
private int downX;

@Override
public boolean onTouch(View v, MotionEvent event) {

switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mHandler.removeCallbacksAndMessages(null);
downX = (int) event.getX();
downTime = System.currentTimeMillis();
break;
case MotionEvent.ACTION_UP:
// 考虑到手按下和抬起时的坐标不可能完全重合，这里给出30的坐标偏差
if (System.currentTimeMillis() - downTime < 500&& Math.abs(downX - event.getX()) < 30){
//点击操作
}
//继续轮播广告
mHandler.sendEmptyMessageDelayed(0,3000);
break;
}

return false;
}
});

到此我们的功能就实现了

Android第一篇，问题肯定不少，但却能是自己更脚踏实地，为了自己在it之路上走的更远和不断进步……不管以后谁会看到，都希望我们能会越来越好，而不是“从入门到放弃……哈哈哈【表情】”