Android入門之Glide顯示網(wǎng)絡(luò)圖片高版本的使用詳解

更新時間：2023年02月06日 10:17:46 作者：TGITCIC

這篇文章主要為大家詳細(xì)介紹了Android中Glide顯示網(wǎng)絡(luò)圖片高版本的使用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下

開篇

一旦我們進入了MVVM，那么MVVM一發(fā)不可收拾了。有了MVVM，我們再也不用漫天遍野的去look layout里的UI組件id了，想用時直接dataBinding.layout駝峰命名，即可到處使用這個組件了。

我們之前的Glide為了演示，顯示的是本地圖片用法。它從@mipmap里得到一個image的id，是一個int值，即可把圖片傳到ImageView里進行顯示了。

但是實際生產(chǎn)級別Android應(yīng)用，我們一般會遵照以下原則在Android里進行圖片顯示：

1.小圖標(biāo)、按鈕背景、輸入框背景使用本地mipmap的圖片；

2.內(nèi)容、可變圖片一律需要來自于網(wǎng)絡(luò)（CDN）圖片即這個圖片不在本地保留的而是一個url；

所以，當(dāng)圖片的使用場景增多了，我們的Glide的使用場景也隨之增多。

但是Glide新版本>4.9版本在加載網(wǎng)絡(luò)圖片時會有一些問題，最著名的就是它在加載圖片時會拋出一個“Failed to find GeneratedAppGlideModule”的Exception。

要解決這個問題其實非常簡單，下面我們直接來看項目。

項目整體情況

一個手機APP，通常來說都是在后臺維護各種CMS素材圖片。

1.圖片上傳至后臺在數(shù)據(jù)庫里存儲成這樣的格式“/img/petthecat/pet_the_cat_1.jpg”；

2.后臺會實時/定時跑批處理把圖片往云的CDN上傳上去，傳完后會得到CDN返還的一個該圖片成功上傳CDN后的url，把這個url存在DB的cdn_url字段；

3.把這樣的地址通過手機APP的獲取商品信息接口從數(shù)據(jù)存儲的cdn_url字段拿出來，和其它相關(guān)的數(shù)據(jù)、內(nèi)容一起拼成JSON報文返回給到前臺APP；

4.前臺APP通過Glide把圖片的URL前面再拼上一個CDN的地址，然后顯示該圖片；

所以為此我們自己搭了一個nginx來模擬“CDN”。

Nginx中hosting物理小圖片存儲目錄

Nginx配置

Glide組件使用

gradle文件中的依賴

implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

我們在此用的是Glide4.11.0，是屬于高版本的Glide了。因此，我們需要書寫一個類

這個類是繼承自AppGlideModule，其內(nèi)容如下。

MyAppGlideModule.java

package com.mkyuan.aset.mall.android;
 
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;
@GlideModule
public class MyAppGlideModule extends AppGlideModule {
 
}

內(nèi)容為空即可，如果沒有這個類在項目里，在使用Glide加載遠(yuǎn)程圖片時，你就會遇到“ Failed to find GeneratedAppGlideModule”這個exception。為了解決這個異常提示特意新建了一個工具類，只要繼承了AppGlideModule,在加載圖片的時候Glide就會自己用到的。

然后來看我們的使用。

package com.mkyuan.aset.mall.android.home.petthecat;
 
import android.widget.ImageView;
 
import androidx.databinding.BaseObservable;
import androidx.databinding.Bindable;
import androidx.databinding.BindingAdapter;
import com.bumptech.glide.Glide;
public class PetTheCatBean extends BaseObservable {
    @Bindable
    public String getPrice() {
        return price;
    }
 
    public void setPrice(String price) {
        this.price = price;
        notifyChange();
    }
 
    public PetTheCatBean(String petImg, String descrText, String price) {
        this.petImg = petImg;
        this.descrText = descrText;
        this.price = price;
    }
 
    private String petImg;
 
    @Bindable
    public String getPegImg() {
        return petImg;
    }
 
    public void setImgId(String petImg) {
        this.petImg = petImg;
        notifyChange();
    }
 
    @Bindable
    public String getDescrText() {
        return descrText;
    }
 
    public void setDescrText(String descrText) {
        this.descrText = descrText;
        notifyChange();
    }
    //自定義屬性  headUrl 是自定義的，在xml的imageView中引用
    @BindingAdapter("petImgUrl")
    public static void getImage(ImageView view, String petImgUrl) {
        Glide.with(view.getContext()).load(petImgUrl).into(view);
    }
 
    private String descrText = "";
    private String price = "0";
}

附上相應(yīng)的layout xml

<ImageView
   android:id="@+id/ivPetCatImg"
   android:layout_width="90dp"
   android:layout_height="90dp"
   android:layout_gravity="center"
   android:scaleType="fitStart"
   app:petImgUrl="@{petCatBean.pegImg}" />

在顯示時我們只需要在這個layout inflate后，在需要setAdapter前如下操作即可正確顯示遠(yuǎn)程網(wǎng)絡(luò)圖片了。

package com.mkyuan.aset.mall.android.home.petthecat;
 
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.GridView;
 
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
 
import com.mkyuan.aset.mall.android.BR;
import com.mkyuan.aset.mall.android.R;
import com.mkyuan.aset.mall.android.databinding.PetTheCatBinding;
import com.mkyuan.aset.mall.android.home.DatabindingGridAdapter;
import com.mkyuan.aset.mall.android.util.AsetMallConstants;
 
import java.util.ArrayList;
import java.util.List;
 
public class FragmentPetTheCat extends Fragment {
    protected static final String TAG = "AsetMall";
    private Context ctx;
    //private Banner adBanner;
    private GridView petCatGridView;
    private PetTheCatBinding dataBinding;
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        ctx = this.getActivity();
        dataBinding = DataBindingUtil.inflate(inflater, R.layout.pet_the_cat, container,
                false);
        petCatGridView = dataBinding.gridPetthecat;
        Log.i(TAG, ">>>>>FragmentPetTheCat->get dataBinding");
        initPetTheCatDataList();
        return dataBinding.getRoot();
 
    }
 
    private void initPetTheCatDataList() {
        List<PetTheCatBean> list = new ArrayList<PetTheCatBean>();
        list.add(new PetTheCatBean(AsetMallConstants.CDN_URL + "/img/petthecat/pet_the_cat_1.jpg",
                "羊陀上門擼你", "23"));
        list.add(new PetTheCatBean(AsetMallConstants.CDN_URL + "/img/petthecat/pet_the_cat_2.jpg",
                "吸松鼠要么？", "128"));
        list.add(new PetTheCatBean(AsetMallConstants.CDN_URL + "/img/petthecat/pet_the_cat_3.png",
                "寄養(yǎng)傻狗7天", "500"));
        DatabindingGridAdapter<PetTheCatBean> adapter =
                new DatabindingGridAdapter<PetTheCatBean>(ctx,
                R.layout.pet_cat_detail, list,
                BR.petCatBean);
        petCatGridView.setAdapter(adapter);
    }
}

自己不妨動一下手試試看吧。

到此這篇關(guān)于Android入門之Glide顯示網(wǎng)絡(luò)圖片高版本的使用詳解的文章就介紹到這了,更多相關(guān)Android Glide顯示網(wǎng)絡(luò)圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: