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

用户1269200

发布于 2018-07-30 10:23:16

9360

发布于 2018-07-30 10:23:16

文章被收录于专栏：刘望舒

作者：三雒 https://www.jianshu.com/p/4708e7da2013

前言

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

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

设计思路

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

目标

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

        <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来实现，主要解决的问题有两个。

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

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

理论上ViewPager还是会滑动到头的（虽然实际上一般并不会）当PagerAdapter的getCount方法返回一个很大的值时候，会产生一个问题，调用setCurrentItem跨度超过offscreenPageLimit方法会卡顿甚至ANR。本来理论上能滑动到头，就有点让人不爽，如果要是再调小getCount的返回值，就感觉更不好了。因此我是放弃了这种方式。

加页面

看上图应该就很容易明白，有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，不必要将其和轮播组件太过耦合，我们单独去实现它。常见的指示器有下面几种：

点型指示器

数字指示器

标题指示器

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

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的话呢，最好页面不要太多。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-06-21，如有侵权请联系 cloudcommunity@tencent.com 删除

android

node.js

本文分享自刘望舒微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

android

node.js

登录后参与评论

0 条评论

热度