使用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() * 10000之间，取余可以实现在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之路上走的更远和不断进步……不管以后谁会看到，都希望我们能会越来越好，而不是“从入门到放弃……哈哈哈【表情】”