Banner框架实现图片轮播

_jiaaang

已于 2022-11-22 00:53:57 修改

阅读量9.5k

点赞数 49

分类专栏： Android 文章标签： android 前端 viewpager java 程序人生

于 2020-10-22 13:06:45 首次发布

本文链接：https://blog.csdn.net/weixin_44758662/article/details/109173618

版权

Android 专栏收录该内容

31 篇文章 6 订阅

订阅专栏

Banner 实现图片轮播

Blog如有不对，敬请斧正
喜欢Android的可以关注我，日常更新Android干货
看都看到这了，加个关注叭！

简介

Banner能实现循环播放多个广告图片和手动滑动循环等功能，Banner框架可以进行不同样式、不同动画设置，以及完善的api方法能满足大部分软件首页轮播图效果的需求。

如:

QQ音乐:
在这里插入图片描述
网易云:

导入

在这里插入图片描述 //2.1.0以前jcenter的依赖
//implementation ‘com.youth.banner:banner:2.1.0’
//现在Maven Central
implementation ‘io.github.youth5201314:banner:2.2.2’’

自定义样式

主要是为Banner组件，添加适配器，继承自 BannerAdapter，BannerAdapter又适配器继承自RecyclerView.Adapter，故用法和RecyclerView.Adapter一样
如果RecyclerView还了解的可以看我以前的博客
地址:https://blog.csdn.net/weixin_44758662/article/details/108942044
步骤1:
在XML加入Banner组件

activity_mian.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
     android:layout_height="match_parent"
    android:background="#372E2C2C"
    >

    <com.youth.banner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="110dp"
        app:banner_radius="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        app:banner_loop_time="2000"
        />
</LinearLayout>

要实现的轮播样式XML，我只放了一个ImageView
banner用到的是ViewPage2，ViewPage2规定要layout_width和layout_height要match_parent，所以使用需要注意，不然会抛出错误

mybannerrecycler.xml：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/img_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
    />

步骤2:
创建保存轮播样式XML数据的get、set方法，我只有一个ImageView，，故我的只有一个int变量因为 通过R.drawable.xxx获取到的资源文件可以保存为int

infoBean.java

package com.example.CSDN;
public class infoBean {
    private int picture;

  infoBean(int picture){
      this.picture = picture;

  }
    public int getPicture() {
        return picture;
    }

    public void setPicture(int picture) {
        this.picture = picture;
    }
}

步骤3、创建Banner的适配器
mbanneradapter.java

package com.example.CSDN;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.youth.banner.adapter.BannerAdapter;
import java.util.List;

public class mbanneradapter extends BannerAdapter<infoBean,mbanneradapter.mbannerholder> {
Context context;

    /**
     * 自定义构造方法
     * @param context  上下文对象
     * @param datas    传入数据
     */
    public mbanneradapter(Context context,List<infoBean> datas) {
        super(datas);
        this.context = context;
    }

    @Override
    public mbannerholder onCreateHolder(ViewGroup parent, int viewType) {
        return new mbannerholder(LayoutInflater.from(context).inflate(R.layout.mybannerrecycler, parent, false));
    }

    @Override
    public void onBindView(mbannerholder holder, infoBean data, int position, int size) {
        holder.imageView.setImageResource(data.getPicture());
//设置监听
holder.itemView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(context,"第"+(position+1)+"张",Toast.LENGTH_SHORT).show();
    }
});

    }

    public class mbannerholder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public mbannerholder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.img_banner);
        }
    }
}

步骤4:
在主页面设置banner

package com.example.CSDN;
import android.app.Activity;
import android.os.Bundle;
import com.youth.banner.Banner;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;

public class homeActivity extends Activity {
    private Banner mbanner;
    List<infoBean> data = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mian);
        initDate();
        mbanner = findViewById(R.id.banner);
 //设置mbanner设配器
mbanner.setAdapter(new mbanneradapter(homeActivity.this,data));
//是否允许自动轮播
mbanner.isAutoLoop(true);
//设置指示器， CircleIndicator为已经定义好的类，直接用就好
mbanner.setIndicator(new CircleIndicator(this));
//开始轮播
mbanner.start();
    }

    /**
     * 设置数据，可以通过其他方法，这里快捷演示而已
     */
    private void initDate() {
        data.add(new infoBean(R.drawable.a));
        data.add(new infoBean(R.drawable.b));
        data.add(new infoBean(R.drawable.c));
        data.add(new infoBean(R.drawable.d));
        data.add(new infoBean(R.drawable.e));
    }

    /**
     * 重写onStop、onDestroy、onStart方法控制banner生命周期，体验更好
     */
    @Override
    protected void onStop() {
        super.onStop();
        mbanner.stop();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mbanner.destroy();
    }

    @Override
    protected void onStart() {
        super.onStart();
        mbanner.start();
    }
}

实现效果:
在这里插入图片描述

快捷使用

按照上面的方法，实属有点麻烦，而又只想实现一个图片的轮播效果而已，
那也好办，该框架已经做好了适配器，BannerImageAdapter我们直接用就好了

这样只用一个banner组件和一个添加图片数据的 List<Integer> list = new ArrayList()就好比自定义的方便多了

package com.example.CSDN;
import android.app.Activity;
import android.os.Bundle;
import com.youth.banner.Banner;
import com.youth.banner.adapter.BannerImageAdapter;
import com.youth.banner.holder.BannerImageHolder;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;

public class homeActivity extends Activity {
    private Banner mbanner;
    List<Integer> list = new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mian);
        initDate();
        mbanner = findViewById(R.id.banner);
 //设置mbanner设配器
        Banner banner = mbanner.setAdapter(new BannerImageAdapter<Integer>(list) {
            @Override
            public void onBindView(BannerImageHolder holder, Integer data, int position, int size) {
                holder.imageView.setImageResource(data);
            }

        });
//是否允许自动轮播
mbanner.isAutoLoop(true);
//设置指示器
mbanner.setIndicator(new CircleIndicator(this));
//开始轮播
mbanner.start();
    }

    /**
     * 设置数据，可以通过其他方法，这里快捷演示而已
     */
    private void initDate() {
        list.add(R.drawable.a);
        list.add(R.drawable.b);
        list.add(R.drawable.c);
        list.add(R.drawable.d);
        list.add(R.drawable.e);
    }

    /**
     * 重写onStop、onDestroy、onStart方法控制banner生命周期，体验更好
     */
    @Override
    protected void onStop() {
        super.onStop();
        mbanner.stop();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mbanner.destroy();
    }

    @Override
    protected void onStart() {
        super.onStart();
        mbanner.start();
    }
}

总结

下面是banner常用的方法和属性。
常用方法:

方法	详细
setAdapter(T extends BannerAdapter)	设置banner的适配器
getIndicator()	获取你设置的指示器
setIndicator(Indicator)	设置banner轮播指示器
getIndicator()	获取你设置的指示器
setIndicatorSelectedColor(@ColorInt)	设置指示器选中颜色
setIndicatorSpace(int)	设置指示器之间的间距
setBannerGalleryEffect(int,int,float)	画廊效果

XML中banner常用的属性

属性	详细
banner_loop_time	轮播间隔时间，默认3000
banner_radius	banner圆角半径
banner_orientation	轮播方向：horizontal（默认） or vertical
banner_auto_loop	是否自动轮播，默认true