轮播图ConvenientBanner

Posted 冰糖葫芦三剑客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图ConvenientBanner相关的知识,希望对你有一定的参考价值。

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博客

以上是关于轮播图ConvenientBanner的主要内容,如果未能解决你的问题,请参考以下文章

轮播图ConvenientBanner

轮播图ConvenientBanner

无缝轮播图的一种方式原理

织梦DEDE轮播代码,从几个网站复制了几段轮播代码过来,轮播图有图,但不轮播,为啥?没用CSS和JS

使用ConvenientBanner时页面第一次显示总会显示最后一页

网页HTML代码制作轮播图效果