• 热门专题

手把手教你用ViewPager自定义实现Banner轮播

作者:  发布日期:2016-07-26 20:34:19
  • 手把手教你用ViewPager自定义实现Banner轮播

    欢迎大家关注Android开源网络框架NoHttp:https://github.com/yanzhenjie/NoHttp
    在线直播视频和代码下载:http://pan.baidu.com/s/1miEOtwG

    版权声明:转载请注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003


      我们在实际开发中,很多App都会在做一个广告轮播器(可能是图片,可能是其他View),很多同学都是使用别人封装好的或者直接使用ViewPager自己来改,但是有人可能并不理解里面的原理,或者有人遇到了手势滑动冲突。我们今天就用150行代码实现一自定义的广告轮播器并不干扰原来View滑动事件。
      本例代码源码及Demo传送门

    效果演示

    轮播效果演示
      

    需求分析、解决方案

      轮播器最重要的几个特点就是:自动滚动、手动滑动、滚动方向、每个Item显示时间。因此我们设计提供以下几个方法供外部调用:

    /**
     * 设置每个Item的播放时间,默认3000毫秒
     */
    public void setShowTime(int showTimeMillis);
    
    /**
     * 设置滚动方向,默认向左滚动
     */
    public void setDirection(Direction direction);
    
    /**
     * 开始自动滚动
     */
    public void start();
    
    /**
     * 停止自动滚动
     */
    public void stop();
    
    /**
     * 播放上一个
     */
    public void previous();
    
    /**
     * 播放下一个
     */
    public void next();

      仔细看过上面方法的同学会发现,和我们的分析想比,还缺少一个手动滑动的方法,我们知道手势滑动肯定要用到onTouch等方法,所以我们想到v4包下ViewPager自带滑动效果,而且可以代码控制跳转到某个Item。因此我们自定义View继承ViewPager不就完美解决了。
      我们看到上面的方法中有一个Direction类,这个类不是系统的,是达哥自定义的方向控制枚举,目前最常见的轮播方向无非就是左右轮播(上下本次先不讨论),代码如下:

    public enum Direction {
        /**
         * 向左行动,播放的下一张应该是右边的
         */
        LEFT,
    
        /**
         * 向右行动,播放的下一张应该是左边的
         */
        RIGHT
    }

    自定义View如何实现以及原理

      上面分析到需要继承ViewPager,so我们先结合上面的几个方法把完整的代码撸起来:

    public class AutoPlayViewPager extends ViewPager {
    
        public AutoPlayViewPager(Context context) {
            super(context);
        }
    
        public AutoPlayViewPager(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        /**
         * 播放时间
         */
        private int showTime = 3 * 1000;
        /**
         * 滚动方向
         */
        private Direction direction = Direction.LEFT;
    
        /**
         * 设置播放时间,默认3秒
         *
         * @param showTimeMillis 毫秒
         */
        public void setShowTime(int showTimeMillis) {
            this.showTime = showTime;
        }
    
        /**
         * 设置滚动方向,默认向左滚动
         *
         * @param direction 方向
         */
        public void setDirection(Direction direction) {
            this.direction = direction;
        }
    
        /**
         * 开始
         */
        public void start() {
            // TODO 待实现开始播放
        }
    
        /**
         * 停止
         */
        public void stop() {
            // TODO 待实现停止播放
        }
    
        /**
         * 播放上一个
         */
        public void previous() {
            // TODO 待实现播放上一个
        }
    
        /**
         * 播放下一个
         */
        public void next() {
            // TODO 待实现播放下一个
        }
    
        public enum Direction {
            /**
             * 向左行动,播放的应该是右边的
             */
            LEFT,
    
            /**
             * 向右行动,播放的应该是左边的
             */
            RIGHT
        }
    }

      setShowTime(int showTimeMillis)方法和setDirection(Direction direction)就是记录一下某一个状态而已,现在已经简单的实现了,重点就是开始播放和停止播放。
      

    定时轮播的原理分析和实现

      前方高能,各位看官小心裤子别掉了。现在我们使用ViewPager最主要的就是自动播放了,所以我们需要一个定时器去执行任务,but这样子就得用到Handler,就有点小题大做了。这里介绍View的两个方法:

    // 线程将被添加到消息队列,这个线程将会在UI线程(主线程)运行。
    public boolean post(Runnable action);
    
    // 线程将被添加到消息队列,在指定的时间之后运行,这个线程将会在UI线程(主线程)运行。
    public boolean postDelayed(Runnable action, long delayMillis);

      看到第二个方法犹如醍醐灌顶啊有木有,既然是所有View都有的方法,ViewPager必须有啊,这样不就可以在主线程定时发布一个任务了吗?所以我们这里写一个Runnable来做这个定时任务。

    /**
     * 播放器
     */
    private Runnable player = new Runnable() {
        @Override
        public void run() {
            play(direction);
        }
    };

      这里看到有一个play(direction);的方法待我们去实现,我们暂且把这个方法先放一放,我们先来看怎么利用这个private Runnable player完成开始播放和停止播放。
      

    实现开始播放和停止播放

      开始播放时我们为了让当前显示的图片显示showTime的时间,所以我们利用postDelayed(Runnable action, long delayMillis);方法在showTime时间之后触发private Runnable player:

    /**
     * 开始
     */
    public void start() {
        postDelayed(player, showTime);
    }

      停止播放,我们把这个线程给取消了就行了,因此停止的方法的实现是:

    /**
     * 停止
     */
    public void stop() {
        removeCallbacks(player);
    }

      但是为了防止开发者不停的调用start方法造成卡死现象,我们在start中做个优化,每次star前先把之前private Runable player移除了,因此start方法完整的代码是:

    /**
     * 开始
     */
    public void start() {
        stop();
        postDelayed(player, showTime);
    }

    核心重点:如何根据方向播放上一张和下一张

      本例的核心和重点来了,现在回过头去实现刚才搁置的play(direction);方法,它要根据播放的方向来播放上一张和下一张,我们具体看代码,尤其要细细品味注释哦:

    /**
     * 执行播放
     *
     * @param direction 播放方向
     */
    private synchronized void play(Direction direction) {
        // 拿到ViewPager的适配器
        PagerAdapter pagerAdapter = getAdapter();
        if (pagerAdapter != null) {// 判空
            // Item数量
            int count = pagerAdapter.getCount();
            // ViewPager现在显示的第几个?
            int currentItem = getCurrentItem();
            switch (direction) {
                case LEFT:// 如是向左滚动的,currentItem+1播放下一个
                    currentItem++;
    
                    // 如果+到最后一个了,就到第一个
                    if (currentItem >= count)
                        currentItem = 0;
                    break;
                case RIGHT:// 如是向右滚动的,currentItem-1播放上一个
                    currentItem--;
    
                    // 如果-到低一个了,就到最后一个
                    if (currentItem < 0)
                        currentItem = count - 1;
                    break;
            }
            setCurrentItem(currentItem);// 播放根据方向计算出来的position的item
        }
    
        // 这就是当可以循环播放的重点,每次播放完成后,再次开启一个定时任务
        start();
    }

      到这里其实我们已经实现轮播啦,但是我们在使用的时候发现存在一种情况,当我们用手指刚滑完一张,紧接着第二张又出来了,不卖关子了,原因就是我们手指滑动的时候private Runnable player这个任务没有停止,所以我们在手指滑动时停止player,手指松开的时候再次开启player:

    @Override
    protected void onFinishInflate() {
        addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
    
            @Override
            public void onPageSelected(int position) {
            }
    
            @Override
            public void onPageScrollStateChanged(int state) {
                if (state == SCROLL_STATE_IDLE)
                    start();
                else if (state == SCROLL_STATE_DRAGGING)
                    stop();
            }
        });
    }

      有些同学可能不知道为什么不在构造方法中而要在onFinishInflate中addOnPageChangeListener,是因为这个方法会在view被加载完成后调用,所以我们在这里做一些初始化的工作比较合理。
      自定义ViewPager的完整代码如下:

    package com.yolanda.autoviewpager;
    
    import android.content.Context;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.util.AttributeSet;
    
    /**
     * <p>用ViewPager自定义的广告轮播器。</p>.
     * 
     * @author Yolanda; 
     */
    public class AutoPlayViewPager extends ViewPager {
    
        public AutoPlayViewPager(Context context) {
            super(context);
        }
    
        public AutoPlayViewPager(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        /**
         * 播放时间
         */
        private int showTime = 3 * 1000;
        /**
         * 滚动方向
         */
        private Direction direction = Direction.LEFT;
        /**
         * 设置播放时间,默认3秒
         *
         * @param showTimeMillis 毫秒
         */
        public void setShowTime(int showTimeMillis) {
            this.showTime = showTime;
        }
    
        /**
         * 设置滚动方向,默认向左滚动
         *
         * @param direction 方向
         */
        public void setDirection(Direction direction) {
            this.direction = direction;
        }
    
        /**
         * 开始
         */
        public void start() {
            stop();
            postDelayed(player, showTime);
        }
    
        /**
         * 停止
         */
        public void stop() {
            removeCallbacks(player);
        }
    
        /**
         * 播放上一个
         */
        public void previous() {
            if (direction == Direction.RIGHT) {
                play(Direction.LEFT);
            } else if (direction == Direction.LEFT) {
                    play(Direction.RIGHT);
            }
        }
    
        /**
         * 播放下一个
         */
        public void next() {
            play(direction);
        }
    
        /**
         * 执行播放
         *
         * @param direction 播放方向
         */
        private synchronized void play(Direction direction) {
            PagerAdapter pagerAdapter = getAdapter();
            if (pagerAdapter != null) {
                int count = pagerAdapter.getCount();
                int currentItem = getCurrentItem();
                switch (direction) {
                    case LEFT:
                        currentItem++;
                        if (currentItem > count)
                            currentItem = 0;
                            break;
                    case RIGHT:
                        currentItem--;
                        if (currentItem < 0)
                            currentItem = count;
                        break;
                }
                setCurrentItem(currentItem);
            }
            start();
        }
    
        /**
         * 播放器
         */
        private Runnable player = new Runnable() {
            @Override
            public void run() {
                play(direction);
            }
        };
    
        public enum Direction {
            /**
             * 向左行动,播放的应该是右边的
             */
            LEFT,
                /**
             * 向右行动,播放的应该是左边的
             */
            RIGHT
        }
    
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
            addOnPageChangeListener(new OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                }
    
                @Override
                public void onPageSelected(int position) {
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
                    if (state == SCROLL_STATE_IDLE)
                        start();
                    else if (state == SCROLL_STATE_DRAGGING)
                        stop();
                }
            });
        }
    }

    如何使用

      其实我们没有对ViewPager做什么太大的干涉,所以我们使用和原生的没有什么区别。这里有几个注意的地方也写出来,免得有人踩坑。

    如果使用自定ViewPager

    AutoPlayViewPager autoPlayViewPage = (AutoPlayViewPager) findViewById(R.id.view_pager);
    autoPlayViewPage.setAdapter(bannerAdapter);
    
    // 以下两个方法不是必须的,因为有默认值
    autoPlayViewPage.setDirection(AutoPlayViewPager.Direction.LEFT);// 设置播放方向
    autoPlayViewPage.setCurrentItem(200); // 设置每个Item展示的时间
    
    autoPlayViewPage.start(); // 开始轮播

    如何优化Adapter

      其实我们看到就是多调用了一个star方法,但是还不够,我们在适配器中还要做一点点小事情。为了能让轮播无限循环,所以我们在getCount中返回int的最大值:

    @Override
    public int getCount() {
        return resIds == null ? 0 : Integer.MAX_VALUE;
    }

      resIds是我们的数据源。该了这个Count后,我们的instantiateItem()方法也要修改,不然会发生下标越界的异常,我们在拿到position后要做个处理:

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        position = position % resIds.size();
        Object xxoo = resIds.get(position);
        ...
    }

      本例代码源码及Demo传送门
      已经凌晨了达哥也要休息啦,祝看官们每天好心情。
      

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规