All Projects → ymex → Banner

ymex / Banner

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 支持动画,指示器扩展等。

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Banner

Cardslideview
一行代码实现ViewPager卡片效果,比ViewPager2更强大,底层同样是RecyclerView
Stars: ✭ 301 (+213.54%)
Mutual labels:  recyclerview, gallery, viewpager, banner
Gallerylayoutmanager
New way to implements ViewPager/Gallery in Android with RecycleView
Stars: ✭ 684 (+612.5%)
Mutual labels:  recyclerview, gallery, viewpager
Recyclerview Gallery
Recyclerview-Gallery:This library shows you a gallery using RecyclerView.
Stars: ✭ 420 (+337.5%)
Mutual labels:  recyclerview, gallery
Pagetransformerhelp
👍 A PageTransformer library for Android ViewPager,have some Banner styles. ViewPager 实现轮播图、实现卡片切换。
Stars: ✭ 478 (+397.92%)
Mutual labels:  viewpager, banner
Bannerlayout
Support unlimited picture rotation BannerLayout, the minimum implementation of the code banner
Stars: ✭ 92 (-4.17%)
Mutual labels:  viewpager, banner
Adapter
A quick adapter library for RecyclerView, GridView, ListView, ViewPager, Spinner
Stars: ✭ 376 (+291.67%)
Mutual labels:  recyclerview, viewpager
Banner
🔥🔥ViewPager,ViewPager2无限轮播功能。自定义Indicator,支持一屏三页,支持仿魅族banner效果。极其简单的使用方式
Stars: ✭ 393 (+309.38%)
Mutual labels:  viewpager, banner
Discretescrollview
A scrollable list of items that centers the current element and provides easy-to-use APIs for cool item animations.
Stars: ✭ 5,533 (+5663.54%)
Mutual labels:  recyclerview, viewpager
Transformerslayout
🔥 App金刚区导航菜单,类似淘宝、QQ音乐等APP导航,方格布局横向多行滑动翻页带滚动条
Stars: ✭ 258 (+168.75%)
Mutual labels:  recyclerview, viewpager
Viewpagerhelper
这个一个 viewpager/viewpager2工具类,能够帮你快速实现导航栏轮播图,app引导页,viewpager/viewpager2 + fragment;内置多种tab指示器,让你告别 viewpager 的繁琐操作,专注逻辑功能
Stars: ✭ 957 (+896.88%)
Mutual labels:  viewpager, banner
Base Mvvm
App built to showcase basic Android View components like ViewPager, RecyclerView(homogeneous and heterogeneous items), NavigationDrawer, Animated Vector Drawables, Collapsing Toolbar Layout etc. housed in a MVVM architecture
Stars: ✭ 18 (-81.25%)
Mutual labels:  recyclerview, viewpager
Verticalviewpager
A vertical scroll ViewPager implementation. Use with scrollable views(ListView, ScrollView, RecyclerView).
Stars: ✭ 64 (-33.33%)
Mutual labels:  recyclerview, viewpager
Corbind
Kotlin Coroutines binding APIs for Android UI widgets from the platform and support libraries
Stars: ✭ 357 (+271.88%)
Mutual labels:  recyclerview, viewpager
Scrollingpagerindicator
Pager indicator inspired by Instagram. Lightweight and easy to set up.
Stars: ✭ 419 (+336.46%)
Mutual labels:  recyclerview, viewpager
Bannerview
横幅广告图片轮播控件
Stars: ✭ 290 (+202.08%)
Mutual labels:  viewpager, banner
Banner
轮播图控件,支持自定义布局,支持两端缩进,类似卡片,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等!
Stars: ✭ 512 (+433.33%)
Mutual labels:  viewpager, banner
Antonio
Android library for the adapter view (RecyclerView, ViewPager, ViewPager2)
Stars: ✭ 89 (-7.29%)
Mutual labels:  recyclerview, viewpager
FastBanner
🔥快速轮播图,支持自定义布局和使用自有图片显示组件
Stars: ✭ 27 (-71.87%)
Mutual labels:  banner, viewpager
Recyclerpager
Using RecyclerView and SnapHelper replace ViewPager
Stars: ✭ 73 (-23.96%)
Mutual labels:  recyclerview, viewpager
Collapsingrefresh
AppBarLayout+ViewPager+RecyclerView的刷新功能
Stars: ✭ 69 (-28.12%)
Mutual labels:  recyclerview, viewpager

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].