这里可以看到,这是正常加载的情况,下面你可以把网络关掉,然后卸载刚才安装的应用,重新安装。
你会发现关闭网络之后图片确实没有加载出来,但是日志也没有看到有失败的字样。
这里你就要多重考虑一下了,因为加载网络图片实际上是分为两步的,第一步请求网络资源,第二步缓存资源显示出来,刚才把网络关闭了,那么我们就应该对网络请求增加监听才对。
改动代码如下所示。
//显示图片
Glide.with(this)
.load(imgUrl)
.listener(new RequestListener() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target target, boolean isFirstResource) {
Log.d(TAG,“网络访问失败,请检查是否开始网络或者增加http的访问许可”);
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target target, DataSource dataSource, boolean isFirstResource) {
Log.d(TAG,“网络访问成功,可以显示图片”);
return false;
}
})
.into(new ImageViewTarget(ivBg) {
//图片开始加载
@Override
public void onLoadStarted(@Nullable Drawable placeholder) {
super.onLoadStarted(placeholder);
Log.d(TAG, “图片开始加载”);
}
@Override
public void onLoadFailed(@Nullable Drawable errorDrawable) {
super.onLoadFailed(errorDrawable);
Log.d(TAG, “图片加载失败”);
}
//图片加载完成
@Override
public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
super.onResourceReady(resource, transition);
// 图片加载完成
ivBg.setImageDrawable(resource);
Log.d(TAG, “图片加载完成”);
}
@Override
protected void setResource(@Nullable Drawable resource) {
Log.d(TAG, “设置资源”);
}
});
可以看到我又增加了一个listener,里面有对网络访问的返回,成功和失败,网络状态不好的情况下才会失败,像刚才我们没有开始网络就根本不会发起网络请求,自然不会有请求的返回。
下面开启网络,运行试一下。
这样你就完成了加载网络图片是网络状态的监听。
如果你还想加上一点变化的话可以这样,修改activity_main.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
tools:context=“.MainActivity”>
<ImageView
android:id=“@+id/iv_bg”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:background=“#000”
android:scaleType=“centerCrop” />
<ProgressBar
android:id=“@+id/progressBar”
android:visibility=“gone”
android:layout_centerInParent=“true”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”/>
这里我修改了根布局为RelativeLayout ,然后加上了一个ProgressBar,它默认是隐藏的,下面回到MainActivity中。
//进度条
private ProgressBar progressBar;
然后在onCreate中
progressBar = findViewById(R.id.progressBar);
然后在图片设置资源时,开始时显示加载进度条,完成时隐藏进度条然后显示图片。
运行的效果就像下面这样。
当然这个加载速度取决于你的网速,快的话就是一闪而过。
现在你回头看这个Glide的加载,如果要同时满足网络加载和图片资源设置的监听,代码量就会比较多,如果我一个页面有多个地方要加载网络图片呢?我总不能写这么多重复的代码吧。因此我们可以写一个工具类来帮助我们做这一步。
新建一个GlideUtil类。
在里面写入如下代码。
/**
-
Glide工具类
-
@author llw
*/
public class GlideUtil {
//上下文
private static Context context;
public static void init(Context context) {
GlideUtil.context = context;
}
/**
-
显示网络Url图片
-
@param url
-
@param imageView
*/
public static void loadImg(String url, ImageView imageView) {
Glide.with(context).load(url).into(imageView);
}
/**
-
显示资源图片
-
@param recourseId 资源图片
-
@param imageView
*/
public static void loadImg(Integer recourseId, ImageView imageView) {
Glide.with(context).load(recourseId).into(imageView);
}
/**
-
显示bitmap图片
-
@param bitmap
-
@param imageView
*/
public static void loadImg(Bitmap bitmap, ImageView imageView) {
Glide.with(context).load(bitmap).into(imageView);
}
/**
-
显示drawable图片
-
@param drawable
-
@param imageView
*/
public static void loadImg(Drawable drawable, ImageView imageView) {
Glide.with(context).load(drawable).into(imageView);
}
}
目前这个代码很简单,通过init方法获取上下文,然后通过多参数方法来显示图片,当然这个可以根据实际需求来进行增减,这样写其实就减少了一步操作,可以在程序初始化的时候获取应用的上下文即可,你应该知道是什么了,没错就是Application,你如果不自己写则会使用默认的,但日常开发中都会自己自定义一个Application,在里面完成一些应用的初始化配置,比如数据库的创建,一个资源库的初始化。
下面新建一个MyApplication,然后集成Application,重写onCreate方法,在里面通过GildeUtil的init方法获取上下文。
/**
-
自定义应用
-
@author llw
*/
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
GlideUtil.init(this);
}
}
然后你还需要到AndroidManifest.xml的application标签下进行配置,如下图所示:
下面你就可以使用这个工具类来加载图片了。
修改MainActivity中onCreate中的代码。
//显示图片
loadImg(imgUrl, ivBg);
然后你可以运行了,虽然这种封装方式并不是很高明,但是起码代码很简洁不是吗。它可以让你选择不同的图片资源类型,根据需求选择。
当然这只是普通的显示,如果我在知道网络请求的情况呢?
在GlideUtil中添加
private static final String TAG = “GlideUtil”;
//图片加载网络监听
private static RequestListener requestListener = new RequestListener() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target target, boolean isFirstResource) {
Log.d(TAG,“网络访问失败,请检查是否开始网络或者增加http的访问许可”);
return false;
}
@Override
public boolean onResourceReady(Drawable resource, Object model, Target target, DataSource dataSource, boolean isFirstResource) {
Log.d(TAG,“网络访问成功,可以显示图片”);
return false;
}
};
然后增加一个方法。
/**
-
显示网络Url图片 附带加载网络监听
-
@param url
-
@param imageView
*/
public static void loadImgListener(String url, ImageView imageView) {
Glide.with(context)
.load(url)
.listener(requestListener)
.into(imageView);
}
然后在MainActivity中修改代码。
下面运行一下,然后看日志是否有打印。
这样就可以了。那如果我也要知道这个设置图片资源的监听呢?依葫芦画瓢就行了。
在GlideUtil中增加一个方法。
/**
-
获取ImageViewTarget
-
@param imageView
-
@return
*/
private static ImageViewTarget getImageViewTarget(final ImageView imageView) {
ImageViewTarget imageViewTarget = new ImageViewTarget(imageView) {
@Override
public void onLoadStarted(@Nullable Drawable placeholder) {
super.onLoa
dStarted(placeholder);
Log.d(TAG, “开始加载图片”);
}
@Override
public void onLoadFailed(@Nullable Drawable errorDrawable) {
super.onLoadFailed(errorDrawable);
Log.d(TAG, “加载图片失败”);
}
@Override
public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
super.onResourceReady(resource, transition);
// 图片加载完成
imageView.setImageDrawable(resource);
Log.d(TAG, “加载图片完成”);
}
@Override
protected void setResource(@Nullable Drawable resource) {
}
};
return imageViewTarget;
}
然后修改loadImgListener方法。
再运行一下,看日志。
当然这种写法还是不够人性化,可能你只需要其中一个,或者都需要,或者都不需要,那如果要满足这个需求就还需要改动一下这个loadImgListener方法。
改动如下:
/**
-
显示网络Url图片 附带加载网络监听和设置资源监听
-
@param url 网络图片url
-
@param imageView 图片控件
-
@param needNetListener 是否需要网络监听
-
@param needResourceListener 是否需要设置资源监听
*/
public static void loadImgListener(String url, ImageView imageView,
boolean needNetListener, boolean needResourceListener) {
if (needResourceListener) {
Glide.with(context)
.load(url)
.listener(needNetListener ? requestListener : null)
.into(getImageViewTarget(imageView));
} else {
Glide.with(context)
.load(url)
.listener(needNetListener ? requestListener : null)
.into(imageView);
}
}
这里我增加了两个参数,用于控制是否需要网络监听和设置图片资源监听,然后改动一下MainActvity中的代码调用。
下面运行一下,你会发现日志都会打印。
然后都设置为false,这时候是不会有日志打印的,我就不截图了。
下面设置一个为true一个为false。
运行看看。
OK,到这一步是不是就没有问题了呢?
那么还有一个问题,就是如果我要显示加载进度条呢?
那么我们可以自定义一个这样的弹窗,
首先你需要一个加载图片。如果图片是黑色背景的话,那么使用白色的加载图标无疑是很好的选择。
图标名称:icon_loading.png
这个图标可以从我的源码里面去拿,或者自己从网络上下载。
在styles.xml中设置弹窗样式
然后新增一个动画样式代码。
首先在res下新建一个anim文件夹,然后新建一个loading_animation.xml文件,里面的代码如下:
<?xml version="1.0" encoding="utf-8"?><rotate
android:interpolator=“@android:anim/linear_interpolator”
android:pivotX=“50%”
android:pivotY=“50%”
android:fromDegrees=“0”
android:toDegrees=“+360”
android:duration=“1500”
android:startOffset=“-1”
android:repeatMode=“restart”
android:repeatCount=“-1”/>
下面增加一个弹窗,在layout下新建loading_dialog.xml,布局代码如下:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/dialog_view”
android:orientation=“vertical”
android:layout_width=“120dp”
android:layout_height=“120dp”
android:gravity=“center”
android:padding=“10dp”>
<ImageView
android:id=“@+id/iv_loading”
android:layout_width=“40dp”
android:layout_height=“40dp”
android:src=“@mipmap/icon_loading” />
<TextView
android:visibility=“gone”
android:id=“@+id/tv_loading_tx”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_marginTop=“10dp”
android:maxLines=“1”
android:text=“玩命加载中…”
android:textColor=“#FFF”
android:textSize=“14sp” />
这里我把文字隐藏了。下面自定义一个加载弹窗,新建一个LoadingDialog类,继承Dialog。里面的代码如下:
/**
-
自定义加载弹窗
-
@author llw
*/
public class LoadingDialog extends Dialog {
TextView tvLoadingTx;
ImageView ivLoading;
public LoadingDialog(Context context) {
this(context, R.style.loading_dialog, “玩命加载中…”);
}
public LoadingDialog(Context context, String string) {
this(context, R.style.loading_dialog, string);
}
protected LoadingDialog(Context context, int theme, String string) {
super(context, theme);
setCanceledOnTouchOutside(true);//点击其他区域时 true 关闭弹窗 false 不关闭弹窗
setContentView(R.layout.loading_dialog);//加载布局
tvLoadingTx = findViewById(R.id.tv_loading_tx);
tvLoadingTx.setText(string);
ivLoading = findViewById(R.id.iv_loading);
// 加载动画
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(
context, R.anim.loading_animation);
// 使用ImageView显示动画
ivLoading.startAnimation(hyperspaceJumpAnimation);
getWindow().getAttributes().gravity = Gravity.CENTER;//居中显示
getWindow().getAttributes().dimAmount = 0.5f;//背景透明度 取值范围 0 ~ 1
}
//关闭弹窗
@Override
public void dismiss() {
super.dismiss();
}
然后最后一步就是在GlideUtil中去使用了,可以新写一个方法。
//加载弹窗
private static LoadingDialog loadingDialog;
新增loadImgListenerNeedDialog方法。
/**
-
显示网络Url图片 附带加载网络监听和设置资源监听 显示加载弹窗
-
@param context 显示在哪个Activity/Fragment上
-
@param url 网络图片url
-
@param imageView 图片控件
-
@param needNetListener 是否需要网络监听
-
@param needResourceListener 是否需要设置资源监听
*/
public static void loadImgListenerNeedDialog(Context context,String url, ImageView imageView,
boolean needNetListener, boolean needResourceListener) {
loadingDialog = new LoadingDialog(context);
if (needResourceListener) {
Glide.with(context)
.load(url)
.listener(needNetListener ? requestListener : null)
.into(getImageViewTarget(imageView));
} else {
Glide.with(context)
.load(url)
.listener(needNetListener ? requestListener : null)
.into(imageView);
}
}
然后在getImageViewTarget中显示,这里因为,需要或者不需要弹窗的监听都是会调用getImageViewTarget,因此对弹窗进行显示和隐藏式,判断是否为空,避免程序空指针崩溃。
下面进入MainActivity中调用这个方法。
//显示图片并监听网络加载情况
loadImgListenerNeedDialog(this,imgUrl,ivBg,false,true);
运行一下:
源码地址:GlideDemo