Android开发之轮播图广告的实现

前言：目前来说各大流行的商城app都会有轮播图这个功能，有的可以一直循环轮播，有的只能手动轮播，今天我们就来打造属于我们自己的轮播图！

----------------------------分割线-----------------------------------

先看一下效果展示图：

当然看了这个效果图是不是很一般，不过我们会在后期加上沉浸式的状态栏，效果很更好，今天我们就着重介绍轮播图的实现（我们下一章节介绍沉浸式效果的轮播图，你也可以自己仿照《Android开发之实现QQ空间、美团首页沉浸式状态栏》来实现）。

----------------------分割线-----------------------

原理：1.ViewPager+adapter。

2.绘制的小圆点。

3.监听滑动的ViewPager。

4.Handler或new Thread开启自动轮播。

----------------------分割线-----------------------

实现：

1初始化View视图：

private void initViews() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setOnPageChangeListener(this);// 设置页面更新监听
        ll_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
        tv_desc = (TextView) findViewById(R.id.tv_desc);
    }

2.准备好显示的数据：

private void initData() {
        // 初始化要显示的数据

        // 图片资源id数组
        imageResIds = new int[]{R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05};

        // 文本描述
        contentDescs = new String[]{
                "红米手机4x",
                "小米手机6",
                "小米手机6白色",
                "小米手机6黑色",
                "苹果手机"
        };

        // 初始化要展示的5个ImageView
        imageViewList = new ArrayList<ImageView>();

        ImageView imageView;
        View pointView;
        LayoutParams layoutParams;
        for (int i = 0; i < imageResIds.length; i++) {
            // 初始化要显示的图片对象
            imageView = new ImageView(this);
            imageView.setBackgroundResource(imageResIds[i]);
            imageViewList.add(imageView);

            // 加小白点, 指示器
            pointView = new View(this);
            pointView.setBackgroundResource(R.drawable.selector_bg_point);
            layoutParams = new LayoutParams(5, 5);
            if (i != 0)
                layoutParams.leftMargin = 10;

            // 设置默认所有都不可用
            pointView.setEnabled(false);
            ll_point_container.addView(pointView, layoutParams);
        }

    }

注意：这里需要注意的是小白点的初始化以及图片添加到数组里面。

两个简单的小白点的实现：

selector_bg_point:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:drawable="@drawable/shape_bg_point_enable"/>
    <item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"/>
</selector>

shape_bg_point_enable:

<?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>

shape_bg_point_disable:

<?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="@android:color/darker_gray" />
</shape>

这两个点以及选择器放在Drawable文件夹下即可。

3.初始化下Adapter：

 private void initAdapter() {
        ll_point_container.getChildAt(0).setEnabled(true);
        tv_desc.setText(contentDescs[0]);
        previousSelectedPosition = 0;

        // 设置适配器
        viewPager.setAdapter(new MyAdapter());

        // 默认设置到中间的某个位置
        int pos = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
        // 2147483647 / 2 = 1073741823 - (1073741823 % 5)
        viewPager.setCurrentItem(5000000); // 设置到某个位置
    }

ViewPager的适配器：

class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        // 3. 指定复用的判断逻辑, 固定写法
        @Override
        public boolean isViewFromObject(View view, Object object) {
            // 当划到新的条目, 又返回来, view是否可以被复用.
            // 返回判断规则
            return view == object;
        }

        // 1. 返回要显示的条目内容, 创建条目
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            int newPosition = position % imageViewList.size();
            ImageView imageView = imageViewList.get(newPosition);
            // a. 把View对象添加到container中
            container.addView(imageView);
            // b. 把View对象返回给框架, 适配器
            return imageView; // 必须重写, 否则报异常
        }

        // 2. 销毁条目
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

4.来实现下ViewPager的监听(MainActivity实现了OnPageChangeListener的接口)：

 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 滚动时调用
    }

    @Override
    public void onPageSelected(int position) {
        // 新的条目被选中时调用
        int newPosition = position % imageViewList.size();
        //设置文本
        tv_desc.setText(contentDescs[newPosition]);
        // 把之前的禁用, 把最新的启用, 更新指示器
        ll_point_container.getChildAt(previousSelectedPosition).setEnabled(false);
        ll_point_container.getChildAt(newPosition).setEnabled(true);
        // 记录之前的位置
        previousSelectedPosition = newPosition;

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // 滚动状态变化时调用
    }

6.开启图片的轮训：

方法一：使用new Thread开启循环

new Thread() {
            public void run() {
                isRunning = true;
                while (isRunning) {
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    // 往下跳一位
                    runOnUiThread(new Runnable() {

                        @Override
                        public void run() {
                            System.out.println("设置当前位置: " + viewPager.getCurrentItem());
                            viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                        }
                    });
                }
            };
        }.start();

方法二：使用Handler开启循环

 private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            int currentItem = viewPager.getCurrentItem();// 获取当前页面位置
            currentItem++;
            viewPager.setCurrentItem(currentItem);// 跳到下一个页面
            // 继续发送延时2秒的消息, 形成类似递归的效果, 使广告一直循环切换
            mHandler.sendEmptyMessageDelayed(0, 4000);
        }
    };

然后发送一个延迟空的延迟消息：

mHandler.sendEmptyMessageDelayed(0, 4000);

我们还可以给ViewPager添加一个OntouchListener的事件。

作用：在我们用手指滑动的时候关闭自动轮播，手指抬起的时候然后再继续开启轮播。

viewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mHandler.removeCallbacksAndMessages(null);// 清除所有消息和Runnable对象
                        break;
                    case MotionEvent.ACTION_UP:
                        // 继续轮播广告
                        mHandler.sendEmptyMessageDelayed(0, 4000);
                        break;
                }
                return false;
            }
        });

7.当然了当我们退出的时候我们记得要关闭轮播这个线程。（针对用new Thread开启的线程）

  @Override
    protected void onDestroy() {
        super.onDestroy();
        isRunning = false;
    }

----------------------源码下载链接-----------------------

Android开发之轮播图广告的实现的源码下载(此轮播图实现用的new Thread)

----------------------下一章实现沉浸式状态的轮播图-----------------------