《Android 应用开发基础教程》——第十一章：Android 中的图片加载与缓存（Glide 使用详解）

目录

第十一章：Android 中的图片加载与缓存（Glide 使用详解）

🔹 11.1 Glide 简介

🔸 11.2 添加 Glide 依赖

🔸 11.3 基本用法

✦ 加载网络图片到 ImageView：

✦ 加载本地资源 / 文件 / URI：

🔸 11.4 占位图、错误图、缩略图

🔸 11.5 图片变换：圆角、圆形、裁剪

✦ CenterCrop 和 FitCenter：

✦ GlideTransform：实现圆角或圆形（需引入扩展库）：

🔸 11.6 缓存策略

🔸 11.7 在 RecyclerView 中使用 Glide

🔸 11.8 清除缓存

✅ 实战练习建议

习题答案

项目结构

1. MainActivity.java

2. ImageTextAdapter.java

3. GlideUtils.java

4. CircleBorderTransform.java

5. activity_main.xml

6. item_image_text.xml

7. ImageTextItem.java

总结

---

第十一章：Android 中的图片加载与缓存（Glide 使用详解）

        在移动应用中，图片加载是最常见也最耗资源的任务之一。为了提升性能并避免内存泄露，我们通常使用图片加载库。Glide 是 Google 推荐的 Android 图片加载库，功能强大、使用简单，支持图片加载、转换、缓存等操作。

---

🔹 11.1 Glide 简介

Glide 由 BumpTech 开发，具有以下特点：

• 支持从网络、本地、资源中加载图片

• 自动内存缓存与磁盘缓存

• 支持图片缩放、裁剪、圆角、圆形

• 支持 GIF 加载

• 支持 RecyclerView 中高效加载

---

🔸 11.2 添加 Glide 依赖

在 build.gradle(:app) 文件中添加：

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

---

🔸 11.3 基本用法

✦ 加载网络图片到 ImageView：

ImageView imageView = findViewById(R.id.imageView);Glide.with(this).load("https://example.com/image.jpg").into(imageView);

---

✦ 加载本地资源 / 文件 / URI：

// 资源图片
Glide.with(this).load(R.drawable.sample).into(imageView);// 本地文件
File file = new File(getExternalFilesDir(null), "pic.jpg");
Glide.with(this).load(file).into(imageView);

---

🔸 11.4 占位图、错误图、缩略图

Glide.with(this).load("https://example.com/image.jpg").placeholder(R.drawable.loading)    // 加载中显示的图.error(R.drawable.error_image)      // 加载失败显示的图.thumbnail(0.1f)                    // 显示缩略图.into(imageView);

---

🔸 11.5 图片变换：圆角、圆形、裁剪

✦ CenterCrop 和 FitCenter：

Glide.with(this).load(url).centerCrop()    // 居中裁剪.into(imageView);

---

✦ GlideTransform：实现圆角或圆形（需引入扩展库）：

implementation 'jp.wasabeef:glide-transformations:4.3.0'

import jp.wasabeef.glide.transformations.RoundedCornersTransformation;Glide.with(this).load(url).transform(new RoundedCornersTransformation(20, 0)) // 圆角半径 20.into(imageView);

---

🔸 11.6 缓存策略

Glide.with(this).load(url).diskCacheStrategy(DiskCacheStrategy.ALL)  // 磁盘缓存策略.skipMemoryCache(false)                    // 是否跳过内存缓存.into(imageView);

常用策略包括：

策略	描述
DiskCacheStrategy.ALL	原图和压缩图都缓存
DiskCacheStrategy.NONE	不缓存任何内容
DiskCacheStrategy.RESOURCE	仅缓存压缩后的图片

---

🔸 11.7 在 RecyclerView 中使用 Glide

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {Glide.with(holder.itemView.getContext()).load(itemList.get(position).getImageUrl()).into(holder.imageView);
}

注意：不要在 Adapter 中使用 with(context.getApplicationContext())，会影响 View 生命周期管理。

---

🔸 11.8 清除缓存

// 清除内存缓存（主线程）
Glide.get(context).clearMemory();// 清除磁盘缓存（子线程）
new Thread(() -> {Glide.get(context).clearDiskCache();
}).start();

---

✅ 实战练习建议

1. 实现一个图文混排的 RecyclerView 列表，动态加载网络图片

2. 使用 Glide 加载 GIF 动图

3. 用 GlideTransform 实现头像圆形 + 外边框效果

4. 编写工具类 GlideUtils 封装通用加载逻辑

---

📢 下一章预告：

第十二章：Material Design 组件实战（Toolbar、BottomNavigation、Snackbar 等）

---

习题答案

项目结构

MainActivity.java
ImageTextAdapter.java
GlideUtils.java
CircleBorderTransform.java
activity_main.xml
item_image_text.xml

---

1. MainActivity.java

package com.example.demo;import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private RecyclerView recyclerView;private ImageTextAdapter adapter;private List<ImageTextItem> itemList;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);recyclerView = findViewById(R.id.recyclerView);recyclerView.setLayoutManager(new LinearLayoutManager(this));// 模拟数据itemList = new ArrayList<>();itemList.add(new ImageTextItem("https://example.com/image1.jpg", "这是描述文字 1"));itemList.add(new ImageTextItem("https://example.com/image2.gif", "这是描述文字 2"));itemList.add(new ImageTextItem("https://example.com/avatar.png", "这是圆形头像"));adapter = new ImageTextAdapter(itemList, this);recyclerView.setAdapter(adapter);}
}

---

2. ImageTextAdapter.java

package com.example.demo;import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import java.util.List;public class ImageTextAdapter extends RecyclerView.Adapter<ImageTextAdapter.ViewHolder> {private List<ImageTextItem> itemList;private Context context;public ImageTextAdapter(List<ImageTextItem> itemList, Context context) {this.itemList = itemList;this.context = context;}@NonNull@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image_text, parent, false);return new ViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull ViewHolder holder, int position) {ImageTextItem item = itemList.get(position);// 使用 Glide 加载图片if (position == 2) {// 使用圆形头像 + 边框效果GlideUtils.loadCircleWithBorder(context, item.getImageUrl(), holder.imageView, 5, R.color.teal_200);} else {// 普通图片或 GIFGlideUtils.loadImage(context, item.getImageUrl(), holder.imageView);}holder.textView.setText(item.getDescription());}@Overridepublic int getItemCount() {return itemList.size();}public static class ViewHolder extends RecyclerView.ViewHolder {ImageView imageView;TextView textView;public ViewHolder(@NonNull View itemView) {super(itemView);imageView = itemView.findViewById(R.id.imageView);textView = itemView.findViewById(R.id.textView);}}
}

---

3. GlideUtils.java

package com.example.demo;import android.content.Context;
import android.graphics.Color;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;public class GlideUtils {// 加载普通图片或 GIFpublic static void loadImage(Context context, String url, ImageView imageView) {Glide.with(context).load(url).into(imageView);}// 加载圆形头像 + 边框效果public static void loadCircleWithBorder(Context context, String url, ImageView imageView, int borderWidth, int borderColor) {RequestOptions options = new RequestOptions().transform(new CircleBorderTransform(borderWidth, borderColor)); // 自定义 TransformGlide.with(context).load(url).apply(options).into(imageView);}
}

---

4. CircleBorderTransform.java

package com.example.demo;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import androidx.annotation.NonNull;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
import java.security.MessageDigest;public class CircleBorderTransform extends BitmapTransformation {private final int borderWidth;private final int borderColor;public CircleBorderTransform(int borderWidth, int borderColor) {this.borderWidth = borderWidth;this.borderColor = borderColor;}@Overrideprotected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {int diameter = Math.min(toTransform.getWidth(), toTransform.getHeight());int radius = diameter / 2;Bitmap result = pool.get(diameter + borderWidth * 2, diameter + borderWidth * 2, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(result);Paint paint = new Paint();paint.setAntiAlias(true);// 绘制圆形头像RectF rectF = new RectF(borderWidth, borderWidth, diameter + borderWidth, diameter + borderWidth);canvas.drawOval(rectF, paint);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));canvas.drawBitmap(toTransform, null, rectF, paint);// 绘制边框paint.setXfermode(null);paint.setColor(borderColor);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(borderWidth);canvas.drawOval(rectF, paint);return result;}@Overridepublic void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {messageDigest.update(("CircleBorderTransform" + borderWidth + borderColor).getBytes());}
}

---

5. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"android:padding="8dp" />
</LinearLayout>

---

6. item_image_text.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="8dp"><ImageViewandroid:id="@+id/imageView"android:layout_width="100dp"android:layout_height="100dp"android:scaleType="centerCrop"android:contentDescription="Image" /><TextViewandroid:id="@+id/textView"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:text="Description"android:textSize="16sp"android:paddingStart="16dp"android:gravity="center_vertical" />
</LinearLayout>

---

7. ImageTextItem.java

package com.example.demo;public class ImageTextItem {private String imageUrl;private String description;public ImageTextItem(String imageUrl, String description) {this.imageUrl = imageUrl;this.description = description;}public String getImageUrl() {return imageUrl;}public String getDescription() {return description;}
}

---

总结

1. 图文混排：通过 RecyclerView 展示图片和文字。
2. 动态加载网络图片：使用 Glide 加载普通图片和 GIF 动图。
3. 圆形头像 + 边框：通过自定义 CircleBorderTransform 实现。
4. 工具类封装：GlideUtils 封装了通用的图片加载逻辑。