轮播图是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
如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。
