BannerDemo【圖片輪播圖控件】

版權聲明：本文為HaiyuKing原創文章，轉載請注明出處！

前言

這里簡單記錄下一個開源庫youth5201314/banner的運用。具體用法請閱讀《youth5201314/banner》。

本Demo搭配使用的是Glide4.7.1版本（這里只是簡單運用，主要用於自定義banner圖片加載器類中），有關Glide4.7.1的使用參考《GlideNewDemo【Glide4.7.1版本的簡單使用以及圓角功能】》

效果圖

使用步驟

一、項目組織結構圖

注意事項：

1、  導入類文件后需要change包名以及重新import R文件路徑

2、  Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復制里面的內容，不要整個覆蓋

二、導入步驟

1、在bundle.gradle中添加banner依賴，如果使用glide加載圖片，還需要依賴glide

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.why.project.bannerdemo"
        minSdkVersion 16
        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'
        }
    }
}
//glide repositories { mavenCentral() maven { url 'https://maven.google.com' } }
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7: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'

    //banner implementation 'com.youth.banner:banner:1.4.10'
    //glide implementation 'com.github.bumptech.glide:glide:4.7.1' //添加對 Glide 的注解和注解解析器的依賴 annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1' //添加一個對 OkHttp 集成庫的依賴 implementation "com.github.bumptech.glide:okhttp3-integration:4.7.1"
}

配置glide的步驟，請參考《GlideNewDemo【Glide4.7.1版本的簡單使用以及圓角功能】》

2、在AndroidManifest.xml中添加權限（根據需求添加，比如本demo中不需要加載本地圖片，所以就不需要申請存儲權限）

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

    <!-- ====================banner============================== -->
    <!-- 如果想要加載網絡上的圖片 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 如果想要加載本地的圖片 -->
    <!--<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />-->

    <application
        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、自定義的Banner圖片加載器

package com.why.project.bannerdemo.banner;

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

import com.bumptech.glide.Priority;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.example.myapp.GlideApp;
import com.why.project.bannerdemo.R;
import com.youth.banner.loader.ImageLoader;

import static com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions.withCrossFade;

/**
 * Created by HaiyuKing
 * Used 自定義的Banner圖片加載器
 */
public class BannerImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {

        GlideApp.with(context.getApplicationContext()) .load(path) //設置等待時的圖片
 .placeholder(R.drawable.placeholder_banner) //設置加載失敗后的圖片顯示
 .error(R.drawable.placeholder_banner) .fitCenter() //默認淡入淡出動畫
 .transition(withCrossFade()) //緩存策略,跳過內存緩存【此處應該設置為false，否則列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像，即降低分辨率后的（或者是轉換后的）
 .diskCacheStrategy(DiskCacheStrategy.ALL) //設置圖片加載的優先級
 .priority(Priority.HIGH) .into(imageView);
    }

    //提供createImageView 方法，如果不用可以不重寫這個方法，主要是方便自定義ImageView的創建
    /*@Override
    public ImageView createImageView(Context context) {
         //使用fresco，需要創建它提供的ImageView，當然你也可以用自己自定義的具有圖片加載功能的ImageView
        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
        return simpleDraweeView;
    }*/
}

4、將placeholder_banner.png復制到項目中

5、將banner_selected_radius.xml、banner_unselected_radius.xml復制到項目中

三、使用方法

1、在布局文件中添加Banner

<?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">

    <!-- 輪播圖區域：高度自定義 -->
    <com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/home_banner" android:layout_width="match_parent" android:layout_height="211dp" app:indicator_drawable_selected="@drawable/banner_selected_radius" app:indicator_drawable_unselected="@drawable/banner_unselected_radius" app:indicator_height="8dp" app:indicator_width="8dp" app:indicator_margin="4dp" app:is_auto_play="false" app:image_scale_type="fit_xy"
        />

</LinearLayout>

2、一般banner都會有三個要素：標題、圖片url地址、點擊打開的網址，所以需要創建一個bean類

package com.why.project.bannerdemo.bean;

/**
 * Created by HaiyuKing
 * Used Banner實體類
 */
public class BannerBean {
    private String title;
    private String imgUrl;
    private String urlPath;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getImgUrl() {
        return imgUrl;
    }

    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }

    public String getUrlPath() {
        return urlPath;
    }

    public void setUrlPath(String urlPath) {
        this.urlPath = urlPath;
    }
}

3、在Activity或者Fragment中賦值Banner

package com.why.project.bannerdemo;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.why.project.bannerdemo.banner.BannerImageLoader;
import com.why.project.bannerdemo.bean.BannerBean;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.listener.OnBannerListener;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<BannerBean> mBannerBeanList; private Banner mBannerView;

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

        initViews();
        initDatas();
    }

    private void initViews() {
        mBannerView = findViewById(R.id.home_banner);
    }

    private void initDatas() {
        mBannerBeanList = new ArrayList<BannerBean>();
        //這里手動添加一些測試數據
        BannerBean bannerBean1 = new BannerBean();
        bannerBean1.setTitle("西昌鐵路警方用表情包宣傳愛路小知識");
        bannerBean1.setImgUrl("https://b.bdstatic.com/boxlib/20180120/2018012017100383423448679.jpg");
        bannerBean1.setUrlPath("http://pic.chinadaily.com.cn/2018-01/20/content_35544757.htm");

        BannerBean bannerBean2 = new BannerBean();
        bannerBean2.setTitle("成都熊貓基地太陽產房全新升級");
        bannerBean2.setImgUrl("https://b.bdstatic.com/boxlib/20180120/2018012017100311270281486.jpg");
        bannerBean2.setUrlPath("http://pic.chinadaily.com.cn/2018-01/20/content_35544758.htm");

        BannerBean bannerBean3 = new BannerBean();
        bannerBean3.setTitle("長沙“90后”交警用手繪記錄交警故事");
        bannerBean3.setImgUrl("https://b.bdstatic.com/boxlib/20180120/2018012017100392134086973.jpg");
        bannerBean3.setUrlPath("http://pic.chinadaily.com.cn/2018-01/20/content_35544759.htm");

        mBannerBeanList.add(bannerBean1);
        mBannerBeanList.add(bannerBean2);
        mBannerBeanList.add(bannerBean3);

        initBanner();//設置Banner配置，必須在設置Banner數據之前執行
        initBannerData();//設置Banner的數據
        initBannerEvent();//設置Banner監聽事件
    }

    //設置Banner配置，必須在設置Banner數據之前執行
    private void initBanner() {
        //輪播圖的常規設置
        mBannerView.setIndicatorGravity(BannerConfig.RIGHT);//設置指示器局右顯示
        //====加載Banner數據====
        mBannerView.setImageLoader(new BannerImageLoader());//設置圖片加載器
        //設置顯示圓形指示器和標題（水平顯示）
        mBannerView.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
    }

    //設置Banner的數據
    private void initBannerData() {
        List<String> images = new ArrayList<String>();
        List<String> titles = new ArrayList<String>();
        for(BannerBean bannerBean : mBannerBeanList){
            images.add(bannerBean.getImgUrl());
            titles.add(bannerBean.getTitle());
        }
        mBannerView.setImages(images);
        mBannerView.setBannerTitles(titles);
        //banner設置方法全部調用完畢時最后調用
        mBannerView.start();
    }

    //設置Banner監聽事件
    private void initBannerEvent() {
        //設置banner的滑動監聽
        mBannerView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                String title = mBannerBeanList.get(position).getTitle();
                Toast.makeText(MainActivity.this,title,Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
        //設置點擊事件，下標是從0開始
        mBannerView.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                String urlPath = mBannerBeanList.get(position).getUrlPath();
                Toast.makeText(MainActivity.this,urlPath,Toast.LENGTH_SHORT).show();
            }
        });
    }

}

混淆配置

# banner 的混淆代碼
-keep class com.youth.banner.** {
    *;
}

glide的混淆配置參考《GlideNewDemo【Glide4.7.1版本的簡單使用以及圓角功能】》

參考資料

youth5201314/banner

項目demo下載地址

https://github.com/haiyuKing/BannerDemo