Android 之 控件 - ImageView 显示本地或网络图片

​​一、基础使用​​

1. ​​XML 布局声明​​

<ImageView
    android:id="@+id/imageView"
    android:layout_width="200dp"      <!-- 固定尺寸或 wrap_content -->
    android:layout_height="200dp"
    android:src="@drawable/my_image" <!-- 本地图片资源 -->
    android:scaleType="centerCrop"   <!-- 关键：缩放类型 -->
    android:adjustViewBounds="true"  <!-- 保持宽高比 -->
    android:contentDescription="@string/image_desc" /> <!-- 无障碍描述 -->

2. ​​代码动态设置图片​​

ImageView imageView = findViewById(R.id.imageView);
// 设置本地资源
imageView.setImageResource(R.drawable.new_image);
// 设置 Bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
imageView.setImageBitmap(bitmap);
// 设置 Drawable
Drawable drawable = ContextCompat.getDrawable(this, R.drawable.image);
imageView.setImageDrawable(drawable);

---

 ​​二、核心属性详解​​

1. ​​缩放类型 (scaleType)​​

控制图片如何适应 ImageView的尺寸：

​​属性值​​	​​效果​​
centerCrop	等比例缩放，填充整个 View，裁剪多余部分（推荐用于头像）
fitCenter	等比例缩放，完整显示在 View 内（默认值）
center	不缩放，居中显示
fitXY	拉伸填满 View，可能变形
centerInside	等比例缩小至完全显示，不裁剪

// 代码动态设置
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

2. ​​对齐与边界控制​​

• ​​居中对齐​​：android:layout_centerInParent="true"（需父布局为 RelativeLayout）

• ​​自适应边界​​：android:adjustViewBounds="true"（自动调整 View 大小以匹配图片比例）

---

 ​​三、加载网络图片（推荐 Glide）​​

1. ​​添加依赖​​

implementation 'com.github.bumptech.glide:glide:4.13.2'
kapt 'com.github.bumptech.glide:compiler:4.13.2'

2. ​​基础用法​​

Glide.with(this)       // 绑定生命周期（Activity/Fragment）
    .load("https://example.com/image.jpg")  
    .placeholder(R.drawable.placeholder) // 加载中显示
    .error(R.drawable.error)             // 加载失败显示
    .centerCrop()                       // 缩放方式
    .into(imageView);

​​优势​​：自动处理缓存、生命周期管理、内存优化

3. ​​高级功能​​

• ​​圆形图片​​：

  Glide.with(this).load(url).apply(RequestOptions.circleCrop()).into(imageView);

• ​​圆角图片​​：

  Glide.with(this).load(url).transform(new RoundedCorners(20)).into(imageView);

---

 ​​四、高级效果实现​​

1. ​​图片点击缩放动画​​

imageView.setOnClickListener(v -> {
    if (imageView.getScaleType() == ImageView.ScaleType.CENTER_CROP) {
        imageView.animate().scaleX(1.5f).scaleY(1.5f).setDuration(300).start();
    } else {
        imageView.animate().scaleX(1f).scaleY(1f).setDuration(300).start();
    }
});

2. ​​富文本显示（图文混排）​​

SpannableString spannable = new SpannableString("图标+文字");
spannable.setSpan(new ImageSpan(context, R.drawable.icon), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannable); // 需配合 TextView

---

 ​​五、性能优化与避坑​​

1. ​​避免 OOM（内存溢出）​​

• ​​压缩大图​​：

  BitmapFactory.Options options = new BitmapFactory.Options();
  options.inSampleSize = 2; // 缩小为原图 1/2
  Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.large_image, options);
  imageView.setImageBitmap(bitmap);

• ​​释放资源​​：

  @Override
  protected void onDestroy() {
      super.onDestroy();
      imageView.setImageDrawable(null); // 防止内存泄漏
  }

2. ​​优化加载策略​​

• ​​列表控件（RecyclerView）​​：使用 Glide的自动复用和暂停加载功能

• ​​图片格式选择​​：

  • WebP> PNG（透明需求） > JPEG（照片）

---

⚠️ ​​六、常见问题解决​​

1. ​​图片变形​​

   • 检查 scaleType是否设置为 centerCrop或 fitCenter

   • 确保 adjustViewBounds="true"

2. ​​图片模糊​​

   • 提供高分辨率图片（至少 2x View 尺寸）

   • 避免多次缩放（如先压缩再拉伸）

3. ​​加载失败​​

   • 使用 .error()设置占位图

   • 检查网络权限：<uses-permission android:name="android.permission.INTERNET"/>

---

 ​​总结与推荐​​

• ​​基础场景​​：本地图片 → android:src+ scaleType

• ​​网络图片​​：​​Glide​​（功能全面） 或 ​​Coil​​（Kotlin 优先）

• ​​性能关键​​：压缩图片 + 缓存策略 + 格式优化

• ​​避坑指南​​：

  • 主线程不加载大图

  • 列表中使用 Glide防止错位

  • 释放无用资源防 OOM