Banner 浅析

来源:互联网 发布:java instanceof方法 编辑:程序博客网 时间:2024/05/16 07:28

1. Banner 是什么

Banner能实现循环播放多个广告图片和手动滑动循环等功能。
因为原生ViewPager并不支持循环翻页, 要实现循环还得需要自己去动手。

Banner框架可以进行不同样式、不同动画设置, 以及完善的api方法能满足大部分软件首页轮播图效果的需求。

下载地址:https://github.com/youth5201314/banner

Gradle 添加依赖dependencies{    compile 'com.youth.banner:banner:1.4.8'  //最新版本    or    compile 'com.youth.banner:banner:1.3.3' //旧版本,旧版本用法下面有跳转链接}

2. 简单使用

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

!!!此步骤可以省略,直接在Activity或者Fragment中new Banner();

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

2.2 重写布局加载器

public class GlideImageLoader extends ImageLoader {    @Override    public void displayImage(Context context, Object path, ImageView imageView) {        /**          注意:          1.图片加载器由自己选择,这里不限制,只是提供几种使用方法          2.返回的图片路径为Object类型,由于不能确定你到底使用的那种图片加载器,          传输的到的是什么格式,那么这种就使用Object接收和返回,你只需要强转成你传输的类型就行,          切记不要胡乱强转!         */        eg:        //Glide 加载图片简单用法       Glide.with(context)                .load(path)//图片地址                .crossFade()                .into(imageView);        //Picasso 加载图片简单用法        Picasso.with(context).load(path).into(imageView)        //用fresco加载图片简单用法,记得要写下面的createImageView方法        Uri uri = Uri.parse((String) path);        imageView.setImageURI(uri);    }    //提供createImageView 方法,如果不用可以不重写这个方法,主要是方便自定义ImageView的创建    @Override    public ImageView createImageView(Context context) {        //使用fresco,需要创建它提供的ImageView,当然你也可以用自己自定义的具有图片加载功能的ImageView        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);        return simpleDraweeView;    }}

2.3 在Activity或者Fragment中配置Banner

--------------------------简单使用-------------------------------@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Banner banner = (Banner) findViewById(R.id.banner);    //设置图片加载器    banner.setImageLoader(new GlideImageLoader());    //设置图片集合    banner.setImages(images);    //banner设置方法全部调用完毕时最后调用    banner.start();    //或者链式调用    banner.setImages(MyApplication.images)          .setImageLoader(new GlideImageLoader())          .start();}--------------------------详细使用-------------------------------@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Banner banner = (Banner) findViewById(R.id.banner);    //设置banner样式    banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);    //设置图片加载器    banner.setImageLoader(new GlideImageLoader());    //设置图片集合    banner.setImages(images);    //设置banner动画效果    banner.setBannerAnimation(Transformer.DepthPage);    //设置标题集合(当banner样式有显示title时)    banner.setBannerTitles(titles);    //设置自动轮播,默认为true    banner.isAutoPlay(true);    //设置轮播时间    banner.setDelayTime(1500);    //设置指示器位置(当banner模式中有指示器时)    banner.setIndicatorGravity(BannerConfig.CENTER);    //banner设置方法全部调用完毕时最后调用    banner.start();}-----------------当然如果你想偷下懒也可以这么用--------------------@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Banner banner = (Banner) findViewById(R.id.banner);    banner.setImages(images)          .setImageLoader(new GlideImageLoader())          .setBannerAnimation(Transformer.FlipHorizontal)          .start();}

2.4 增加体验

//如果你需要考虑更好的体验,可以这么操作@Overrideprotected void onStart() {    super.onStart();    //开始轮播    banner.startAutoPlay();}@Overrideprotected void onStop() {    super.onStop();    //结束轮播    banner.stopAutoPlay();}

3. Banner 各种强大动画

    //设置banner动画效果    banner.setBannerAnimation(Transformer.DepthPage);

这里写图片描述

4. Banner 各种内置样式

六种格式

 //默认是CIRCLE_INDICATOR        banner.setImages(MyApplication.images)                .setBannerTitles(MyApplication.titles)                .setBannerStyle(BannerConfig.NOT_INDICATOR)                .setImageLoader(new GlideImageLoader())                .start();

这里写图片描述

这里写图片描述

这里写图片描述

5. Banner 设置指示器位置

就是小圆点的位置

banner.setIndicatorGravity(BannerConfig.LEFT);banner.setIndicatorGravity(BannerConfig.CENTER);banner.setIndicatorGravity(BannerConfig.RIGHT);

6. Banner 自定义样式

        <com.youth.banner.Banner             xmlns:app="http://schemas.android.com/apk/res-auto"            android:id="@+id/banner1"            android:layout_width="match_parent"            android:layout_height="200dp"            app:indicator_drawable_selected="@drawable/selected_radius"            app:indicator_drawable_unselected="@drawable/unselected_radius"            app:indicator_height="8dp"            app:indicator_margin="4dp"            app:indicator_width="8dp" />        <com.youth.banner.Banner             xmlns:app="http://schemas.android.com/apk/res-auto"            android:id="@+id/banner2"            android:layout_width="match_parent"            android:layout_height="200dp"            app:indicator_drawable_selected="@color/main_color"            app:indicator_drawable_unselected="@android:color/white"            app:indicator_height="4dp"            app:indicator_margin="4dp"            app:indicator_width="20dp" />        <com.youth.banner.Banner             xmlns:app="http://schemas.android.com/apk/res-auto"            android:id="@+id/banner3"            android:layout_width="match_parent"            android:layout_height="200dp"            app:title_background="#555CB85C"            app:title_textsize="10sp"            app:title_textcolor="@android:color/white"            app:title_height="30dp"/>

这里写图片描述

0 0
原创粉丝点击