Skip to content
Android Viewpager rotation control, application guide page controls, support vertical, horizontal cycle scrolling, extended from view support animation, indicator extension and so on;Android viewpager轮播图控件、app引导页控件,支持垂直、水平循环滚动,扩展自viewpager 支持动画,指示器扩展等。
Branch: master
Clone or download
Latest commit 7c6783c May 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art update version Nov 17, 2017
banner opt code May 21, 2019
gradle/wrapper
sample opt code May 21, 2019
.gitignore update gradle May 23, 2018
README.md for v1.6.8 May 21, 2019
build.gradle v1.6.8 May 21, 2019
gradle.properties init project Sep 8, 2017
gradlew init project Sep 8, 2017
gradlew.bat init project Sep 8, 2017
settings.gradle init project Sep 8, 2017

README.md

Download

banner

Android Viewpager rotation control, application guide page controls, support vertical, horizontal cycle scrolling, extended from view support animation, indicator extension and so on.

banner扩展自viewpager 支持动画,指示器扩展等。 可用于轮播图、app引导页。 其支持图片垂直、水平循环滚动。

简介

本库有两种banner组件可供使用, 分别是 Banner组件 和 RecyclerBanner组件。
Banner组件 基于 ViewPager扩展。
RecyclerBanner组件基于RecyclerView扩展。RecyclerBanner在内存占用和帧率上占有一定优势, 但动画效果不如Banner容易实现。

gradle 引入

compile 'cn.ymex:banner:1.6.8'

效果

1、app引导页控件

2、轮播图控件
gif
3、设置翻页动画
gif
4、自定义指示器
gif
5、垂直滚动
gif

6、Gallery 效果
png

7、指示器跟随移动

gif

相关属性及方法

banner 及 RecyclerBanner部分方法

方法 解释
createView() 创建banner 的布局
bindView() 处理banner控件元素
execute() 填充数据并展示
setOnClickBannerListener() 点击事件
setOrientation() 滚动方向
setIndicatorable() 设置指示器
setPageTransformer() 设置转换动画(RecyclerBanner 不支持)
setCurrentItem(int index) 切换到指定页
getCurrentItem() 当前页面索引

Banner及 RecyclerBanner属性

属性 解释
banner_interval 滚动间隔 (默认5000ms)
banner_auto_play 自动播放 (默认true)
banner_loop 循环滚动 (默认true)
banner_scroll 是否可以手动滚动 (默认true)
banner_min_loop 最小可以循环滚动的数量 (默认 1 v1.6.8)
banner_orientation 滚动方向 horizontal(默认),vertical

IndicatorLayout属性

属性 解释
indicator_width indicator的宽,默认8dip
indicator_height indicator的高,默认8dip
indicator_margin indicator的间距,默认4dip
indicator_selected 选中图片或颜色
indicator_unselected 未选中图片或颜色
indicator_shape indicator的形状,circular(默认),rectangle
indicator_flow 指示器是否随banner移动而滑动(RecyclerBanner 不支持),默认false
indicator_min_dot 指示器最小显示数量 ,默认1。(v1.6.8+)
indicator_max_dot 指示器最大显示数量,默认20。( v1.6.8+)

使用

banner基于viewpage 扩展,支持横向与纵向自动循环滚动。可用作 轮播图控件、app引导页控件。 需要 appcompat-v7 和 recyclerview 扩展库支持,并引入banner lib.

1、在布局文件中加入控件,IndicatorLayout 是指示器布局,因 Banner 是一个FrameLayout,所以你可以随意定义其位置。
如果 不使用指示器移除它就可以了。当然你也可通过实现IndicatorAble接口去自定义 指示器(具体参看 IndicatorLayout)。

<cn.ymex.widget.banner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="240dip"
    android:background="@color/colorAccent"
    app:banner_auto_play="true"
    app:banner_interval="5000">

    <cn.ymex.widget.banner.IndicatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="8dip"
        android:gravity="center"
        app:indicator_height="8dip"
        app:indicator_width="8dip" />
</cn.ymex.widget.banner.Banner>

2、使用bindview加载图片资源到banner中,banner默认实现了基于AppCompatImageView的布局

banner.bindView(new Banner.BindViewCallBack<AppCompatImageView,BanneModel>() {
    @Override
    public void bindView(AppCompatImageView view, BanneModel data, int position) {
        Glide.with(view.getContext())//使用Glide框架进行图片加载
                .load(data.getUrl())
                .into(view);
    }
}).setOnClickBannerListener(new OnClickBannerListener<View, BanneModel>() {

              @Override
              public void onClickBanner(View view, BanneModel data, int position) {//点击事件
                  Toast.makeText(view.getContext(), "click position :" + position + "\n标题:" + data.getTitle(), Toast.LENGTH_SHORT).show();
              }

}).execute(data());

3.自定义banner page


banner.createView(new CreateViewCallBack() {
    //创建布局
    @Override
    public View createView(Context context, ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_banner_page, null);

        return view;
    }
})
.bindView(new BindViewCallBack<View, BanneModel>() {
    //布局处理
    @Override
    public void bindView(View view, BanneModel data, int position) {

        ImageView imageView = view.findViewById(R.id.iv_image);
        TextView tvTitle = view.findViewById(R.id.tv_title);

        Glide.with(view.getContext()).load(data.getUrl()).into(imageView);
        tvTitle.setText(data.getTitle());
    }

})
.setOnClickBannerListener(new OnClickBannerListener<View, BanneModel>() {
    //点击事件
    @Override
    public void onClickBanner(View view, BanneModel data, int position) {
        Toast.makeText(view.getContext(), "click position :" + position + "\n标题:" + data.getTitle(), Toast.LENGTH_SHORT).show();
    }

})
.execute(DateBox.banneModels());//填充数据

RecyclerBanner

RecyclerBanner是基于RecyclerView 扩展而来的banner 。对于大量的数据很有帮助。 RecylerBanner 使用方法完全同Banner,但个别方法不支持,如动画切换的setPageTransformer()

注意事项

1.关于泛型的问题:

  • BindViewCallBack<V, T>()第一个泛型参数是CreateViewCallBack()返回类型,第二个泛型参数是你填充数据的类型。

  • OnClickBannerListener<V, T>() 同上。

  1. 使用glide 框架加载图片的异常,java.lang.IllegalArgumentException: You must not call setTag() on a view Glide is targeting

原因:如果 banner页布局只存在一个ImageView组件,banner 与 glide 都会去操作组件的setTag(),则glide会抛出异常。 (banner v1.6.7版本以下的默认布局仅含有一个ImageView 组件,所以使用glide会有这个异常。v1.6.7已经重写了默认布局。)

解决方案:

方案一:设置glide 的 ViewTarget.setTagId使用其使用非默认tag

//在你的Application的oncreate 中设置
public class App extends Application {
    @Override public void onCreate() {
        super.onCreate();
        ViewTarget.setTagId(R.id.glide_tag);
    }
}

//在资源文件(src/main/values/ids.xml,如果没有请新建)中加入 :
<resources>
    <item type="id" name="glide_tag" />
</resources>

方案二:设置banner.createView(CreateViewCaller.build())(v1.6.7已经重写了默认布局。如果你使用v1.6.7+版本,将不会出现这个问题。)

banner.createView(CreateViewCaller.build())//v1.6.6 版本中提供 CreateViewCaller
    .bindView(new BindViewCallBack<FrameLayout, BanneModel>() {
        @Override
        public void bindView(FrameLayout view, BanneModel data, int position) {//图片处理
            //使用glide 加载图片到 view组件,data 是你的数据 。
            ImageView imageView = CreateViewCaller.findImageView(view);

            Glide.with(view.getContext()).load(data.getUrl()).into(imageView);
        }

    }).execute(DateBox.banneModels());//填充数据

版本

v1.6.8

  • 修复部分问题
  • 增加部分参数

v1.6.7

  • 默认布局替换为包裹ImageView布局
  • 循环滚动条目数量限制更改

v1.6.6

  • 增加默认包裹ImageView布局

v1.6.5

  • 增加指示器滑动效果,由indicator_flow 属性控制
  • 修复滚动状态下currentItem 位置
  • 修复RecyclerBanner bug
  • 增加Gallery效果事例

v1.6.2

  • 修复RecyclerBanner 回弹问题,
  • 修复指示器为颜色时无法显示。

v1.6.0

  • 修复getCurrentItem()位置异常
  • 修复IndicatorLayout使用图片时宽高失控
  • 增加默认指示器indicator_shape 属性
  • 重构部分方法

v1.5.0 ~

  • 重构Banner
  • 增加RecyclerBanner
  • banner coding

感谢:

License

Copyright 2017 ymex.cn

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You can’t perform that action at this time.