Android通用广告栏（轮播图）的简单使用Convenient

轮播图是app必备的元素之一。今天来教大家如何简单使用他。

说明：

一,使用的Androidstudio版本为3.2.1

二,使用的ConvenientBanner版本为2.1.4最新版，和以前的版本有一定区别

三,ConvenientBanner是github大神封装的一个通用广告栏控件。使用起来简单高效，但是没有简单使用的详细文档。

github地址为：https://github.com/Bigkoo/Android-ConvenientBanner

展示效果:

banner.gif

现在正式开始

1，在build.gradle中做如下代码1--6步骤所示配置。

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.admin.jsbanner"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
//1,增加这个东西
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
        flatDir {
            dirs 'libs'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    //2,导入design，原因是通用广告栏ConvenientBanner使用了里面的元素
    implementation 'com.android.support:design:28.0.0'

    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //3，butterKnife，不是必须添加，如果你使用的项目使用的是DataBinding，可以不添加该依赖
    implementation 'com.jakewharton:butterknife:8.8.1'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

    //4，通用广告栏ConvenientBanner
    implementation 'com.bigkoo:ConvenientBanner:2.1.4'
    //5，图片缓存库
    implementation 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
    //glide图片库
    implementation 'com.github.bumptech.glide:glide:4.8.0'
}

2，在AndroidManifest.xml中增加联网的权限

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.admin.jsbanner">

    //因为加载网络图片，需要联网的权限
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

3，新建一个app类，ImageLoader需要在这里面初始化，如果你只需要使用glide加载网络图片的方式，那这个就不需要添加

package com.example.admin.jsbanner;

import android.app.Application;

import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

/**
 * author : zlf
 * date   : 2018/11/22
 * blog   :https://www.jianshu.com/u/281e9668a5a6
 */
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();

        //创建全局的配置来初始化ImageLoader
        ImageLoaderConfiguration configuration = ImageLoaderConfiguration.createDefault(this);
        ImageLoader.getInstance().init(configuration);
    }
}

4，在mipmap中加入两张指示器的图片ic_page_indicator.png和ic_page_indicator_focused.png

5，新建两个子布局item_banner1.xml和item_banner2.xml，轮播图默认加载这两个布局文件

<?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="210dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_banner1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/ic_launcher" />
</LinearLayout>

<?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="210dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_banner2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/ic_launcher" />
</LinearLayout>

6，在主activity对应的xml中添加ConvenientBanner，因为使用了两种加载方式，所以展示了两个

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.bigkoo.convenientbanner.ConvenientBanner
        android:id="@+id/cb_test1"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        android:background="@mipmap/ic_launcher"
        app:canLoop="true" />

    <com.bigkoo.convenientbanner.ConvenientBanner
        android:id="@+id/cb_test2"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        android:background="@mipmap/ic_launcher"
        app:canLoop="true" />
</LinearLayout>

7，使用了两种加载方式，如开篇展示图所示，有如下注意事项：

• initBanner1();使用的是ImageLoader加载方式
• initBanner2();使用的是glide加载图片的方式
• 在onResume和onPause中开始和停止轮播图
• mCanLoop用来控制如果是一张图片不能滑动，不能自动轮播，不展示指示器

package com.example.admin.jsbanner;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

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 com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * author : zlf
 * date   : 2018/11/22
 * blog   :https://www.jianshu.com/u/281e9668a5a6
 */
public class MainActivity extends AppCompatActivity {

    private Unbinder unbinder;
    @BindView(R.id.cb_test1)
    ConvenientBanner cbTest1;
    @BindView(R.id.cb_test2)
    ConvenientBanner cbTest2;

    // TODO: 2018/11/22 是否自动轮播,控制如果是一张图片，不能滑动
    private boolean mCanLoop = true;

    private ArrayList<String> arrayList;
    private DisplayImageOptions options;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        unbinder = ButterKnife.bind(this);
        initView();
        initBanner1();
        initBanner2();
    }

    @Override
    protected void onResume() {
        super.onResume();
        //开始执行轮播，并设置轮播时长
        cbTest1.startTurning(4000);
        cbTest2.startTurning(2000);
    }

    @Override
    protected void onPause() {
        super.onPause();
        //停止轮播
        cbTest1.stopTurning();
        cbTest2.stopTurning();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        unbinder.unbind();
    }

    /**
     * 初始化
     * 添加三张展示照片，网上随便找的，正常形式是调用接口从自己的后台服务器拿取
     */
    private void initView() {
        arrayList = new ArrayList<>();
        arrayList.add("http://img2.imgtn.bdimg.com/it/u=1447362014,2103397884&fm=200&gp=0.jpg");
        arrayList.add("http://img1.imgtn.bdimg.com/it/u=111342610,3492888501&fm=26&gp=0.jpg");
        arrayList.add("http://imgsrc.baidu.com/imgad/pic/item/77094b36acaf2eddc8c37dc7861001e9390193e9.jpg");
    }

    /**
     * 初始化轮播图1
     * setPageIndicator 设置指示器样式
     * setPageIndicatorAlign 设置指示器位置
     * setPointViewVisible 设置指示器是否显示
     * setCanLoop 设置是否轮播
     * setOnItemClickListener 设置每一张图片的点击事件
     */
    private void initBanner1() {

        // TODO: 2018/11/22 控制如果只有一张网络图片，不能滑动，不能轮播
        if(arrayList.size()<=1){
            mCanLoop=false;
        }

        cbTest1.setPages(new CBViewHolderCreator() {
            @Override
            public Holder createHolder(View itemView) {
                return new NetImageHolderView1(itemView);
            }

            @Override
            public int getLayoutId() {
                //设置加载哪个布局
                return R.layout.item_banner1;
            }
        }, arrayList)
                .setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL)
                .setPointViewVisible(mCanLoop)
                .setCanLoop(mCanLoop)
                .setOnItemClickListener(new OnItemClickListener() {
                    @Override
                    public void onItemClick(int position) {
                        Toast.makeText(MainActivity.this, "你点击了cbTest1的第" + position + "张图片", Toast.LENGTH_SHORT).show();
                    }
                });
    }

    /**
     * 初始化轮播图2
     */
    private void initBanner2() {
        cbTest2.setPages(new CBViewHolderCreator() {
            @Override
            public Holder createHolder(View itemView) {
                return new NetImageHolderView2(itemView);
            }

            @Override
            public int getLayoutId() {
                return R.layout.item_banner2;
            }
        }, arrayList)
                .setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL)
                .setPointViewVisible(mCanLoop)
                .setCanLoop(mCanLoop)
                .setOnItemClickListener(new OnItemClickListener() {
                    @Override
                    public void onItemClick(int position) {
                        Toast.makeText(MainActivity.this, "你点击了cbTest2的第" + position + "张图片", Toast.LENGTH_SHORT).show();
                    }
                });
    }

    /**
     * 轮播图1 对应的holder
     */
    public class NetImageHolderView1 extends Holder<String> {
        private ImageView mImageView;

        //构造器
        public NetImageHolderView1(View itemView) {
            super(itemView);
        }

        @Override
        protected void initView(View itemView) {
            //找到对应展示图片的imageview
            mImageView = itemView.findViewById(R.id.iv_banner1);
            //设置图片加载模式为铺满，具体请搜索 ImageView.ScaleType.FIT_XY
            mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
            //初始化options，可以加载不同情况下的默认图片
            options = new DisplayImageOptions.Builder()
                    .showImageOnLoading(R.mipmap.ic_launcher)//设置加载图片时候的图片
                    .showImageForEmptyUri(R.mipmap.ic_launcher)//设置图片uri为空或是错误的时候显示的图片
                    .showImageOnFail(R.mipmap.ic_launcher)//设置获取图片失败的默认图片
                    .cacheInMemory(true)//设置内存缓存
                    .cacheOnDisk(true)//设置外存缓存
                    .bitmapConfig(Bitmap.Config.RGB_565)
                    .build();
        }

        @Override
        public void updateUI(String data) {
            //使用ImageLoader加载图片
            ImageLoader.getInstance().displayImage(data, mImageView, options);
        }
    }

    /**
     * 轮播图2 对应的holder
     */
    public class NetImageHolderView2 extends Holder<String> {
        private ImageView mImageView;

        //构造器
        public NetImageHolderView2(View itemView) {
            super(itemView);
        }

        @Override
        protected void initView(View itemView) {
            //找到对应展示图片的imageview
            mImageView = itemView.findViewById(R.id.iv_banner2);
            //设置图片加载模式为铺满，具体请搜索 ImageView.ScaleType.FIT_XY
            mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
        }

        @Override
        public void updateUI(String data) {
            //使用glide加载更新图片
            Glide.with(MainActivity.this).load(data).into(mImageView);
        }
    }
}

7，项目结构和github地址

项目结构：

image.png

demo地址：https://github.com/mamumu/jsBanner

如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。