android banner安利一款轮播控件

Android轮播控件

安利一款banner，项目开发中用的到的banner，实现viewPager无限轮播功能，内置了圆形的IndicatorView，支持多种动画切换。

• 支持一屏三页
• 支持魅族效果
• 支持自定义Indicator
• 支持自定义view
• 支持数据刷新
• 解决下拉刷新等滑动冲突问题，如嵌套SwipeRefreshLayout
• 解决屡次重复回调onPageSelected问题
• 良好的代码封装，更多优化请参考代码实现。

若是以为喜欢那就start支持一下github.com/zguop/banne…

banner的实现核心思想是经过count+2的轮播思想，正是借鉴网红库github start数量最多的banner库，貌似该库并不支持一屏展现三页的效果，有滑动到最后一页空白的状况。

简单叙述下核心原理

• 一屏一页 咱们以数据源四张图片举个实际例子：needCount(6) = count(4) + 2 ，实际轮播的图片是有6张，存放在banner中对应：

咱们能够看到在实际的index=0是图片的最后一张，index=5是图片的第一张，咱们只要当右滑动到index=5时，经过 viewPager.setCurrentItem(1, false);切换至第一张,当左滑懂到index=0，经过viewPager.setCurrentItem(count, false);切换到实际图片的最后一张，进行过渡实现了循环轮播的一个效果。

• 一屏三页 仍是以4张图片举个例子，一屏三页，一次要展现三张图片，至关左右两边都加载了一张图片，也就是多加载了2张图片，须要的数量：needCount(8) = count(4) + 4 ,实际轮播是有8张，存放在banner对应：

一样的控制滑动到最后一张图片和第一张图片对应的索引位置，实现轮播的效果，这里就很少说了，具体可查看项目代码实现。

效果图

点击下载 banner.apk 体验

---

描述	图片
基本使用的功能，请下载apk体验更流畅

描述	普通样式	两边缩放	魅族样式
一屏三页

效果图	1	2
Indicator查看simple代码

使用步骤

Step 1.依赖banner

前往目标地址位置 banner

Step 2.xml

<com.to.aboomy.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="250dp"/>
复制代码

Step 3.自定义HolderCreator

//实现HolderCreator接口
public interface HolderCreator {
    View createView(Context context,final int index, Object o);
}

//举个栗子
public class ImageHolderCreator implements HolderCreator {
    @Override
    public View createView(final Context context, final int index, Object o) {
        ImageView iv = new ImageView(context);
        iv.setScaleType(ImageView.ScaleType.FIT_XY);
        Glide.with(iv).load(o).into(iv);
        //内部实现点击事件
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, index + "", Toast.LENGTH_LONG).show();
            }
        });
        return iv;
    }
}
复制代码

Step 4.在页面中使用Banner

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = findViewById(R.id.banner);
        //使用内置Indicator
        IndicatorView indicator = new IndicatorView(this)
              .setIndicatorColor(Color.DKGRAY)
              .setIndicatorSelectorColor(Color.WHITE);
        banner.setIndicator(indicator)
              .setHolderCreator(new ImageHolderCreator())
              .setPages(list);
    }
复制代码

简单设置一屏三页效果

//设置左右页面露出来的宽度及item与item之间的宽度
.setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
//内置ScaleInTransformer，设置切换缩放动画
.setPageTransformer(true, new ScaleInTransformer())
    
复制代码

关于ViewPager切换动画

Sample中集成了如下两个ViewPager切换动画，请运行Sample查看动画效果，参考须要的ViewPagerTransform放到项目中，或者根据需求进行自定义。

ViewPagerTransforms

MagicViewPager

如何自定义Indicator

//实现Indicator接口
/** * 能够实现该接口，自定义Indicator 可参考内置的{@link IndicatorView} */
public interface Indicator extends ViewPager.OnPageChangeListener {

    /** * 当数据初始化完成时调用 * * @param pagerCount pager数量 */
    void initIndicatorCount(int pagerCount);

    /** * 返回一个View，添加到banner中 */
    View getView();

    /** * banner是一个RelativeLayout，设置banner在RelativeLayout中的位置，能够是任何地方 */
    RelativeLayout.LayoutParams getParams();
}

//举个栗子
public class IndicatorView extends View implements Indicator{
       
        @Override
        public void initIndicatorCount(int pagerCount) {
            this.pagerCount = pagerCount;
            setVisibility(pagerCount > 1 ? VISIBLE : GONE);
            requestLayout();
        }
    
        @Override
        public View getView() {
            return this;
        }
         /** * 控制Indicator在Banner中的位置，开发者自行实现 */
        @Override
        public RelativeLayout.LayoutParams getParams() {
            if (params == null) {
                params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                params.addRule(RelativeLayout.CENTER_HORIZONTAL);
                params.bottomMargin = dip2px(10);
            }
            return params;
        }
        /** * banner切换时同步回调的三个方法 */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            selectedPage = position;
            offset = positionOffset;
            invalidate();
        }
        
        @Override
        public void onPageSelected(int position) {
        }
        
        @Override
        public void onPageScrollStateChanged(int state) {
        }
}

复制代码

Banner提供的方法介绍，banner未提供任何自定义属性

方法名	描述
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)	设置viewpager的自定义动画
setOuterPageChangeListener(ViewPager.OnPageChangeListener outerPageChangeListener)	设置viewpager的滑动监听
setAutoTurningTime(long autoTurningTime)	设置自动轮播时长
setPagerScrollDuration(int pagerScrollDuration)	设置viewpager的切换时长
setAutoPlay(boolean autoPlay)	设置是否自动轮播，大于1页能够轮播
setIndicator(Indicator indicator)	设置indicator
setIndicator(Indicator indicator, boolean attachToRoot)	设置indicator
HolderCreator(HolderCreator holderCreator))	设置view建立接口
setPages(List<?> items)	加载数据，此方法时开始轮播的方法，请再最后调用
setPages(List<?> items, int startPosition)	重载方法，设置轮播的起始位置
isAutoPlay()	是否无限轮播
getCurrentPager()	获取viewPager位置
startTurning()	开始轮播
stopTurning()	中止轮播
setPageMargin(int multiWidth, int pageMargin)	设置一屏多页
setPageMargin(int leftWidth, int rightWidth, int pageMargin)	设置一屏多页,方法重载

内置IndicatorView使用方法介绍，没有提供任何自定义属性

方法名	描述
setIndicatorRadius(float indicatorRadius)	设置圆点半径
setIndicatorSpacing(float indicatorSpacing)	设置圆点间距
setIndicatorStyle(@IndicatorStyle int indicatorStyle)	设置圆点切换动画，内置三种切换动画，请参考Sample
setIndicatorColor(@ColorInt int indicatorColor)	设置默认的圆点颜色
setIndicatorSelectorColor(@ColorInt int indicatorSelectorColor)	设置选中的圆点颜色
setParams(RelativeLayout.LayoutParams params)	设置IndicatorView在banner中的位置，默认底部居中，距离底部10dp，请参考Sample