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

時間 2019-11-09

標籤 glide 加載圖片還能這樣基於 glide4.0 完美封裝欄目軟件設計简体版

原文原文鏈接

一個基於GLide加載圖片的封裝開源框架。能夠監聽加載圖片時的進度，能夠設置圖片的圓角、邊框。可加載成圓形。android

來自孫福生一個開源框架。項目地址爲：github.com/sfsheng0322…git

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

一、經過提供的屬性能夠設置圖片的圓角、邊框。
二、能夠設置點擊觸摸圖片時的顏色、透明度。
三、一行代碼加載來自網絡、res、SDCard中的圖片，可加載成圓形。
四、能夠監聽加載圖片時的進度。

話很少說，上咱們的咱們的效果圖：github

加載不一樣形式的圖片：緩存

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));
        }複製代碼

效果圖：bash

一些關鍵的類：

GlideView 對ImageView進一步的封裝微信
GlideImageLoader 對Glide.load的進一步封裝網絡
CircleProgressView和ShapeImageView 封裝加載圖片的進度條app

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();
}複製代碼

具體屬性以下ide

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：

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);
}複製代碼

加載進度時效果以下：