Android Studio 中 Banner控件实现首页轮播图

 许多App首页都会有轮播图，下面来介绍一下Android Studio中如何用Banner控件完成轮播图的效果：

一、创建一个空项目

• 

为了方便，这里我们把模块名命名为banner

二、导入依赖包，添加网络权限

1. 打开Gradle Scripts文件夹，找到我们刚刚创建的banner项目
2. 导入下面依赖包：

   implementation ("io.github.youth5201314:banner:2.2.3")
   implementation ("com.github.bumptech.glide:glide:4.15.1")

3. 然后点击同步按钮，完成导包：
4. 接下来添加网络权限：

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

   android:allowBackup="true"

   

三、写布局文件

打开banner -> res -> layout ->activity_main.xml

在布局文件中添加banner控件，并加上约束：

<com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBaseline_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

四、写入Java代码

• 首先将轮播图片的网络地址添加到数组当中：（注意：一定是网络地址）

List<String> list = new ArrayList<>();
list.add("https://www.freeimg.cn/i/2024/05/02/66326df5aca83.jpg");
list.add("https://www.freeimg.cn/i/2024/05/02/66326cb20ff79.jpg");
list.add("https://www.freeimg.cn/i/2024/05/02/66326defb6cc2.jpg");

• 然后初始化banner控件：

Banner banner = findViewById(R.id.banner);

• 将数组中的元素添加到banner中：

banner.setAdapter(new BannerImageAdapter<String>(list) {
            @Override
            public void onBindView(BannerImageHolder holder, String data, int position, int size) {
                //网络权限
                Glide.with(holder.itemView)
                        .load(data)
                        .into(holder.imageView);
            }
        });
        banner.setIndicator(new CircleIndicator(this));
        banner.setIndicatorRadius(100);

一些常用的属性：

• 设置标题：banner.setBannerTitles(title);
• 设置时间：banner.setDelayTime(500);
• 自动播放：banner.isAutoPlay(true);
• 位置：banner.setIndicatorGravity(BannerConfig.CENTER);
• 设置动画效果：banner.setBannerAnimation(Transformer.Accordion);
• 样式：banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
• 启动：banner.start();

完整的Java文件代码：

package com.example.limu.banner;

import static com.example.limu.banner.R.*;
import static com.example.limu.banner.R.id.banner;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

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 java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        List<String> list = new ArrayList<>();
        list.add("https://www.freeimg.cn/i/2024/05/02/66326df5aca83.jpg");
        list.add("https://www.freeimg.cn/i/2024/05/02/66326cb20ff79.jpg");
        list.add("https://www.freeimg.cn/i/2024/05/02/66326defb6cc2.jpg");
        Banner banner = findViewById(R.id.banner);
        banner.setAdapter(new BannerImageAdapter<String>(list) {
            @Override
            public void onBindView(BannerImageHolder holder, String data, int position, int size) {
                //网络权限
                Glide.with(holder.itemView)
                        .load(data)
                        .into(holder.imageView);
            }
        });
        banner.setIndicator(new CircleIndicator(this));
        banner.setIndicatorRadius(100);
    }
}

完整的xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBaseline_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>