GLide載入圖片還能這樣幹——基於Glide4.0完美封裝

codeGoogle發表於2017-07-14
IDE封裝

一個基於GLide載入圖片的封裝開源框架。可以監聽載入圖片時的進度 ，可以設定圖片的圓角、邊框。可載入成圓形。

來自孫福生一個開源框架。專案地址為：github.com/sfsheng0322…

該庫是基於Glide V4.0設計的，實現如下特性:

  • 1、通過提供的屬性可以設定圖片的圓角、邊框。
  • 2、可以設定點選觸控圖片時的顏色、透明度。
  • 3、一行程式碼載入來自網路、res、SDCard中的圖片，可載入成圓形。
  • 4、可以監聽載入圖片時的進度。

話不多說，上我們的我們的效果圖：

專案預覽
專案預覽

載入不同形式的圖片：

public void loadLocalImage(@DrawableRes int resId, int placeholderResId) {
            load(resId, requestOptions(placeholderResId));
        }

        public void loadLocalImage(String localPath, int placeholderResId) {
            load(FILE + localPath, requestOptions(placeholderResId));
        }

        public void loadCircleImage(String url, int placeholderResId) {
            load(url, circleRequestOptions(placeholderResId));
        }

        public void loadLocalCircleImage(int resId, int placeholderResId) {
            load(resId, circleRequestOptions(placeholderResId));
        }

        public void loadLocalCircleImage(String localPath, int placeholderResId) {
            load(FILE + localPath, circleRequestOptions(placeholderResId));
        }複製程式碼

效果圖：

載入不同風格的圖片
載入不同風格的圖片

一些關鍵的類：

  • GlideView 對ImageView進一步的封裝

  • GlideImageLoader 對Glide.load的進一步封裝

  • CircleProgressView和ShapeImageView 封裝載入圖片的進度條

CircleProgressView和ShapeImageView是自定義ImageView，其中封裝了一些自定義屬性
可以在可以在程式碼中設定圖片的一些屬性， 當然這些屬性也可以在GlideImageView上面設定。

eg:

// 設定邊框顏色
public void setBorderColor(@ColorRes int id) {
    this.borderColor = getResources().getColor(id);
    invalidate();
}

// 設定邊框寬度
public void setBorderWidth(int borderWidth) {
    this.borderWidth = DisplayUtil.dip2px(getContext(), borderWidth);
    invalidate();
}

// 設定圖片按下顏色透明度
public void setPressedAlpha(float pressAlpha) {
    this.pressedAlpha = pressAlpha;
}

// 設定圖片按下的顏色
public void setPressedColor(@ColorRes int id) {
    this.pressedColor = getResources().getColor(id);
    pressedPaint.setColor(pressedColor);
    pressedPaint.setAlpha(0);
    invalidate();
}複製程式碼

具體屬性如下

Attribute 屬性 Description 描述
siv_border_color 邊框顏色
siv_border_width 邊框寬度
siv_pressed_color 觸控圖片時的顏色
siv_pressed_alpha 觸控圖片時的顏色透明度: 0.0f - 1.0f
siv_radius 圓角弧度
siv_shape_type 兩種形狀型別：預設是0:rectangle、1:circle

程式碼：

 image41.load(cat_thumbnail, requestOptions).listener(new OnGlideImageViewListener() {
            @Override
            public void onProgress(int percent, boolean isDone, GlideException exception) {
                if (exception != null && !TextUtils.isEmpty(exception.getMessage())) {
                    Toast.makeText(getApplicationContext(), exception.getMessage(), Toast.LENGTH_LONG).show();
                }
                progressView1.setProgress(percent);
                progressView1.setVisibility(isDone ? View.GONE : View.VISIBLE);
            }
        });複製程式碼

載入gif：

載入gif小圖片
載入gif小圖片

GLide的快取策略：

記憶體快取

讓我們想象一個非常簡單的請求，從網路中載入圖片到 ImageView。

Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .skipMemoryCache( true )
    .into( imageViewInternet );複製程式碼

呼叫了 .skipMemoryCache(true) 去明確告訴 Glide 跳過記憶體快取。這意味著 Glide 將不會把這張圖片放到記憶體快取中去。這裡需要明白的是，這只是會影響記憶體快取！Glide 將會仍然利用磁碟快取來避免重複的網路請求

跳過磁碟快取

圖片在這段程式碼片段中將不會被儲存在磁碟快取中。然而，預設的它將仍然使用記憶體快取！為了把這裡兩者都禁用掉，兩個方法一起呼叫：

Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .diskCacheStrategy( DiskCacheStrategy.NONE )
    .skipMemoryCache( true )
    .into( imageViewInternet );複製程式碼

自定義磁碟快取行為

Picasso 僅僅快取了全尺寸的影象。然而 Glide 快取了原始影象，全解析度影象和另外小版本的影象。比如，如果你請求的一個影象是 1000x1000 畫素的，但你的 ImageView 是 500x500 畫素的，Glide 將會把這兩個尺寸都進行快取。

現在你將會理解對於 .diskCacheStrategy() 方法來說不同的列舉引數的意義：

  • DiskCacheStrategy.NONE 什麼都不快取，就像剛討論的那樣

  • DiskCacheStrategy.SOURCE 僅僅只快取原來的全解析度的影象。在我們上面的例子中，將會只有一個 1000x1000 畫素的圖片

  • DiskCacheStrategy.RESULT 僅僅快取最終的影象，即，降低解析度後的（或者是轉換後的）
  • DiskCacheStrategy.ALL 快取所有版本的影象（預設行為）

用 DiskCacheStrategy.SOURCE 去告訴 Glide 僅僅儲存原始圖片：

Glide  
    .with( context )
    .load( eatFoodyImages[2] )
    .diskCacheStrategy( DiskCacheStrategy.SOURCE )
    .into( imageViewFile );        複製程式碼

在專案中提供了GlideImageLoader類載入圖片，比如這樣載入圖片：先載入縮圖再載入高清圖片，並監聽載入的進度

private void loadImage(String image_url_thumbnail， String image_url) {
    RequestOptions requestOptions = glideImageView.requestOptions(R.color.black)
            .centerCrop()
            .skipMemoryCache(true) // 跳過記憶體快取
            .diskCacheStrategy(DiskCacheStrategy.NONE); // 不快取到SDCard中

    glideImageView.getImageLoader().setOnGlideImageViewListener(image_url, new OnGlideImageViewListener() {
        @Override
        public void onProgress(int percent, boolean isDone, GlideException exception) {
            progressView.setProgress(percent);
            progressView.setVisibility(isDone ? View.GONE : View.VISIBLE);
        }
    });

    glideImageView.getImageLoader().requestBuilder(image_url, requestOptions)
            .thumbnail(Glide.with(ImageActivity.this) // 載入縮圖
                    .load(image_url_thumbnail)
                    .apply(requestOptions))
            .transition(DrawableTransitionOptions.withCrossFade()) // 動畫漸變載入
            .into(glideImageView);
}複製程式碼

載入進度時效果如下：

載入時進度條監聽
載入時進度條監聽

專案Github連結地址

github.com/androidstar…

下載慢？CSDN下載連結：

download.csdn.net/detail/andr…

相信自己，沒有做不到的，只有想不到的

如果你覺得此文對您有所幫助，歡迎入群 QQ交流群 ：232203809
微信公眾號：終端研發部

技術+職場
技術+職場

相關文章