Giter VIP home page Giter VIP logo

banner's Introduction

Android 图片轮播控件

图片轮播类似控件比较多,但是真正好用的比较少,大家公认的项目banner是比较好用的, 但是作者已经很久没维护了,所以我在他的基础上优化了一部分,满足大家项目中常用的一些需求.

具体优化点:
1.优化了自定义布局,不仅仅是一张图片;
2.优化了 onPageSelected 方法调用两次的 bug;
3.增加了多种 banner 样式

关于本库的优化点

目前存在一个优化点,就是实现原理上,为了兼容卡片模式,无限轮播的实现方式采用的是 adapter 的 count 取一个比较大的数值,这种方式 其实我是不太想用的,另外一个实现方式是 count 总数加 2,这其实才是真正意义的无限轮播,在这里我也是搜集了各种 banner 的实现源码, 发现第二个方式总有瑕疵.具体就是:卡片模式滑动的时候,最后一张到第一张或者第一张到最后一张图片有个延迟的白边,造成的原因是调用 的方法执行的比较慢,所以有个延迟(第二种方式可以参照 BannerNew.java 里面的代码)

所以在此希望大家有好的处理方式能提 pr,或者 issue,我会认真看,认真解决

效果图

apk 下载及动态展示

效果示例

部分效果图

模式 图片
指示器模式 效果示例
数字模式 效果示例
数字加标题模式 效果示例
标题模式 效果示例
指示器加标题模式 效果示例
卡片模式 效果示例
自定义指示器模式 效果示例
自定义混合模式 效果示例
底部弧形模式 效果示例
指示器在外部 效果示例
右端缩进模式 效果示例

使用步骤

Step 1.依赖banner

dependencies{
    implementation 'com.ms:banner:1.0.0'
    implementation 'com.github.wenchaosong:Banner:2.4.0'
}

或者引用本地lib

compile project(':rollbanner')

Step 2.在布局文件中添加Banner,可以设置自定义属性

<com.ms.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度自己设置" />

Step 3.设置布局

.setPages(arrList, new CustomViewHolder())

class CustomViewHolder implements BannerViewHolder<String> {

    private CardView mCardView;
    private TextView mTextView;

    @Override
    public View createView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.banner_item, null);
        mCardView = (CardView) view.findViewById(R.id.group);
        mTextView = (TextView) view.findViewById(R.id.position);
        return view;
    }

    @Override
    public void onBind(Context context, int position, String data) {
        // 数据绑定
        mCardView.setCardBackgroundColor(Color.parseColor(data));
        mTextView.setText(position + "");
    }
}

Step 4.在Activity或者Fragment中配置Banner

  • 注意!start()方法必须放到最后执行
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    banner.setAutoPlay(true)
            .setPages(arrList, new CustomViewHolder())
            .start();
}

Step 5.(可选)

@Override
protected void onStart() {
    super.onStart();
    //开始轮播
    if (banner != null && banner.isPrepare() && !banner.isStart()) {
        banner.startAutoPlay();
    }
}

@Override
protected void onStop() {
    super.onStop();
    //结束轮播
    if (banner != null && banner.isPrepare() && banner.isStart()) {
        banner.stopAutoPlay();
    }
}

Step 6.混淆

-keep class com.ms.banner.** {*;}

注意事项

另只要是 banner 中布局中可以定义的,都可以重写,包括但不限于指示器,图片,文字等.各个模式相应的代码 demo 中已经有了,可以作为参考,如果有问题可以提 issue

属性和方法介绍

xml 文件可配置的属性
属性 描述
delay_time integer 轮播下一张图片的延迟时间
scroll_time integer 滚动到下一张图片的时间
is_auto_play boolean 是否自动轮播
is_loop boolean 是否循环
title_background color、reference title 的背景
title_textcolor color title 的字体颜色
title_textsize dimension title 的字体大小
title_height dimension title 的高度
indicator_width dimension 指示器的宽度
indicator_height dimension 指示器的高度
indicator_margin dimension 指示器到底部的距离
indicator_padding dimension 指示器之间的间距
indicator_drawable_selected reference 选中的指示器图片
indicator_drawable_unselected reference 未选中的指示器图片
banner_default_image reference 默认的图片
page_left_margin dimension 左边缩进的距离
page_right_margin dimension 右边缩进的距离
arc_height dimension 底部弧形的高度
arc_start_color reference 底部弧形的起始颜色
arc_end_color reference 底部弧形的结束颜色
arc_direction enum 底部弧形的方向
java 文件可调用的方法
setDelayTime                设置延迟时间
setAutoPlay                 设置是否自动轮播
setLoop                     设置是否循环
setIndicatorGravity         设置指示器位置
setBannerAnimation          设置滚动动画
setBannerTitles             设置 title 数据
setBannerStyle              设置样式
setViewPagerIsScroll        设置是否可以滚动
setPages                    设置数据源
setCurrentPage              设置当前页
update                      刷新
updateBannerStyle           刷新样式
start                       开始使用
isPrepare                   是否加载完成
isStart                     是否轮播中
setIndicatorRes             设置指示器资源
startAutoPlay               开始自动轮播
stopAutoPlay                停止轮播
setOnBannerClickListener    监听点击事件
setOnPageChangeListener     监听页面变化事件

banner's People

Contributors

wenchaosong avatar ztftrue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

banner's Issues

关于卡片模式下只有一个Item时的优化

如果list只有一项,显示的时候左右都会多出一点,给人还有多余项目的错觉,所以在BannerPagerAdapter的getCount方法中最好做出如下判断:
@OverRide
public int getCount() {
if(mDatas.size() == 1){
return mDatas.size();
}else {
return mDatas.size() + 2;
}

    }

这样就没有问题了。

性能问题

hello,无限轮播的时候,一直调用holder的createView,里面不断通过LayoutInflater填充生成View,这会有性能问题吧,感觉holder没起到复用的作用。

文档最好加上混淆规则

glide 的混淆代码

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
**[] $VALUES;
public *;
}

banner 的混淆代码

-keep class com.ms.banner.** {
*;
}

指示器为数字时出现数组下标越界

在 Banner 类中的 onPageSelected(int position) 函数中,与 youth5201314 的比较少了一下两行
...
if (position == 0) position = count;
if (position > count) position = 1;
...
导致出现数组下标越界

修改绘制顺序问题

你好,多屏显示的时候,我想修改viewpager的绘制顺序已到达中间的卡片是显示在两侧卡片之上,但是BannerViewPager中的getCurrentItem()返回2000多

图片消失

我现在tab+viewpager+fragment,第一个tab下顶部有banner(本框架),然后我一直切换tab项,再切换回第一个tab,banner里的轮播图会消失

依赖报错

ERROR: Failed to resolve: com.github.wenchaosong:Banner:2.3.7
Show in Project Structure dialog
Affected Modules: app

【建议】实现LifecycleObserver

在Banner中实现LifecycleObserver接口,这样的话使用AppCompatActivity就不需要手动在onResume和onPause中去satr和stop了。只需要lifecycle.addObserver(banner)
代码

class MyBanner : Banner, LifecycleObserver {
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    @OnLifecycleEvent(Lifecycle.Event.ON_RESUME)
    fun onResume() {
        startAutoPlay()
    }

    @OnLifecycleEvent(Lifecycle.Event.ON_PAUSE)
    fun onPause() {
        stopAutoPlay()
    }

}

在RecyclerView中下拉刷新会报错

在RecyclerView中下拉刷新会报错
错误如下:
java.lang.IllegalStateException: The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! Expected adapter item count: 1000, found: 0 Pager id: cn.zhouheiya.app:id/bannerViewPager Pager class: class com.ms.banner.view.BannerViewPager Problematic adapter: class com.ms.banner.Banner$BannerPagerAdapter
at android.support.v4.view.ViewPager.populate(ViewPager.java:1135)
at android.support.v4.view.ViewPager.populate(ViewPager.java:1084)
at android.support.v4.view.ViewPager$3.run(ViewPager.java:267)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1065)
at android.view.Choreographer.doCallbacks(Choreographer.java:877)
at android.view.Choreographer.doFrame(Choreographer.java:805)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1051)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:201)
at android.app.ActivityThread.main(ActivityThread.java:6806)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:522)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:873)

我是这样使用的
image
image

求指教啊 大佬

java.lang.IllegalStateException

java.lang.IllegalStateException

The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! Expected adapter item count: 7, found: 2 Pager id: xxx.xxx.xxx:id/bannerViewPager Pager class: class com.ms.banner.view.BannerViewPager Problematic adapter: class com.ms.banner.Banner$BannerPagerAdapter

banner引入xml布局里面报错

包名都写对了,也跟着步骤来了。
Caused by: android.view.InflateException: Binary XML file line #139: Error inflating class com.ms.banner.Banner

轮播recycleView,默认先显示的是posiion1 不是0

如题:
List<List> splitList = CollectionUtils.getSplitList(strings, 8);
bannerPingpai.setBannerStyle(BannerConfig.NOT_INDICATOR);
bannerPingpai.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@OverRide
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            ToastUitl.showShort(position + "");
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
    bannerPingpai.setPages(splitList, new HolderCreator<BannerViewHolder>() {
        @Override
        public BannerViewHolder createViewHolder() {
            return new CustomViewHolder();
        }
    }).start();

class CustomViewHolder implements BannerViewHolder<List> {

    @BindView(R.id.recyclerView)
    RecyclerView mRecyclerView;


    @Override
    public View createView(Context context) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_wholesale_pingpai_layout, null);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onBind(Context context, int position, List<String> data) {
        /**/ 数据绑定,这里先加载的是大list的第二个元素**
        PingPaiHotAdapter mPingPaiHotAdapter = new PingPaiHotAdapter(data);
        mRecyclerView.setLayoutManager(new GridLayoutManager(getContext(), 4));
        mRecyclerView.setAdapter(mPingPaiHotAdapter);
        mPingPaiHotAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                String item = mPingPaiHotAdapter.getItem(position);
                ToastUitl.showShort(item);
            }
        });
    }
}

同学你好,有个问题想问一下

这个banner使用挺好的 有一个问题,就是我设置banner图片为圆角图片了,根布局使用cardView实现的,banner切换滑动的时候,圆角careView就变了直角,请问大概是什么原因呢

怎么设置指示器大小

用资源图片作为指示器时,怎么设置指示器大小。
同时怎么设置指示器和banner的间距,让其距离banner图片较远。
banner.setIndicatorRes(R.drawable.banner_indicator, R.drawable.banner_indicator_selected);

圆角轮播设置问题

一个Activity中多个fragment,其中一个fragment的轮播图设置了圆角,其他的也自动变为圆角,不能设置为无圆角效果。老铁们,这个是什么问题?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.