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、轮播图控件

3、设置翻页动画

4、自定义指示器

5、垂直滚动

6、Gallery 效果

7、指示器跟随移动

相关属性及方法

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>() 同上。

2. 使用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

感谢：

• RecyclerViewPager： https://github.com/lsjwzh/RecyclerViewPager

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.