轮播图ConvenientBanner

Posted 2021-10-07 冰糖葫芦三剑客

1.依赖：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.0"

    defaultConfig {
        applicationId "com.example.myrecycleviewtest"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    api 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'com.bigkoo:ConvenientBanner:2.1.4'
    implementation 'com.github.bumptech.glide:glide:3.7.0'

}

2.主要代码：

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.bigkoo.convenientbanner.ConvenientBanner;
import com.bigkoo.convenientbanner.holder.CBViewHolderCreator;
import com.bigkoo.convenientbanner.holder.Holder;
import com.bigkoo.convenientbanner.listener.OnItemClickListener;
import com.bumptech.glide.Glide;

import java.util.ArrayList;

public class BannerActivity extends AppCompatActivity {

    private ConvenientBanner mConvenientBanner;
    private String[] images = {"https://image.baidu.com/search/detail?z=0&word=%E9%A3%8E%E6%99%AF%E5%9B%BE%E7%89%87%E5%A4%A7%E5%85%A8&hs=0&pn=0&spn=0&di=&pi=204334&tn=baiduimagedetail&is=&ie=utf-8&oe=utf-8&cs=1732966997%2C2981886582&os=&simid=&adpicid=0&lpn=0&fr=albumsdetail&fm=&ic=0&sme=&cg=&bdtype=&oriquery=&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D1732966997%2C2981886582%26fm%3D193%26f%3DGIF&fromurl=ipprf_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bev2_z%26e3Bv54AzdH3Fv6jwptejAzdH3Fb8nc0da98&gsm=0&islist=&querylist=&album_tab=%E9%A3%8E%E6%99%AF%E6%97%85%E8%A1%8C&album_id=584",
            "http://img2.3lian.com/2014/f2/37/d/40.jpg",
            "http://d.3987.com/sqmy_131219/001.jpg",
            "http://img2.3lian.com/2014/f2/37/d/39.jpg",
            "http://www.8kmm.com/UploadFiles/2012/8/201208140920132659.jpg",
            "http://f.hiphotos.baidu.com/image/h%3D200/sign=1478eb74d5a20cf45990f9df460b4b0c/d058ccbf6c81800a5422e5fdb43533fa838b4779.jpg",
            "http://f.hiphotos.baidu.com/image/pic/item/09fa513d269759ee50f1971ab6fb43166c22dfba.jpg"
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner);

        mConvenientBanner = (ConvenientBanner) findViewById(R.id.convenientBanner);

        //设置轮播图相关信息
        mConvenientBanner.setPages(
                new CBViewHolderCreator() {
                    @Override
                    public NetWorkImageHolderView createHolder(View itemView) {
                        //设置网络图片信息
                        return new NetWorkImageHolderView(BannerActivity.this, itemView);
                    }

                    @Override
                    public int getLayoutId() {
                        return R.layout.item_banner_image;
                    }
                }, getImages())//设置网络图片数据
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT)//指示器位置
                .setPageIndicator(new int[]{R.drawable.delivery, R.drawable.icon_arrow_up});//两个指示器
        //设置点击事件
        mConvenientBanner.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(BannerActivity.this, "目标" + position, Toast.LENGTH_SHORT).show();
            }
        });
        //开始轮播 2000时间间隔
        mConvenientBanner.startTurning(2000);
    }

    /**
     * 获取图片信息
     * @return
     */
    private ArrayList<String> getImages() {
        ArrayList<String> imageList = new ArrayList<>();
        for (int i = 0; i < images.length; i++) {
            imageList.add(images[i]);
        }
        return imageList;
    }

    @Override
    protected void onResume() {
        super.onResume();
        mConvenientBanner.startTurning();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mConvenientBanner.stopTurning();
    }

    public class NetWorkImageHolderView extends Holder<String> {
        private ImageView headBannerImage;
        private Context mContext;

        private NetWorkImageHolderView(Context context, View itemView) {
            super(itemView);
            mContext = context;
        }

        @Override
        protected void initView(View itemView) {
//            headBannerImage = new ImageView(BannerActivity.this);
//            headBannerImage.setScaleType(ImageView.ScaleType.FIT_XY);
            headBannerImage =itemView.findViewById(R.id.head_banner_img);
        }

        @Override
        public void updateUI(String data) {
//            GlideUtils.loadImage(mContext, data, headBannerImage);
//            Glide.with(BannerActivity.this)
//                    .load(data)
//                    .placeholder(R.drawable.ic_launcher_background)//图片加载出来前，显示的图片
//                    .error(R.drawable.ic_launcher_background)//图片加载失败后，显示的图片
//                    .into(headBannerImage);
            GlideUtils.loadImageView(BannerActivity.this,data,headBannerImage);
        }
    }
}

3.工具类GlideUtils：

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

import com.bumptech.glide.Glide;

public class GlideUtils {

    /**
     * 方法描述：加载普通图片信息
     * Glide版本：3.7.0
     * @param context 上下文
     * @param data 网络图片地址
     * @param headBannerImage 展示的图片控件
     */
    public static void loadImageView(Context context, String data, ImageView headBannerImage){
        Glide.with(context)
                .load(data)
                .placeholder(R.drawable.ic_launcher_background)//图片加载出来前，显示的图片
                .error(R.drawable.ic_launcher_background)//图片加载失败后，显示的图片
                .into(headBannerImage);
    }
}

activity_banner

<?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=".BannerActivity">
    <com.bigkoo.convenientbanner.ConvenientBanner
        android:id="@+id/convenientBanner"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        app:canLoop="true"
        tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

item_banner_image

<?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">
    <ImageView
        android:id="@+id/head_banner_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Android通用广告栏（轮播图）的简单使用ConvenientBanner - 简书 (jianshu.com)

(90条消息) ConvenientBanner的使用_xiaowanzi1020的博客-CSDN博客