為什麼要對圖片進行壓縮

比較壓縮與否造成的資源消耗

Monitors

手機尺寸總共就那麼大，這裡我是用小米Note，一格的寬度=一格的高度=一個1/3螢幕寬度，經過計算佔用畫素值是360*360,控制元件既不能放大又不能縮小，我們給再大的圖又有什麼意義。當然，圖片很難可以達到完全適配的理想效果，所以我是用一張480*360大小的圖片，然後用Center_Crop模式填充即可。
我們AndroidStudio Monitors上測試下，影響到底有多大

我家是20M光纖，我一個人獨顯，都要6，7S,我在想要是2G手機使用高清圖載入的話，得多久。
動手算算，2.2M*7=15.4M,
10K/S，1540秒，也就是26min，這種App要是拿給網路差一點的使用者，估計直接就刪了。
總結下為什麼要對圖片進行壓縮：

1. 節約頻寬，消耗更少的流量和網路請求時間
2. 節約CPU資源（又為Android機動不動就發熱的問題盡了一份力）
3. 節約記憶體資源，這個影響不明顯，但是蚊子肉也是肉不是

另一個用處，載入縮圖

就像微信一樣，在載入圖片的時候，先載入一張縮圖，然後再載入大圖，這種模式下，我們可以在圖片還沒完全加載出來的時候大概已經知道它要描述的事物了。
不是說我們剛才已經採用了壓縮過圖片的方式了麼，怎麼還要載入縮圖。

檢視日誌，這裡因為ViewPager預載入的原因，所以會一次載入4張圖片（可以修改預設值），其中2張大圖，2張縮圖
我們對原高清圖，進行適應手機大小壓縮後的大小為
http://o9xuvf3m3.bkt.clouddn.com/new_york.jpg?imageView2/3/h/1134/w/800

他已經已經從原來的2.7M下降到418K，而且介面顯示效果和原來一致，成果是喜人的，但是如果在一些網路不好的情況，比如10k/s的2G網路 他任然需要42S才能載入完成。所以我們還想它更快一點，但是圖片已經沒法優化了，這時候我們可以考慮犧牲一部分圖片質量來換取速度的方式呈現
這時候在它加載出來之前先載入縮圖
http://o9xuvf3m3.bkt.clouddn.com/new_york.jpg?imageView2/3/h/50/w/100
http://o9xuvf3m3.bkt.clouddn.com/peru.jpg?imageView2/3/h/50/w/100
只有4KB大小的縮圖，對頻寬和流量的消耗可以忽略不計，就算是10K/S的網路一秒內也可以載入完成，這時候如果使用者判定對這張圖不感興趣，就可以直接切換，我們取消後臺載入大圖的任務，就可以達到節約頻寬的目的。

實現步驟

伺服器介面支援

指定圖片需要具體尺寸引數

剛才，我們提到需要什麼尺寸，手機端傳送需要尺寸的url請求到伺服器就行了，但是我們怎麼知道手機需要什麼尺寸呢？手動算嗎，控制元件那麼多，那不得算得蛋疼。
所幸Glide提供了這個功能

定義介面

public class CustomImageModelLoader extends BaseGlideUrlLoader<CustomImageSizeModel> {
    public CustomImageModelLoader(Context context) {
        super(context);
    }

    @Override
    protected String getUrl(CustomImageSizeModel model, int width, int height) {
        return model.requestCustomSizeUrl(width, height);
    }
}

實現介面

public class CustomImageSizeModelImp implements CustomImageSizeModel, Parcelable {
    private String baseUrl;
    private static final String TAG = "CustomImageSizeModelImp";

    public CustomImageSizeModelImp(String baseUrl) {
        this.baseUrl = baseUrl;
    }


    @Override
    public String requestCustomSizeUrl(int width, int height) {
        String url = baseUrl + "?imageView2/3/h/" + height + "/w/" + width;
        Log.d(TAG, "requestCustomSizeUrl: " + url);
        return url;
    }

    @Override
    public String getBaseUrl() {
        return baseUrl;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(this.baseUrl);
    }

    protected CustomImageSizeModelImp(Parcel in) {
        this.baseUrl = in.readString();
    }

    public static final Parcelable.Creator<CustomImageSizeModelImp> CREATOR = new Parcelable.Creator<CustomImageSizeModelImp>() {
        @Override
        public CustomImageSizeModelImp createFromParcel(Parcel source) {
            return new CustomImageSizeModelImp(source);
        }

        @Override
        public CustomImageSizeModelImp[] newArray(int size) {
            return new CustomImageSizeModelImp[size];
        }
    };
}

這裡的Parcelable主要是用來傳輸的，這裡可以忽略不看

定義一個BaseGlideUrlLoader的子類

這個用來，通知Glide，我們load不使用load(url)這種，而是使用如下配置載入

    private List<CustomImageSizeModel> mDatas;
    Glide.with(context)
      .using(new CustomImageModelLoader(mContext))
      .load(mDatas.get(position))

public class CustomImageModelLoader extends BaseGlideUrlLoader<CustomImageSizeModel> {
    public CustomImageModelLoader(Context context) {
        super(context);
    }

    @Override
    protected String getUrl(CustomImageSizeModel model, int width, int height) {
        return model.requestCustomSizeUrl(width, height);
    }
}

最後就像普通載入一樣使用

 Glide.with(mContext)
                    .using(new CustomImageModelLoader(mContext))
                    .load(mDatas.get(position))
                    .into(imageHolder.mImageView);

這裡的寬高測繪過程，對我們使用者完全封閉，由Glide內部自己實現和傳遞給CustomImageSizeModelImp。

先載入縮圖，再載入大圖

這裡需要使用.thumbnail()操作符，也很簡單，使用如下

        void displayImage(final CustomImageSizeModel model, final ImageView imageView, final View loading, final View download) {
            DrawableRequestBuilder thumbnailBuilder = Glide
                    .with(imageView.getContext())
                    .load(new CustomImageSizeModelImp(model
                            .getBaseUrl())
                            .requestCustomSizeUrl(100, 50));

            Glide.with(ImageViewPagerActivity.this)
                    .using(new CustomImageModelLoader(imageView.getContext()))
                    .load(model)
                    .listener(new RequestListener<CustomImageSizeModel, GlideDrawable>() {
                        @Override
                        public boolean onException(Exception e, CustomImageSizeModel model, Target<GlideDrawable> target, boolean isFirstResource) {
                            return false;
                        }

                        @Override
                        public boolean onResourceReady(GlideDrawable resource, CustomImageSizeModel model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                            loading.setVisibility(View.GONE);
                            download.setVisibility(View.VISIBLE);
                            PhotoViewAttacher attacher = new PhotoViewAttacher(imageView);
//                            mAttacher.update();
                            return false;
                        }
                    })
                    .thumbnail(thumbnailBuilder)
                    .into(imageView);
        }

手動請求生成一個100*50大小的縮圖，引數值不正確，伺服器選擇了一個最接近的125*50返回給我們。
這兒.listener（）操作符，主要用來監聽控制元件是否繪製完成，好通知進度條隱藏，點選下載高清圖按鈕呈現出來。

檢視原圖，下載高清圖

這個很好實現吧，4點多了太晚了，睡了
週末愉快~~~