Android简单轮播

最新推荐文章于 2025-04-02 09:04:00 发布

滴滴撕滴颩

最新推荐文章于 2025-04-02 09:04:00 发布

阅读量536

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44564151/article/details/106838713

版权

在安卓开发中！都是经常会用轮播来展示图片！使用轮播即可以节省屏幕空间，又可展示多方面数据！

轮播实现原理：

1.Glide加载图片的实现图片显示！但缺点是每次只实现显示一张图片！

2.自定义继承BannerAdapter类适配器时跟Glide加载图片一起使用可实现多图片显示！

因为可重写BannerAdapter类中的onBindView进行多条数据循环绑定图片！

注意：1.Glide加载图片可加载本地图片，网络图片等等，

其中所加载本地图片是手机本地，而不是电脑本地；

2.一定要设置项目为Java8的支持，不然就会出现以下异常：

Invoke-customs are only supported starting with Android O (--min-api 26)

问题解决方法可参考：https://blog.youkuaiyun.com/luckyion/article/details/105395902

3.涉及到网络加载图片，记得在AndroidManifest.xml增加网络权限

实现步骤：

步骤一：在AndroidManifest.xml添加网络权限配置；

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

步骤二：在build.gradle文件的中dependencies里添加依赖

1.开源轮播组件

implementation 'com.youth.banner:banner:2.0.0-alpha02'

2.在创建ViewHolder时要继承recyclerview类

implementation 'androidx.recyclerview:recyclerview:1.1.0'

3.图片的显示要添加glide图片加载框架

implementation 'com.github.bumptech.glide:glide:4.11.0'

步骤三：布局（在布局中添加Banner）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

步骤四:在MainActivity中的onCreate中自定义轮播图片路径集合数据

/**
* 设置图片路径
*/
String url1 = "https://img-blog.csdnimg.cn/20200618170105692.png";
String url2 = "https://img-blog.csdnimg.cn/20200618170133562.png";
String url3 = "https://img-blog.csdnimg.cn/20200618170148290.png";

/**
* 创建一个list集合把图片路径装起来
*/
List<String> list = new ArrayList<>();
list.add(url1);
list.add(url2);
list.add(url3);

步骤五：自定义适配器（继承BannerAdapter创建图片加载类）

1.构造器用于外部访问并传入数据与上下文。

2.创建BannerViewHolder，用于存储定义好图片格式化的图片控件

创建一个类同时继承RecyclerView.ViewHolder类，并定义了构造方法用于外界方法对其数据进行读写

3.在onCreateHolder方法中获取装轮播的ImageView控件进行设置宽高大小和比例大小值后

并调用内部类的BannerViewHolder方法把图片格式的控进设置进去存储起来

4.在onBindView方法中绑定数据，获取图片路径后使用Glide 加载图片，会根据数据的总条数来定义显示不同图片的张数

Glide.with(context).load(图片路径).into(图片控件);

获取图片控件可直接通过内部类的BannerViewHolder方法获取之前存储的图片控件中获取

例子：

package com.gx.banner;

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

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

import com.bumptech.glide.Glide;

import java.util.List;

public class BannerAdapter extends com.youth.banner.adapter.BannerAdapter<String,BannerAdapter.BannerViewHolder> {
    private Context context;

    //1.构造器用于外部访问并传入数据与上下文。
    public BannerAdapter(List<String> datas, Context context) {
        super(datas);
        this.context = context;
    }

    //每次创建，绘制BannerAdapter的Holder时会回调，将会显示BannerViewHolder的返回
    @Override
    public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
        ImageView imageView = new ImageView(parent.getContext());
        //注意，必须设置为match_parent，这个是viewpager2强制要求的
        imageView.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        return new BannerViewHolder(imageView);
    }

    //绑定数据，获取图片路径后使用Glide 加载图片
    @Override
    public void onBindView(BannerViewHolder holder, String data, int position, int size) {

        //Glide 加载图片-简单用法
        Glide.with(context)
                .load(data)
                .into(holder.imageView);
    }

    //创建ViewHolder，用于存储定义好格式化的图片
    class BannerViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        public BannerViewHolder(@NonNull ImageView view) {
            super(view);
            this.imageView = view;
        }
    }
}

步骤六：在布局的MainActivity中的onCreate中初始化调用适配器

获取Banner控件，使用bannerHomeHeader.setAdapter(new HomeBannerAdapter(数据,上下文))设置适配器

把数据与上下文传到适配器中进行数据绑定，即可实现大概的轮播了！

也可以设置一些轮播样式效果，如：

.setIndicator(new CircleIndicator(mActivityContext))//设置圆形指示器

也可以设置点击事件，如：

.setOnBannerListener(new OnBannerListener() {

@Override

public void OnBannerClick(Object data, int position) {

//点击事件

}

});

例子：

package com.gx.banner;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
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 MainActivity extends AppCompatActivity {
    private Activity mActivityContext;
    private Banner bannerHeader;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mActivityContext=MainActivity.this;

       /* 获取控件*/
        bannerHeader=findViewById(R.id.banner);

        /**
         * 设置图片路径
         */
        String url1 = "https://img-blog.csdnimg.cn/20200618170105692.png";
        String url2 = "https://img-blog.csdnimg.cn/20200618170133562.png";
        String url3 = "https://img-blog.csdnimg.cn/20200618170148290.png";

        /**
         * 创建一个list集合把图片路径装起来
        */
        List<String> list = new ArrayList<>();
        list.add(url1);
        list.add(url2);
        list.add(url3);

        /*适配器初始化调用并传入轮播图片路径*/
        bannerHeader.setAdapter(new BannerAdapter(list,mActivityContext))
                .setIndicator(new CircleIndicator(mActivityContext))//设置圆形指示器
                .setIndicatorSelectedColorRes(R.color.colorPrimary)//设置被选中指示器的颜色
                .isAutoLoop(true)//自动开启轮播
                .setDelayTime(10*1000)//轮播间隔
                .setOnBannerListener(new OnBannerListener() {//设置点击图片事件监听
                    @Override
                    public void OnBannerClick(Object data, int position) {
                        //轮播点击事件
                        Toast.makeText(mActivityContext,String.valueOf(data),Toast.LENGTH_SHORT).show();//输出图片路径
                    }

                    @Override
                    public void onBannerChanged(int position) {
                       //轮播改变事件
                    }
                });
    }
}