打造一个灵活易用的Banner组件

前言

之前做项目时候出于各种考虑，自己开发了Banner组件FBanner,欢迎大家的Star和PR。github上成熟的轮播图库已经有非常多了，比如banner和Android-ConvenientBanner，它们都非常优秀。那我为什么还要再造这样的一个组件呢，主要原因呢其实就一点，不够灵活。我想要的组件希望能做到以下几点：

  • 轮播图每页的UI可以定制同时保持较小的工作量
  • 指示器的位置、大小、背景、字体颜色、字体大小等等都可以定制
  • 一些特殊情况，比如下图这样的可以灵活优雅地实现。这种情况需要将ViewPager的父布局设置为android:clipChildren="false" android:layerType="software",然后设置ViewPager的PageMargin
image

设计思路

有了上面的需求，我们先从代码层面具化我们想要的目标，并拆解需求分析问题。

目标

将Banner的两部分分开，一部分是轮播图，另一部分是指示器，然后通过一个“点”将二者联系起来。两者本身都是单独的View，这样的话就可以在父布局中任意调整大小和位置。期望的代码如下:

  <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:orientation="vertical">

            <com.pngfi.banner.BannerViewPager
                android:id="@+id/banner"
                android:clipChildren="false"
                android:layout_width="match_parent"
                app:autoTurning="false"
                android:layout_height="175dp"
                android:layout_marginLeft="40dp"
                android:layout_marginRight="40dp"
                android:layout_marginTop="15dp" />

            <com.pngfi.banner.indicator.DotIndicator
                android:id="@+id/dotView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="21dp"
                android:layout_marginTop="15dp"
                app:dot="@drawable/default_bg_dot_view"
                app:dotMargin="16dp" />

        </LinearLayout>

轮播图

继承ViewPager来实现，主要解决的问题有两个。

  1. 自动滑动，用定时器或者Handler可以轻松实现
  2. 循环播放，这点网上有两种常见的方案:

Integer.MAX_VALUE

这种方法思路很简单，就是让PagerAdapter的getCount方法返回Integer.MAX_VALUE，instantiateItem方法采用position%data.size()获取对应数据，初始时让ViewPager移动相对中间的位置即可。但是呢这种方法有两个弊端

  • 理论上ViewPager还是会滑动到头的（虽然实际上一般并不会）
  • 当PagerAdapter的getCount方法返回一个很大的值时候，会产生一个问题，调用setCurrentItem跨度超过offscreenPageLimit方法会卡顿甚至ANR。

本来理论上能滑动到头，就有点让人不爽，如果要是再调小getCount的返回值，就感觉更不好了。因此我是放弃了这种方式。

加页面

image

看上图应该就很容易明白，有A,B,C,D,四个页面，在A页面前面再加个D页面，在D页面后面再加个A页面。当滑动到最右侧的A时候，调用setCurrentItem(position,false)移动到前面1位置的A；当滑动到最左侧的D页面时候，移动到getCount()-2处的D页面。
那么问题就在于什么时候去移动页面了，不会有闪动么？

  • 一种情况是是当页面已经切换，处于空闲状态时候
  • 另一种情况是当用户快速滑动切换的时候。

下面的代码就可以处理，实际效果也不会有闪动。

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_IDLE || state == ViewPager.SCROLL_STATE_DRAGGING) {
                if (BannerViewPager.super.getCurrentItem() == mAdapter.getCount() - 1) {
                    BannerViewPager.super.setCurrentItem(1,false);
                } else if (BannerViewPager.super.getCurrentItem() == 0) {
                    BannerViewPager.super.setCurrentItem(mAdapter.getCount()-2,false);
                }
            }
        }

指示器

指示器本身是View，不必要将其和轮播组件太过耦合，我们单独去实现它。常见的指示器有下面几种：

  • 点型指示器


    image
image

  • 数字指示器


    image

  • 标题指示器


    image

    通过分析我们知道其实呢，每种指示器需要知道两件事，一是一共有多少个页面，二是当前是哪个页面。当然标题指示器稍微特别一点，需要知道每个页面对应得标题是什么，特殊情况特殊处理就好了。因此我抽象了指示器接口：

public interface Indicator {

    /**
     * 设置页面的数量
     * @param count
     */
    void setCount(int count);

    /**
     * 设置选中了position页面
     * @param position
     */
    void setSelected(int position);

}

连接点

只是器是根据ViewPager的页码变化而变化，这是一种典型的观察者模式。我们只要按照观察者模式处理就好了。提供一个addaddIndicator方法去添加指示器，需要注意的是这里addOnPageChangeListener方法是处理过的，下文会讲到。

 public void addIndicator(Indicator indicator) {
        mIndicators.add(indicator);
        addOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for (Indicator in : mIndicators) {
                    in.setSelected(position);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

到这里整体的思路就差不多，接下来就是要处理好一些细节。

具体实现

Adapter封装

前面我们说过要让用户能够定制每个页面的UI，而且又要屏蔽轮播的实现细节。那么我们只要提供给用户一个接口，去实现每个position对应的UI就可以啦，如下所示：

public interface ViewHolder<T>{
    View getView(Context context, int position, T data);
}

Adapter代码其实也很简单，我就直接贴了。

public class BannerPageAdapter<R> extends PagerAdapter {

    protected List<R> mData = new ArrayList<>();
    protected ViewHolder<R> viewHolder;
    private boolean once;

    /**
     * 由ViewPager中实际的position转换到用户认为的position
     * @param position
     * @return
     */
    public int toRealPosition(int position) {
        if (once)
            return 0;
        if (position == getCount() - 1) {
            return 0;
        } else if (position == 0) {
            return getCount() - 3;
        } else {
            return position - 1;
        }
    }

    /**
     * 由用户认为的position转换到ViewPager中对应的position
     * @param realPosition
     * @return
     */
    public int toPosition(int realPosition) {
        if (once)
            return 0;
        return realPosition + 1;
    }

    public int getCount() {
        return mData.size();
    }


    @Override
    public Object instantiateItem(ViewGroup container, int position) {
       //这里注意到传递给用户position需要转换
        View view = viewHolder.getView(container.getContext(), toRealPosition(position), mData.get(position));
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        View view = (View) object;
        container.removeView(view);
    }


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

    public BannerPageAdapter(ViewHolder holder) {
        viewHolder = holder;
        mData = new ArrayList<>();
    }

    public void setData(List<R> data) {
        mData.clear();
        mData.addAll(data);
        once = data.size() == 1;
        if (!once) {
            R first = data.get(0);
            R last = data.get(data.size() - 1);
            mData.add(first);
            mData.add(0, last);
        }
        notifyDataSetChanged();
    }

    @Override
    public int getItemPosition(Object object) {
        return  POSITION_NONE;
    }
}

上述代码比较重要的是其实就是toRealPosition和toPosition两个方法，另外其中once是对只有一张图片的情况特殊处理。

那么相应的BannerViewPager中也应该添加一下方法：

BannerViewPager：

public <T> void setViewHolder(ViewHolder<T> holder) {
        mAdapter = new BannerPageAdapter(holder);
        super.setAdapter(mAdapter);
}
    
public <T> void setData(List<T> data) {
        if (mAdapter == null) {
            throw new IllegalStateException("setViewHolder must be called first");
        }
        if (data == null || data.size() == 0)
            return;
        for (Indicator indicator : mIndicators) {
            indicator.setCount(data.size());
        }

        mAdapter.setData(data);
        setCurrentItem(0);
        startTuring();
}

到这里再加上onPageScrollStateChanged的代码，循环播放的功能基本上就实现了。

自动滑动

这里我们通过Handler发送延迟消息来实现，看一下Handler的代码：


    private Handler mHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            if (msg.what == MSG_AUTO_TURNING) {
                //没有数据
                if (mAdapter == null || mAdapter.getCount() == 0 || mAdapter.getCount() == 1 || !autoTurning) {
                    stopTurning();
                    return;
                }
                int item = BannerViewPager.super.getCurrentItem();
                BannerViewPager.super.setCurrentItem(item+1,true);
                mHandler.sendEmptyMessageDelayed(MSG_AUTO_TURNING, turningDuration);
            }
        }
    };

没有数据、只有一个页面或者用户不希望自行翻页时候呢，就不再发送延时消息。
那么我们什么时候开始让页面自动滑动呢？看代码:


    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        //window 没有焦点之后停止滑动，获得之后再开始滑动
        if (hasWindowFocus) {
            startTuring();
        } else {
            stopTurning();
        }
    }
    

    private void startTuring() {
      if (mHandler.hasMessages(MSG_AUTO_TURNING))
         mHandler.removeMessages(MSG_AUTO_TURNING);
         mHandler.sendEmptyMessageDelayed(MSG_AUTO_TURNING, turningDuration);
     }

private void stopTurning() {
    if (mHandler.hasMessages(MSG_AUTO_TURNING)) {
        mHandler.removeMessages(MSG_AUTO_TURNING);
    }
}

考虑如下情况，我们当前Activity有个Banner，此时弹出了Dialog或者启动了另一个Actvity时候，正常情况下我们希望当前的Baner停止自动滑动，当取消对话框或者返回当前Activity时候再恢复滑动，因此我们在onWindowFocusChanged中去停止和恢复自动翻页。要注意的是当前Window第一次获得焦点时候，我们还没有给BannerViewPager设置数据，因此需要在setData方法中去调用startTuring()。

另外当用户手指按下的时候，是需要停止自动滑动的，抬起时候再恢复自动滑动。


    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_OUTSIDE) {
            if (autoTurning)
                startTuring();
        } else if (action == MotionEvent.ACTION_DOWN) {
            if (autoTurning)
                stopTurning();
        }
        return super.dispatchTouchEvent(ev);
    }

另外为了防止Handler引发内存泄漏：

@Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mHandler.removeCallbacksAndMessages(null);
        super.removeOnPageChangeListener(proxyRootListener);
    }

ViewPager方法校正

由于循环的实现方式，会导致ViewPager本身的一些方法都不能正常工作了，主要是一些和position相关的地方，需要修正。

OnPageChangeListener
监听器的修正呢其实是一种典型的委托思想。

 private OnPageChangeListener proxyRootListener = new OnPageChangeListener() {
        private int mPreviousPosition = -1;

        @Override
        public void onPageSelected(int position) {
            int realPosition = mAdapter.toRealPosition(position);
            if (mPreviousPosition != realPosition) {
                mPreviousPosition = realPosition;
                for (OnPageChangeListener listener : mOnPageChangeListeners) {
                    listener.onPageSelected(realPosition);
                }
            }
        }

        @Override
        public void onPageScrolled(int position, float positionOffset,
                                   int positionOffsetPixels) {
            int realPosition = mAdapter.toRealPosition(position);
            for (OnPageChangeListener listener : mOnPageChangeListeners) {
                listener.onPageScrolled(realPosition, positionOffset, positionOffsetPixels);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_IDLE || state == ViewPager.SCROLL_STATE_DRAGGING) {
                if (BannerViewPager.super.getCurrentItem() == mAdapter.getCount() - 1) {
                    BannerViewPager.super.setCurrentItem(1,false);
                } else if (BannerViewPager.super.getCurrentItem() == 0) {
                    BannerViewPager.super.setCurrentItem(mAdapter.getCount()-2,false);
                }
            }
            for (OnPageChangeListener listener : mOnPageChangeListeners) {
                listener.onPageScrollStateChanged(state);
            }
        }
    };

上面的代码里我创建一个OnPageChangeListener的实例，然后再BannerViewPager初始化的时候调用super.addOnPageChangeListener(proxyRootListener);，其中mOnPageChangeListeners是我维护的Listener集合。这样页面的所有变化都由proxyRootListener监听到，然后对position进行校正后，再分发给用户添加的OnPageChangeListener。重写相关方法：


    @Override
    public void addOnPageChangeListener(OnPageChangeListener listener) {
        mOnPageChangeListeners.add(listener);
    }


    @Override
    public void removeOnPageChangeListener(OnPageChangeListener listener) {
        mOnPageChangeListeners.remove(listener);
    }

    @Override
    public void clearOnPageChangeListeners() {
        mOnPageChangeListeners.clear();
    }

    @Override
    public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener) {
        mOnPageChangeListeners.add(onPageChangeListener);
    }

另外下面两个方法也需要修正：

 @Override
    public void setCurrentItem(int item) {
        super.setCurrentItem(mAdapter.toPosition(item));
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        BannerViewPager.super.setCurrentItem(mAdapter.toPosition(item),smoothScroll);
    }

设置页面滑动动画时间

反射替换掉ViewPager内部的mScroller即可。

private class InternalScroller extends Scroller {
        private int scrollDuration = 1000;

        public InternalScroller(Context context) {
            super(context);
        }

        public InternalScroller(Context context, Interpolator interpolator) {
            super(context, interpolator);
        }

        public InternalScroller(Context context, Interpolator interpolator, boolean flywheel) {
            super(context, interpolator, flywheel);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy, int duration) {
            super.startScroll(startX, startY, dx, dy, scrollDuration);
        }

        @Override
        public void startScroll(int startX, int startY, int dx, int dy) {
            super.startScroll(startX, startY, dx, dy, scrollDuration);
        }

        public void setDuration(int duration) {
            scrollDuration = duration;
        }

    }
    
    
    
    try {
            Field scrollField = ViewPager.class.getDeclaredField("mScroller");
            scrollField.setAccessible(true);
            mScroller = new InternalScroller(getContext());
            mScroller.setDuration(smoothScrollDuration);
            scrollField.set(this, mScroller);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

关于PageTransformer

目前为止项目对于PageTransformer的支持还是有点缺陷。我们知道给ViewPager设置了PageTransformer之后，滑动时候会回调transformPage( View page, float position)方法。但是当我们调用setCurrentItem(item,false),并且item超出offscreenPageLimit缓存的范围时候，transformPage方法的position值不是我们想要的值，会导致不正常。例如：我们有8个页面，offscreenPageLimit的值为1，现在在0页面。此时调用setCurrentItem(6,false)，本来期望5,6,7三个页面回调的position值分别是-1,0,1，结果却是-5,,-5,-5。上面Banner的实现又必须要用到setCurrentItem(item,false)，因此我做了一个折中。

@Override
    public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
        setPageTransformer(reverseDrawingOrder, transformer, View.LAYER_TYPE_HARDWARE);
    }

    @Override
    public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer, int pageLayerType) {
        super.setPageTransformer(reverseDrawingOrder, transformer, pageLayerType);
        if (transformer == null) {
            setOffscreenPageLimit(1);
        } else {
            setOffscreenPageLimit(100);
        }
    }

这样就可以保证正常了，但是真的要用PageTransformer的话呢，最好页面不要太多。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,293评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,604评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,958评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,729评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,719评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,630评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,000评论 3赞 397
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,665评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,909评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,400评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,986评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2赞 342

推荐阅读更多精彩内容

  • Android - ViewPager 从基础到进阶
    前言 好记性不如烂笔头，学习的知识总要记录下来，通过本文来加深对 ViewPager 方方面面的理解： ViewP...
    whd_Alive阅读 2,172评论 0赞 9
  • ViewPager系列之 仿魅族应用的广告BannerView
    前言 Banner广告位是APP 中的一个非常重要的位置，为什么呢？因为它能带来money。是一个公司很重要的一个...
    依然范特稀西阅读 27,750评论 126赞 128
  • Banner
    Banner 基本上所有的App首页都包含一个轮播器，一般称之为Banner。通过这一个组件可以实现以下几个功能：...
    狮_子歌歌阅读 1,610评论 0赞 2
  • 基数排序
    基数排序 (Radix Sort) 是一种非比较型整数排序算法，其原理是将整数按位数切割成不同的数字，然后按每个位...
    zjh111阅读 306评论 0赞 0
  • 莫问前景得失计，踏平坎坷再劲攀
    爬山有感 红尘余事何必烦，野径芳情觅清欢。 绝壁临崖风拂面，浮云逐日影堆山。 回眸俯视登峰易，抬步蹒跚返道难。 莫...
    翔遠阅读 189评论 0赞 1