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

时间:2022-06-04
本文章向大家介绍打造一个灵活易用的Banner组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

作者:三雒 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的话呢,最好页面不要太多。