压缩包

GlideDemo.zip

一、Glide的引入

  1. Glide是一个快速高效的Android图片加载库,可以自动加载网络、本地文件,app资源中的图片,注重于平滑的滚动。

开源地址:https://github.com/bumptech/glide

中文文档:https://muyangmin.github.io/glide-docs-cn/

引入Glide:

  1. implementation 'com.github.bumptech.glide:glide:4.11.0'<br /> annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

基本使用:

  1. Glide.with([fragment/Context/View])<br /> .load(url)<br /> .into(imageView);

二、实现步骤:

1.添加图片

image.png

2.绑定控件,加载图片资源

image.png

3.在清单文件中添加权限

image.png

三、整体代码:

1.布局activity_main.xml文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context=".MainActivity">
  8. <ImageView
  9. android:layout_width="80dp"
  10. android:layout_height="80dp"
  11. android:id="@+id/iv"/>
  12. </LinearLayout>

2.MainActivity文件代码

  1. package com.example.glidedemo;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.ImageView;
  6. import com.bumptech.glide.Glide;
  7. public class MainActivity extends AppCompatActivity {
  8. @Override
  9. protected void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_main);
  12. ImageView iv = findViewById(R.id.iv);
  13. Glide.with(this)
  14. .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcuimg.zuyushop.com%3A8013%2FcuxiaoPic%2F20153%2F2015030010262399424.png&refer=http%3A%2F%2Fcuimg.zuyushop.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627308625&t=aa84e065943c825f8cbf94fc0beeea6e")
  15. .into(iv);
  16. }
  17. }

3.效果图:

image.png

四、Glide占位符

  1. Glide4中占位图的使用方法,包括(placeholdererrorfallback)三种占位图

1.placeholder 正在请求图片的时候展示的图片

2.error 如果请求失败的时候展示的图片(如果没有设置,还是展示placeholder的占位符)

3.fallback 如果请求的url/model为null的时候展示的图片(如果没有设置,还是展示placeholder的占位符)

  1. RequestOptions requestOptions=new RequestOptions()<br /> .placeholder(R.drawable.hold)<br /> .error(R.drawable.error)<br /> .fallback(R.drawable.fallback)<br /> .override(100,100); // override指定加载图片大小<br /> Glide.with([fragment/Context/View])<br /> .load(url)<br /> .apply(requestOptions)<br /> .into(imageView);

五、实现步骤:

1.添加RequestOptions实例,添加apply,将实例放入

image.png

六、整体代码:

1.MainActivity文件代码

  1. package com.example.glidedemo;
  2. import androidx.appcompat.app.AppCompatActivity;
  3. import android.app.VoiceInteractor;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.ImageView;
  7. import com.bumptech.glide.Glide;
  8. import com.bumptech.glide.request.RequestOptions;
  9. public class MainActivity extends AppCompatActivity {
  10. @Override
  11. protected void onCreate(Bundle savedInstanceState) {
  12. super.onCreate(savedInstanceState);
  13. setContentView(R.layout.activity_main);
  14. ImageView iv = findViewById(R.id.iv);
  15. RequestOptions requestOptions = new RequestOptions()
  16. .placeholder(R.drawable.hold)
  17. .error(R.drawable.error)
  18. .fallback(R.drawable.empty)
  19. .override(100, 100);
  20. Glide.with(this)
  21. .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcuimg.zuyushop.com%3A8013%2FcuxiaoPic%2F20153%2F2015030010262399424.png&refer=http%3A%2F%2Fcuimg.zuyushop.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627308625&t=aa84e065943c825f8cbf94fc0beeea6e")
  22. .apply(requestOptions)
  23. .into(iv);
  24. }
  25. }

2.效果图:

  1. 1)加载占位符的图片<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1624719103766-f934a506-f568-4ef4-90da-5b9a79112a30.png#clientId=udeee675c-0727-4&from=paste&height=539&id=u878c8fa5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=539&originWidth=737&originalType=binary&ratio=1&size=78203&status=done&style=none&taskId=u2d18b753-709c-4aa7-b1dc-fac9aa56423&width=737)<br /> (2)加载错误的图片<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1574587/1624719047428-001e6c44-d763-4326-a921-68047925e5d0.png#clientId=udeee675c-0727-4&from=paste&height=526&id=u5f6b1f78&margin=%5Bobject%20Object%5D&name=image.png&originHeight=526&originWidth=743&originalType=binary&ratio=1&size=67420&status=done&style=none&taskId=u434604b7-b17c-4a1b-af87-8a56ba9c7c1&width=743)