Android-Banner

发表于 分类于 本文字数： 17k
使用Banner插件快速实现banner轮播图

Banner1.4.10

github地址: https://github.com/youth5201314/banner/tree/release-1.4.10

引入Banner1

在build.gradle的dependencies中加入

1
2
3
dependencies{
    compile 'com.youth.banner:banner:1.4.10'  //最新版本
}

如果是本地arr文件文件
如何引入arr文件

使用Banner1

在布局中添加

在布局中插入Banner控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
    android:id="@+id/linear1"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="160dp"/>
</LinearLayout>

创建图片加载器

重写图片加载器，继承ImageLoader类

MysetImageLoader继承ImageLoader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.a.practice;

import android.content.Context;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.youth.banner.loader.ImageLoader;

public class MysetImageLoader extends ImageLoader {
    @Override
//    在这个方法中加载图片
    public void displayImage(Context context, Object o, ImageView imageView) {
//        返回的图片路径为Object类型强转为Image
        Glide.with(context).load(o).into((ImageView) imageView);
    }

    @Override
    public ImageView createImageView(Context context) {
//        返回一个新的ImageView控件
        return new ImageView(context);
    }
}

调用图片加载器

在Activity中调用图片加载器

1.初始化Banner控件，创建Banner所需的List集合

1
2
3
private Banner banner;//初始化banner控件
private List<String> urls = new ArrayList<>();//图片地址的集合
private List<String> titles = new ArrayList<>();//图片标题的集合

1
2
3
4
5
6
7
urls.add("https://pics2.baidu.com/feed/a8014c086e061d95bae4a9350d7a45d763d9cab6.png?token=a817a8157f425a71e0730e89fba08644&s=EC3807D166031CF67E2D059B0300E012");
urls.add("https://img1.baidu.com/it/u=2837730020,691715572&fm=26&fmt=auto");
urls.add("https://img0.baidu.com/it/u=1768887447,1227450589&fm=26&fmt=auto");
titles.add("刑天铠甲");
titles.add("飞影铠甲");
titles.add("金刚铠甲");
banner = findViewById(R.id.banner);

2.调用图片加载器

1
2
3
//  设置图片加载器
  MysetImageLoader mysetImageLoader = new MysetImageLoader();
  banner.setImageLoader(mysetImageLoader);

3.设置banner的其它一些属性

banner.start()一定要放在最后

1
2
3
4
5
6
7
8
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);//设置banner的指示器样式
banner.setImages(urls);//设置图片的数据源
banner.setBannerTitles(titles);//设置标题数据源
banner.setBannerAnimation(Transformer.DepthPage);//设置banner的动画效果
banner.isAutoPlay(true);//是否自动轮播
banner.setDelayTime(1500);//设置轮播切换时间
banner.setIndicatorGravity(BannerConfig.CENTER);//设置指示器显示位置
banner.start();//开始渲染

4.记得在清单文件中添加网络权限

1
<uses-permission android:name="android.permission.INTERNET" />

默认图片加载器

如果只想实现图片轮播功能，那大可不必继承，直接调用ImageLoader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//        设置图片加载器
        banner.setImageLoader(new ImageLoader() {
            @Override
//            在这个方法中加载图片
            public void displayImage(Context context, Object o, ImageView imageView) {
//                返回的图片路径为Object类型强转为Image
                Glide.with(context).load(o).into((ImageView) imageView);
            }

            @Override
            public ImageView createImageView(Context context) {
//                返回一个新的ImageView控件
                return new ImageView(context);
            }
        });

效果展示

其它相关设置

常量

常量名称描述所属方法
BannerConfig.NOT_INDICATOR不显示指示器和标题setBannerStyle
BannerConfig.CIRCLE_INDICATOR显示圆形指示器setBannerStyle
BannerConfig.NUM_INDICATOR显示数字指示器setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE显示数字指示器和标题setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE显示圆形指示器和标题（垂直显示）setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE显示圆形指示器和标题（水平显示）setBannerStyle
BannerConfig.LEFT指示器居左setIndicatorGravity
BannerConfig.CENTER指示器居中setIndicatorGravity
BannerConfig.RIGHT指示器居右setIndicatorGravity

动画常量类（setBannerAnimation方法调用）

常量类名
Transformer.Default
Transformer.Accordion
Transformer.BackgroundToForeground
Transformer.ForegroundToBackground
Transformer.CubeIn
Transformer.CubeOut
Transformer.DepthPage
Transformer.FlipHorizontal
Transformer.FlipVertical
Transformer.RotateDown
Transformer.RotateUp
Transformer.ScaleInOut
Transformer.Stack
Transformer.Tablet
Transformer.ZoomIn
Transformer.ZoomOut
Transformer.ZoomOutSlide

方法

方法名描述版本限制
setBannerStyle(int bannerStyle)设置轮播样式（默认为CIRCLE_INDICATOR）无
setIndicatorGravity(int type)设置指示器位置（没有标题默认为右边,有标题时默认左边）无
isAutoPlay(boolean isAutoPlay)设置是否自动轮播（默认自动）无
setViewPagerIsScroll(boolean isScroll)设置是否允许手动滑动轮播图（默认true）1.4.5开始
update(List<?> imageUrls,List titles)更新图片和标题1.4.5开始
update(List<?> imageUrls)更新图片1.4.5开始
startAutoPlay()开始轮播1.4开始，此方法只作用于banner加载完毕-->需要在start()后执行
stopAutoPlay()结束轮播1.4开始，此方法只作用于banner加载完毕-->需要在start()后执行
start()开始进行banner渲染（必须放到最后执行）1.4开始
setOffscreenPageLimit(int limit)同viewpager的方法作用一样1.4.2开始
setBannerTitle(String[] titles)设置轮播要显示的标题和图片对应（如果不传默认不显示标题）1.3.3结束
setBannerTitleList(List titles)设置轮播要显示的标题和图片对应（如果不传默认不显示标题）1.3.3结束
setBannerTitles(List titles)设置轮播要显示的标题和图片对应（如果不传默认不显示标题）1.4开始
setDelayTime(int time)设置轮播图片间隔时间（单位毫秒，默认为2000）无
setImages(Object[]/List<?> imagesUrl)设置轮播图片(所有设置参数方法都放在此方法之前执行)1.4后去掉数组传参
setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener)设置轮播图片，并且自定义图片加载方式1.3.3结束
setOnBannerClickListener(this)设置点击事件，下标是从1开始无（1.4.9以后废弃了）
setOnBannerListener(this)设置点击事件，下标是从0开始1.4.9以后
setOnLoadImageListener(this)设置图片加载事件，可以自定义图片加载方式1.3.3结束
setImageLoader(Object implements ImageLoader)设置图片加载器1.4开始
setOnPageChangeListener(this)设置viewpager的滑动监听无
setBannerAnimation(Class<? extends PageTransformer> transformer)设置viewpager的默认动画,传值见动画表无
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)设置viewpager的自定义动画无

Attributes属性（banner布局文件中调用）

Attributesformadescribe
delay_timeinteger轮播间隔时间，默认2000
scroll_timeinteger轮播滑动执行时间，默认800
is_auto_playboolean是否自动轮播，默认true
title_backgroundcolorreference
title_textcolorcolor标题字体颜色
title_textsizedimension标题字体大小
title_heightdimension标题栏高度
indicator_widthdimension指示器圆形按钮的宽度
indicator_heightdimension指示器圆形按钮的高度
indicator_margindimension指示器之间的间距
indicator_drawable_selectedreference指示器选中效果
indicator_drawable_unselectedreference指示器未选中效果
image_scale_typeenum和imageview的ScaleType作用一样
banner_default_imagereference当banner数据为空是显示的默认图片
banner_layoutreference自定义banner布局文件，但是必须保证id的名称一样（你可以将banner的布局文件复制出来进行修改）

Banner2.0

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

在gradle文件中引入

注意，使用了阿里云maven，所以下面引入的banner是在阿里云maven中的地址

1
implementation 'io.github.youth5201314:banner:2.2.2'//Banner

使用Banner2

插入Banner控件

在布局中插入Banner控件

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="160dp"/>
</LinearLayout>

创建适配器

创建MyBannerAdapter类继承BannerAdapter，BannerAdapter定义了一个泛型类，并强制进行ViewHolder优化，泛型类的类型决定了适配器的构造器中参数的类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.youth.banner.adapter.BannerAdapter;

import java.util.List;

//MyBannerAdapter定义了一个泛型类，并强制进行ViewHolder优化，泛型类的类型决定了适配器的构造器中参数的类型
public class MyBannerAdapter extends BannerAdapter<String,MyBannerAdapter.MyViewHolder> {

//    集合List的类型由泛型类中的类型决定，集合List的长度决定了轮播图的个数
    public MyBannerAdapter(List<String> datas) {
        super(datas);
    }

//    创建ViewHolder
    @Override
    public MyBannerAdapter.MyViewHolder onCreateHolder(ViewGroup parent, int viewType) {
        return null;
    }

//    绑定图片源，设置要显示的图片
    @Override
    public void onBindView(MyBannerAdapter.MyViewHolder holder, String data, int position, int size) {
        
    }

//    在ViewHolder中初始化Banner中的轮播图
    public class MyViewHolder extends RecyclerView.ViewHolder {
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}

配置适配器

使用了Glide动态设置图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.youth.banner.adapter.BannerAdapter;

import java.util.List;

//MyBannerAdapter定义了一个泛型类，并强制进行ViewHolder优化，泛型类的类型决定了适配器的构造器中参数的类型
public class MyBannerAdapter extends BannerAdapter<String,MyBannerAdapter.MyViewHolder> {
    private Context context;
    private List<String> datas;

//    集合List的类型由泛型类中的类型决定，集合List的长度决定了轮播图的个数
    public MyBannerAdapter(List<String> datas, Context context) {
        super(datas);
        this.context = context;
        this.datas = datas;
    }

//    创建ViewHolder
    @Override
    public MyBannerAdapter.MyViewHolder onCreateHolder(ViewGroup parent, int viewType) {
        ImageView imageView = new ImageView(parent.getContext());//创建图片控件
//        设置图片宽高属性
        imageView.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
        ));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置图片显示方式，此处强制铺满控件
        return new MyViewHolder(imageView);
    }

//    绑定图片源，设置要显示的图片
    @Override
    public void onBindView(MyBannerAdapter.MyViewHolder holder, String data, int position, int size) {
//        使用Glide动态加载图片
        Glide.with(context).load(datas.get(position)).into(holder.imageView);
    }

//    在ViewHolder中初始化Banner中的轮播图
    public class MyViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            this.imageView = (ImageView) itemView;
        }
    }
}

调用适配器

具体调用请看setBanner()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import com.youth.banner.Banner;
import com.youth.banner.indicator.CircleIndicator;
import com.youth.banner.listener.OnBannerListener;

import java.util.ArrayList;
import java.util.List;

public class BannerActivity extends AppCompatActivity {
    private Banner banner;
    private List<String> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);

        init();
        setBanner();
    }

    private void setBanner() {
//        实例化banner适配器
        MyBannerAdapter myBannerAdapter = new MyBannerAdapter(datas, this);
        banner.setAdapter(myBannerAdapter) //添加适配器
                .addBannerLifecycleObserver(this) //添加生命周期观察者
                .setIndicator(new CircleIndicator(this)) //添加指示器(小圆点)
                .isAutoLoop(true) //是否允许自动轮播
                .setLoopTime(1500); //自动轮播切换时间
//        设置点击事件，下标从0开始
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(Object data, int position) {
                Toast.makeText(BannerActivity.this,"点击了" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void init() {
        banner = findViewById(R.id.banner);//初始化banner
//        设置数据源
        datas = new ArrayList<>();
        datas.add("https://pics2.baidu.com/feed/a8014c086e061d95bae4a9350d7a45d763d9cab6.png?token=a817a8157f425a71e0730e89fba08644&s=EC3807D166031CF67E2D059B0300E012");
        datas.add("https://img1.baidu.com/it/u=2837730020,691715572&fm=26&fmt=auto");
        datas.add("https://img0.baidu.com/it/u=1768887447,1227450589&fm=26&fmt=auto");
    }
}

默认Banner适配器

如果仅想实现简单的图片轮播，就使用默认的Banner适配器，具体改动请看setBanner()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;
import com.youth.banner.adapter.BannerImageAdapter;
import com.youth.banner.holder.BannerImageHolder;
import com.youth.banner.indicator.CircleIndicator;
import com.youth.banner.listener.OnBannerListener;

import java.util.ArrayList;
import java.util.List;

public class BannerActivity extends AppCompatActivity {
    private Banner banner;
    private List<String> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);
        init();
        setBanner();
    }

//    如果仅仅想实现图片轮播，那就是用默认的Banner适配器BannerImageAdapter
    private void setBanner() {
//        使用默认适配器
        banner.setAdapter(new BannerImageAdapter<String>(datas) {
            @Override
            public void onBindView(BannerImageHolder holder, String data, int position, int size) {
//                使用Glide动态加载图片
                Glide.with(BannerActivity.this).load(datas.get(position)).into(holder.imageView);
            }
        });
        banner.addBannerLifecycleObserver(this) //添加生命周期观察者
                .setIndicator(new CircleIndicator(this)) //添加指示器(小圆点)
                .isAutoLoop(true) //是否允许自动轮播
                .setLoopTime(1500); //自动轮播切换时间
//        设置点击事件，下标从0开始
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(Object data, int position) {
                Toast.makeText(BannerActivity.this,"点击了" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void init() {
        banner = findViewById(R.id.banner);//初始化banner
//        设置数据源
        datas = new ArrayList<>();
        datas.add("https://pics2.baidu.com/feed/a8014c086e061d95bae4a9350d7a45d763d9cab6.png?token=a817a8157f425a71e0730e89fba08644&s=EC3807D166031CF67E2D059B0300E012");
        datas.add("https://img1.baidu.com/it/u=2837730020,691715572&fm=26&fmt=auto");
        datas.add("https://img0.baidu.com/it/u=1768887447,1227450589&fm=26&fmt=auto");
    }
}

网络权限

不要忘记在清单文件中添加网络权限

1
2
<!-- 网络权限 -->
<uses-permission android:name="android.permission.INTERNET" />

效果展示

Banner2方法

方法名返回类型描述
getAdapter()extends BannerAdapter获取你设置的BannerAdapter
getViewPager2()ViewPager2获取ViewPager2
getIndicator()Indicator获取你设置的指示器（没有设置直接获取会抛异常哦）
getIndicatorConfig()IndicatorConfig获取你设置的指示器配置信息（没有设置直接获取会抛异常哦）
getRealCount()int返回banner真实总数
setUserInputEnabled(boolean)this禁止手动滑动Banner;true 允许，false 禁止
setDatas(List)this重新设置banner数据
isAutoLoop(boolean)this是否允许自动轮播
setLoopTime(long)this设置轮播间隔时间（默认3000毫秒）
setScrollTime(long)this设置轮播滑动的时间（默认800毫秒）
start()this开始轮播(主要配合生命周期使用)，或者你手动暂停再次启动
stop()this停止轮播(主要配合生命周期使用)，或者你需要手动暂停
setAdapter(T extends BannerAdapter)this设置banner的适配器
setAdapter(T extends BannerAdapter,boolean)this设置banner的适配器,是否支持无限循环
setOrientation(@Orientation)this设置banner轮播方向(垂直or水平)
setOnBannerListener(this)this设置点击事件，下标是从0开始
addOnPageChangeListener(this)this添加viewpager2的滑动监听
setPageTransformer(PageTransformer)this设置viewpager的切换效果
addPageTransformer(PageTransformer)this添加viewpager的切换效果（可以设置多个）
setIndicator(Indicator)this设置banner轮播指示器(提供有base和接口，可以自定义)
setIndicator(Indicator,boolean)this设置指示器（传false代表不将指示器添加到banner上，配合布局文件，可以自我发挥）
setIndicatorSelectedColor(@ColorInt)this设置指示器选中颜色
setIndicatorSelectedColorRes(@ColorRes)this设置指示器选中颜色
setIndicatorNormalColor(@ColorInt)this设置指示器默认颜色
setIndicatorNormalColorRes(@ColorRes)this设置指示器默认颜色
setIndicatorGravity(@IndicatorConfig.Direction)this设置指示器位置（左，中，右）
setIndicatorSpace(int)this设置指示器之间的间距
setIndicatorMargins(IndicatorConfig.Margins)this设置指示器的Margins
setIndicatorWidth(int,int)this设置指示器选中和未选中的宽度，直接影响绘制指示器的大小
setIndicatorNormalWidth(int)this设置指示器未选中的宽度
setIndicatorSelectedWidth(int)this设置指示器选中的宽度
setIndicatorRadius(int)this设置指示器圆角，不要圆角可以设置为0
setIndicatorHeight(int)this设置指示器高度
setBannerRound(float)this设置banner圆角（还有一种setBannerRound2方法，需要5.0以上）
setBannerGalleryEffect(int,int,float)this画廊效果
setBannerGalleryMZ(int,float)this魅族效果
setStartPosition(int)this设置开始的位置 (需要在setAdapter或者setDatas之前调用才有效哦)
setIndicatorPageChange()this设置指示器改变监听 (一般是为了配合数据操作使用，看情况自己发挥)
setCurrentItem()this设置当前位置，和原生使用效果一样
addBannerLifecycleObserver()this给banner添加生命周期观察者，内部自动管理banner的生命周期

Banner2属性

Attributesformatdescribe
banner_loop_timeinteger轮播间隔时间，默认3000
banner_auto_loopboolean是否自动轮播，默认true
banner_infinite_loopboolean是否支持无限循环（即首尾直接过渡），默认true
banner_orientationenum轮播方向：horizontal（默认） or vertical
banner_radiusdimensionbanner圆角半径，默认0（不绘制圆角）
banner_indicator_normal_widthdimension指示器默认的宽度，默认5dp （对RoundLinesIndicator无效）
banner_indicator_selected_widthdimension指示器选中的宽度，默认7dp
banner_indicator_normal_colorcolor指示器默认颜色，默认0x88ffffff
banner_indicator_selected_colorcolor指示器选中颜色，默认0x88000000
banner_indicator_spacedimension指示器之间的间距，默认5dp （对RoundLinesIndicator无效）
banner_indicator_gravitydimension指示器位置，默认center
banner_indicator_margindimension指示器的margin,默认5dp，不能和下面的同时使用
banner_indicator_marginLeftdimension指示器左边的margin
banner_indicator_marginTopdimension指示器上边的margin
banner_indicator_marginRightdimension指示器右边的margin
banner_indicator_marginBottomdimension指示器下边的margin
banner_indicator_heightdimension指示器高度（对CircleIndicator无效）
banner_indicator_radiusdimension指示器圆角（对CircleIndicator无效）
banner_round_top_leftboolean设置要绘制的banner圆角方向（如果都不设置默认全部）
banner_round_top_rightboolean设置要绘制的banner圆角方向（如果都不设置默认全部）
banner_round_bottom_leftboolean设置要绘制的banner圆角方向（如果都不设置默认全部）
banner_round_bottom_rightboolean设置要绘制的banner圆角方向（如果都不设置默认全部）