GlideDemo【Glide3.7.0版本的簡單使用以及圓角功能】

版權聲明:本文爲HaiyuKing原創文章,轉載請註明出處!java

前言

本Demo主要記錄Glide3.7.0版本的簡單運用和實現圓角方案。android

效果圖

代碼分析

Glide的centerCrop()和fitCenter()的使用效果:git

Glide 提供了兩個相似的方法 CenterCrop() 和 FitCenter(),CenterCrop() 方法是將圖片按比例縮放到足矣填充 ImageView 的尺寸,可是圖片可能會顯示不完整;而 FitCenter() 則是圖片縮放到小於等於 ImageView 的尺寸,這樣圖片是顯示完整了,可是 ImageView 就可能不會填滿了。github

不論在佈局文件中如何設置ImageView控件的android:scaleType值,Glide只要執行了CenterCrop() 或者FitCenter(),那麼就會以Glide的設置爲準。緩存

使用步驟

1、項目組織結構圖

注意事項:網絡

一、  導入類文件後須要change包名以及從新import R文件路徑app

二、  Values目錄下的文件(strings.xml、dimens.xml、colors.xml等),若是項目中存在,則複製裏面的內容,不要整個覆蓋ide

2、導入步驟

(1)在APP的build.gradle中添加Glide依賴

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.glidedemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    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'
 //glide引用(雖然多個庫中引用屬於重複引用,可是隻有當前庫中引用,當前庫纔可使用,因此仍是要引用的) //(對於第三方庫引用的glide版本,儘可能不要修改) compile 'com.github.bumptech.glide:glide:3.7.0' compile 'com.android.support:support-v4:27.1.1' //集成 OkHttp 做爲 Glide 的網絡庫 //https://www.jianshu.com/p/7ce7b02988a4 //https://stackoverflow.com/questions/37129757/glide-with-okhttp3-integration-java-lang-noclassdeffounderror compile 'com.github.bumptech.glide:okhttp-integration:1.4.0@aar' compile 'com.squareup.okhttp:okhttp:2.7.5' //注意,okHttp和okHttps不同的配置 // compile 'com.github.bumptech.glide:okhttp3-integration:1.4.0@aar' // compile 'com.squareup.okhttp3:okhttp:3.2.0'
}

(2)將GlideConfigModule.java複製到項目中

package com.why.project.glidedemo.glide;

import android.content.Context;

import com.bumptech.glide.Glide;
import com.bumptech.glide.GlideBuilder;
import com.bumptech.glide.load.DecodeFormat;
import com.bumptech.glide.load.engine.bitmap_recycle.LruBitmapPool;
import com.bumptech.glide.load.engine.cache.LruResourceCache;
import com.bumptech.glide.load.engine.cache.MemorySizeCalculator;
import com.bumptech.glide.module.GlideModule;

/**
 * Used 自定義Glide配置
 */
public class GlideConfigModule implements GlideModule{
    int diskSize = 1024 * 1024 * 100;
    int memorySize = (int) (Runtime.getRuntime().maxMemory()) / 8;  // 取1/8最大內存做爲最大緩存

    /* (non-Javadoc)
     * @see com.bumptech.glide.module.GlideModule#applyOptions(android.content.Context, com.bumptech.glide.GlideBuilder)
     */
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        // 定義緩存大小和位置
        //builder.setDiskCache(new InternalCacheDiskCacheFactory(context, diskSize));  //內存中
        //builder.setDiskCache(new ExternalCacheDiskCacheFactory(context, "cache", diskSize)); //sd卡中
        
        // 默認內存和圖片池大小
        MemorySizeCalculator calculator = new MemorySizeCalculator(context);
        int defaultMemoryCacheSize = calculator.getMemoryCacheSize(); // 默認內存大小
        int defaultBitmapPoolSize = calculator.getBitmapPoolSize(); // 默認圖片池大小
        builder.setMemoryCache(new LruResourceCache(defaultMemoryCacheSize)); // 該兩句無需設置,是默認的
        builder.setBitmapPool(new LruBitmapPool(defaultBitmapPoolSize));

        // 自定義內存和圖片池大小
        /*builder.setMemoryCache(new LruResourceCache(memorySize));
        builder.setBitmapPool(new LruBitmapPool(memorySize));*/

        // 定義圖片格式
        //builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);//與picasso相同
        builder.setDecodeFormat(DecodeFormat.PREFER_RGB_565); // 默認
    }

    /* (non-Javadoc)
     * @see com.bumptech.glide.module.GlideModule#registerComponents(android.content.Context, com.bumptech.glide.Glide)
     */
    @Override
    public void registerComponents(Context arg0, Glide arg1) {
        // TODO Auto-generated method stub
        
    }

}

(3)在AndroidManifest.xml中添加如下代碼【注意GlideConfigModule的路徑】【根據實際狀況添加權限,有些權限須要申請運行時權限

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

    <!-- Glide -->
    <!--若是你計劃從 URL 或一個網絡鏈接中加載數據,你須要添加 INTERNET 和 ACCESS_NETWORK_STATE 權限-->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!--若是你正在從 URL 加載圖片,Glide 能夠自動幫助你處理片狀網絡鏈接:它能夠監聽用戶的鏈接狀態並在用戶從新鏈接到網絡時重啓以前失敗的請求。 若是 Glide 檢測到你的應用擁有 ACCESS_NETWORK_STATE 權限,Glide 將自動監聽鏈接狀態而不須要額外的改動。-->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <!--要從本地文件夾或 DCIM 或圖庫中加載圖片,你將須要添加 READ_EXTERNAL_STORAGE 權限-->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <!--而若是要將 Glide 的緩存存儲到公有 SD 卡上,你還須要添加 WRITE_EXTERNAL_STORAGE 權限-->
    <uses-permission android:name="android.permission.WRITE_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>

        <!-- *************************自定義Glide配置文件************************* -->
        <meta-data android:name="com.why.project.glidedemo.glide.GlideConfigModule" android:value="GlideModule" />
    </application>

</manifest>

(4)將transformations包(實現圓角方案)複製到項目中【裏面一共是四種圓角方案,實際項目中選擇其中一個便可】【根據須要複製到項目中

3、使用方法

(1)佈局文件

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f4f4f4">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的基礎使用(使用fitCenter配合wrap_content顯示原圖大小):"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_base" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的從新改變圖片大小(使用override):"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_override" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的圓角效果(使用MyRoundCornersTransformation,fitCenter()和centerCrop()方法會失效,本身設置的android:scaleType也會失效)"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_myRound" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的圓角效果(使用RoundCornersTransformation,fitCenter()和centerCrop()方法會失效,本身設置的android:scaleType也會失效)"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_round" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的圓角效果(使用GlideCircleTransform,fitCenter()和centerCrop()方法會失效,本身設置的android:scaleType也會失效)"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_circle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Glide的圓角效果(使用BitmapCircleUtil)"/>
        <!-- 圖片使用src和android:scaleType="centerCrop"、android:adjustViewBounds="true",能夠實現寬高等邊 -->
        <ImageView android:id="@+id/img_circleUtil" android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:contentDescription="@string/app_name" android:scaleType="fitCenter" android:src="@drawable/img_error"/>

    </LinearLayout>

</ScrollView>

(2)代碼中寫法

package com.why.project.glidedemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.Priority;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.bumptech.glide.request.target.BitmapImageViewTarget;
import com.why.project.glidedemo.glide.transformations.BitmapCircleUtil;
import com.why.project.glidedemo.glide.transformations.GlideCircleTransform;
import com.why.project.glidedemo.glide.transformations.MyRoundCornersTransformation;
import com.why.project.glidedemo.glide.transformations.RoundCornersTransformation;

public class MainActivity extends AppCompatActivity {

    private Context mContext;

    private ImageView mImgBase;
    private ImageView mImgOverride;
    private ImageView mImgMyRound;
    private ImageView mImgRound;
    private ImageView mImgCircle;
    private ImageView mImgCircleUtil;

    private String imgUrl = "https://pic.cnblogs.com/avatar/93830/20170607145247.png";

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

        mContext = this;

        initViews();
        initDatas();
    }

    private void initViews() {
        mImgBase = findViewById(R.id.img_base);
        mImgOverride = findViewById(R.id.img_override);
        mImgMyRound = findViewById(R.id.img_myRound);
        mImgRound = findViewById(R.id.img_round);
        mImgCircle = findViewById(R.id.img_circle);
        mImgCircleUtil = findViewById(R.id.img_circleUtil);
    }

    private void initDatas() {

        glideBase();
        glideOverride();
        glideRound();
        glideRound2();
        glideRound3();
        glideRound4();
    }

    //Glide的基礎使用
    private void glideBase() {
        Glide.with(mContext) .load(imgUrl) //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .fitCenter() //默認淡入淡出動畫
 .crossFade() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)
 .diskCacheStrategy(DiskCacheStrategy.RESULT) //設置圖片加載的優先級
 .priority(Priority.HIGH) .into(mImgBase);
    }

    //Glide從新改變圖片大小
    private void glideOverride() { setColumnNumber(mContext,3);//計算寬度和高度值(1:1.5或者1:1)
 Glide.with(mContext) .load(imgUrl) //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .centerCrop() .override(imageWidthSize,imageHeightSize) //默認淡入淡出動畫
 .crossFade() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)
 .diskCacheStrategy(DiskCacheStrategy.RESULT) //設置圖片加載的優先級
 .priority(Priority.HIGH) .into(mImgOverride); } //用於計算圖片的寬高值
    private int imageWidthSize; private int imageHeightSize; private void setColumnNumber(Context context, int columnNumber) { WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); DisplayMetrics metrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(metrics); int widthPixels = metrics.widthPixels; imageWidthSize = widthPixels / columnNumber; imageHeightSize = (int)(imageWidthSize * 1.5);//長方形樣式,二選一 //imageHeightSize = imageWidthSize;//正方形樣式,二選一
 } //Glide的圓角效果
    private void glideRound() {
        //該方案不合適,由於圖片尺寸有大有小
 Glide.with(mContext) .load(imgUrl) //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .centerCrop() //默認淡入淡出動畫
 .crossFade() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)
 .diskCacheStrategy(DiskCacheStrategy.RESULT) //設置圖片加載的優先級
 .priority(Priority.HIGH) .transform(new MyRoundCornersTransformation(mContext,dip2px(mContext,8), MyRoundCornersTransformation.CornerType.TOP)) .into(mImgMyRound);
    }

    private void glideRound2() {
        Glide.with(mContext) .load(imgUrl) //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .centerCrop() //默認淡入淡出動畫
 .crossFade() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)
 .diskCacheStrategy(DiskCacheStrategy.RESULT) //設置圖片加載的優先級
 .priority(Priority.HIGH) .bitmapTransform(new RoundCornersTransformation(mContext,dip2px(mContext,8), RoundCornersTransformation.CornerType.TOP)) .into(mImgRound);
    }

    private void glideRound3() {
        Glide.with(mContext) .load(imgUrl) //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .centerCrop() //默認淡入淡出動畫
 .crossFade() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)
 .diskCacheStrategy(DiskCacheStrategy.RESULT) //設置圖片加載的優先級
 .priority(Priority.HIGH) .transform(new GlideCircleTransform(mContext)) .into(mImgCircle);
    }

    private void glideRound4() {
        Glide.with(mContext) .load(imgUrl) .asBitmap() //設置等待時的圖片
 .placeholder(R.drawable.img_loading) //設置加載失敗後的圖片顯示
 .error(R.drawable.img_error) .fitCenter() //緩存策略,跳過內存緩存【此處應該設置爲false,不然列表刷新時會閃一下】
                .skipMemoryCache(false) //緩存策略,硬盤緩存-僅僅緩存最終的圖像,即下降分辨率後的(或者是轉換後的)【設置爲ALL,由於打開設置對話框界面的時候還須要展示縮略圖】
 .diskCacheStrategy(DiskCacheStrategy.ALL) //設置圖片加載的優先級
 .priority(Priority.HIGH) .into(new BitmapImageViewTarget(mImgCircleUtil){ @Override protected void setResource(Bitmap resource) { super.setResource(resource); Bitmap result = new BitmapCircleUtil(dip2px(mContext,8), BitmapCircleUtil.CornerType.TOP).circleCrop(resource); mImgCircleUtil.setImageBitmap(result); } });
    }

    /**
     * dp轉px
     * 16dp - 48px
     * 17dp - 51px*/
    public static int dip2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int)((dpValue * scale) + 0.5f);
    }
}

混淆配置

#====Glide====
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
#-keepresourcexmlelements manifest/application/meta-data@value=GlideModule

#====glide-okhttp-integration-1.4.0.jar====
#-libraryjars libs/glide-okhttp-integration-1.4.0.jar
-dontwarn com.bumptech.glide.integration.okhttp.**
-keep class com.bumptech.glide.integration.okhttp.**

參考資料

Google推薦——Glide使用詳解佈局

Glide with okhttp3 integration java.lang.NoClassDefFoundError
gradle

Android 關於Glide的拓展(高斯模糊、加載監聽、圓角圖片)

Android一些容易被忽略的類-RoundedBitmapDrawable

Glide的一些用法(一)(寫了一下午,其實幾乎涵蓋完了,歡迎收藏)

『自定義View實戰』—— 圖片實現圓角效果

Android Glide加載圖片時轉換爲圓形、圓角、毛玻璃等圖片效果

Glide 知識梳理(3) - 自定義transform

Glide-圖片的剪裁(ScaleType)

項目demo下載地址

https://github.com/haiyuKing/GlideDemo

相關文章
相關標籤/搜索