Android ImageView 使用详解

火影  论坛元老 | 2025-4-18 08:45:27 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 1748|帖子 1748|积分 5244



  

ImageView 是 Android 中用于表现图片的核心控件,下面我将从基本使用到高级功能全面介绍 ImageView 的用法。
一、基本使用

1. XML 中声明 ImageView

  1. <ImageView
  2.     android:id="@+id/imageView"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:src="@drawable/my_image"  <!-- 设置图片资源 -->
  6.     android:scaleType="centerCrop"    <!-- 设置缩放类型 -->
  7.     android:adjustViewBounds="true"   <!-- 保持图片宽高比 -->
  8.     android:contentDescription="@string/image_desc" /> <!-- 无障碍描述 -->
复制代码
2. Java/Kotlin 中设置图片

  1. ImageView imageView = findViewById(R.id.imageView);
  2. // 设置图片资源
  3. imageView.setImageResource(R.drawable.my_image);
  4. // 设置Bitmap
  5. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
  6. imageView.setImageBitmap(bitmap);
  7. // 设置Drawable
  8. Drawable drawable = ContextCompat.getDrawable(this, R.drawable.my_image);
  9. imageView.setImageDrawable(drawable);
复制代码
二、图片缩放范例 (scaleType)

ImageView 提供了多种缩放方式:
scaleType 值形貌center不缩放,居中表现centerCrop等比例缩放,填充整个View,大概裁剪centerInside等比例缩放,完整表现在View内fitCenter (默认)等比例缩放,居中表现fitStart等比例缩放,顶部/左边对齐fitEnd等比例缩放,底部/右边对齐fitXY不等比缩放填满整个Viewmatrix使用矩阵变换
  1. // 代码设置缩放类型
  2. imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
复制代码
三、加载网络图片

1. 使用 Glide (推荐)

添加依赖:
  1. implementation 'com.github.bumptech.glide:glide:4.12.0'
  2. annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
复制代码
使用示例:
  1. Glide.with(this)
  2.     .load("https://example.com/image.jpg")
  3.     .placeholder(R.drawable.placeholder)  // 加载中显示
  4.     .error(R.drawable.error)             // 加载失败显示
  5.     .centerCrop()                       // 缩放方式
  6.     .into(imageView);
复制代码
2. 使用 Picasso

  1. implementation 'com.squareup.picasso:picasso:2.8'
复制代码
  1. Picasso.get()
  2.     .load("https://example.com/image.jpg")
  3.     .placeholder(R.drawable.placeholder)
  4.     .error(R.drawable.error)
  5.     .resize(300, 300)  // 调整大小
  6.     .centerCrop()
  7.     .into(imageView);
复制代码
四、高级功能

1. 圆形图片

使用 Glide 实现圆形图片:
  1. Glide.with(this)
  2.     .load(imageUrl)
  3.     .apply(RequestOptions.circleCropTransform())
  4.     .into(imageView);
复制代码
2. 圆角图片

自定义圆角转换器:
  1. public class RoundedCornersTransformation extends BitmapTransformation {
  2.     private final int radius;
  3.    
  4.     public RoundedCornersTransformation(int radius) {
  5.         this.radius = radius;
  6.     }
  7.    
  8.     // 实现转换逻辑...
  9. }
  10. // 使用
  11. Glide.with(this)
  12.     .load(imageUrl)
  13.     .transform(new RoundedCornersTransformation(20))
  14.     .into(imageView);
复制代码
3. 图片点击缩放动画

  1. imageView.setOnClickListener(v -> {
  2.     if (imageView.getScaleType() == ImageView.ScaleType.CENTER_CROP) {
  3.         imageView.animate().scaleX(1.5f).scaleY(1.5f).setDuration(300).start();
  4.     } else {
  5.         imageView.animate().scaleX(1f).scaleY(1f).setDuration(300).start();
  6.     }
  7. });
复制代码
五、性能优化


  • 图片压缩
    1. BitmapFactory.Options options = new BitmapFactory.Options();
    2. options.inSampleSize = 2; // 缩小为1/2
    3. Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.large_image, options);
    4. imageView.setImageBitmap(bitmap);
    复制代码
  • 内存接纳
    1. @Override
    2. protected void onDestroy() {
    3.     super.onDestroy();
    4.     // 清除图片引用
    5.     imageView.setImageDrawable(null);
    6. }
    复制代码
  • 使用合适的图片格式

    • PNG:适合有透明度需求的图片
    • JPEG:适合照片类图片
    • WebP:更高效的现代格式

六、常见问题办理


  • OOM(内存溢出)问题

    • 使用图片加载库(Glide/Picasso)
    • 加载适当尺寸的图片
    • 在滚动列表中使用停息加载功能

  • 图片变形问题

    • 确保设置正确的scaleType
    • 使用adjustViewBounds=“true”
    • 保持图片原始宽高比

  • 图片模糊问题

    • 提供足够高分辨率的图片
    • 制止过分缩放
    • 使用矢量图(SVG/VectorDrawable)替代位图

通过以上方法,可以充分使用ImageView展示各种图片,并确保良好的性能和用户体验。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

火影

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表