Android UI 组件系列（三）：ImageView 使用技巧与图像加载

引言

在 Android 开发中，图像展示是常见的需求之一，无论是在应用的界面中展示本地图片，还是从网络加载动态内容，ImageView 都是最基础的 UI 组件之一。它不仅能够显示各种类型的图像资源，还可以灵活地调整图像的显示方式，比如通过缩放、裁剪、变换等操作来适配不同的屏幕和界面布局。

随着移动应用对用户体验要求的提升，图像加载的效率、质量和展示效果变得愈加重要。本篇文章将为大家详细介绍 ImageView 的基本用法，常见的属性配置，以及如何使用第三方库如 Glide 或 Picasso 高效加载网络图片。此外，我们还将探索一些实用的技巧，例如如何为图片添加圆角、裁剪图像和实现动态效果，以帮助你在 Android 开发中更加灵活地运用 ImageView。

ImageView 的基本用法

ImageView作为最通用的UI组件之一，在使用过程中涉及到三个主要方面：XML布局、Java代码的动态操作，以及图片资源的设置方式。在这部分，我们将以此介绍如何在XML中定义ImageView，如何通过Java代码进行动态控制，并讲解如何合理地管理和使用本地图片资源。

在 XML 中使用 ImageView

首先，我们需要在布局文件中定义一个 ImageView 元素。

XML 复制代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="center"
    android:id="@+id/main"
    android:padding="16dp">

      <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_phone_bg"
        />


</LinearLayout>

android:id：定义ImageView 的唯一标识符，便于在Java代码中引用。
android:layout_width 和 android:layout_height：设置 ImageView 的宽高，可以使用wrap_content 或 match_parent，也可以指定具体的数值。
android:scr：定义 ImageView 显示的图片资源。这里引用的是一个名为login_phone_bg的本地图片。

在 Java 代码中使用 ImageView

在Java代码的 Activity 或者 Fragment 中，可以通过 findViewById() 方法来引用 ImageView，然后通过 Java 设置图片：

java 复制代码

    private void setupImageView() {
        ImageView imageView = findViewById(R.id.imageView);
        imageView.setImageResource(R.drawable.login_phone_bg);

    }

setImageResourc()：可以用来设置本地的图片资源。这里我们使用R.drawable.login_phone_bg 来引用res/drawable/目录下的图片文件。

本地图片资源的放置

在 Android 项目中，本地图片资源通常存放在 res/drawable/ 目录下。不同分辨率的图片可以存放在对应的子文件夹中，如drawable-mdpi/、drawable-hdpi/、等，以保证在不同屏幕密度的设备上显示最佳效果。

标准图片放到res/drawable/ 目录下（无特定分辨率标识符）。

不同分分辨率的图片可以创建多个分辨率的文件夹，drawable-mdpi/、drawable-hdpi/、等并根据设备的屏幕密度自动选择合适的图片。

ImageView 常见属性解析

ImageView 拥有一些非常实用的属性，能够帮助我们控制图片的显示方式、大小调整、以及对无障碍用户的支持。接下来，我们将详细解析几个常见的属性，帮助你更灵活地运用 ImageView 来展示图片。

android:scr（设置资源）

用于设置 ImageView 显示的图片资源。

XML 复制代码

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/login_phone_bg"
        />

这里设置了一个本地的图片 login_phone_bg，该图片将被加载并显示在ImageView中。

android:scaleType（图片填充方式）

定义图片如何适应 ImageView 的大小。常见的值包括：

center：保持图片的原始大小，并将其居中显示。如果图片比 ImageView 小，则不会进行缩放。
centerCrop：保持图片的纵横比，放大图片并裁剪超出 ImageView 范围的部分，使图片填满ImageView。
fitCenter：保持图片的纵横比，将图片缩放到适应 ImageView 的大小，但不会裁剪图片。
fitXY：拉伸图片以适应 ImageView 的大小，可能会改变图片的纵横比。

XML 复制代码

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:src="@drawable/login_phone_bg"
        android:scaleType="centerCrop"
        />

效果如下：

我们使用了 centerCrop，图片会放大并裁剪超出部分，确保图片能够填满 ImageView。

android:adjustViewBounds（根据ImageView的宽高比例调整图片大小）

设置是否根据 ImageView 的边界调整图片的大小。默认为false，如果设置为true，则会按照ImageView的宽高比例调整图片的大小。

XML 复制代码

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:src="@drawable/login_phone_bg"
        android:adjustViewBounds="true"
        />

效果如下：

设置为true后，ImageView 会根据自身的宽高比例调整图片的大小，避免图片变形。

android:padding（内边距）

padding 控制图片内容与ImageView边缘之间的间距。

XML 复制代码

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@color/blue"
        android:src="@drawable/login_phone_bg"
        />

效果如下：

android:layout_margin（外间距）

layout_margin 控制 ImageView 与其他组件之间的间距。

XML 复制代码

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_marginLeft="26dp"
        android:background="@color/blue"
        android:src="@drawable/login_phone_bg"
        />

效果如下：

ImageView 加载网络图片

目前，安卓中最主流的两个图像加载库 Glide 和 Picasso。这两个库都非常强大，广泛用于加载和现实网络图片。使用方法非常简单，并且能够高效地处理图片的加载、缓存和显示。

我们就以Glide为例，因为它支持更多的功能，如GIF动画和高效的内存管理。

（在build.gradle写Implementation不生效问题）

在 build.gradle 文件中添加 Glide 的依赖：

java 复制代码

dependencies {

    ....
    implementation("com.github.bumptech.glide:glide:4.12.0")
    annotationProcessor("com.github.bumptech.glide:compiler:4.12.0")
}

注意：是Mudule.app下的build.gradle，而不是Project下的。

添加完成后点击"Sync Now"按钮，同步Gradle 配置并下载依赖，

之后就可以在代码中使用Glide来加载图片了。

java 复制代码

private void setupImageView() {
        ImageView imageView = findViewById(R.id.imageView);
        Glide.with(this)
                .load("https://dw5qmjt8lb49c.cloudfront.net/shortvideo/new-media/prod/content/cover/342i7e48mzfttpqsnv2v5pch9sr210a2.jpg")
                .placeholder(R.drawable.login_phone_bg)
                .error(R.drawable.ic_launcher)
                .into(imageView);
    }

with(this)：指定上下文，可以是Activity或者Fragment。
load("image_url")：指定图片的URL或者路径。
placeholder()：图片加载过程中的占位图。
error()：图片加载失败的占位图。
into(imageView)：将图片加载到指定的ImageView中。

注意：需要提前在AndroidManifest.xml中进行权限声明。

java 复制代码

<uses-permission android:name="android.permission.INTERNET" />

ImageView 实现圆角和裁剪

图片圆角和裁剪是图像展示中的常见需求，尤其是在需要处理用户头像、展示内容预览或设计UI组件时。通过不同的裁剪技巧，可以让图片展示效果更加丰富和美观。

如何实现图片圆角效果

圆角效果常用于各种图片展示场景，尤其是处理头像或 卡片型 UI 时，圆角能使界面看起来更加柔和。Glide 提供了一个非常简便的方式来实现图片圆角。

java 复制代码

        Glide.with(this)
                .load("https://dw5qmjt8lb49c.cloudfront.net/shortvideo/new-media/prod/content/cover/342i7e48mzfttpqsnv2v5pch9sr210a2.jpg")
                .placeholder(R.drawable.login_phone_bg)
                .error(R.drawable.ic_launcher)
                .transform(new RoundedCorners(40))
                .into(imageView);

通过 RoundedCorners 转换器，可以指定一个圆角半径值，图片的四个角会变成圆角效果。

调整半径大小，可以根据需求来决定图片的圆角程度。

效果如下：

圆型裁剪

对于头像展示，常常需要将图片裁剪成圆形。Glide 提供了一个内置的 circleCrop()方法，能够非常方便地将图片裁剪为一个圆形。

java 复制代码

        Glide.with(this)
                .load("https://dw5qmjt8lb49c.cloudfront.net/shortvideo/new-media/prod/content/cover/342i7e48mzfttpqsnv2v5pch9sr210a2.jpg")
                .placeholder(R.drawable.login_phone_bg)
                .error(R.drawable.ic_launcher)
                .circleCrop()
                .into(imageView);

效果如下：

椭圆形裁剪

如果需要将图片裁剪成 椭圆形，可以通过自定义 BitmapTransformation 来实现。

自定义椭圆裁剪代码：

java 复制代码

public class OvalTransformation extends BitmapTransformation {
    
    @Override
    public void updateDiskCacheKey(MessageDigest messageDigest) {
        messageDigest.update("oval".getBytes(Charset.forName("UTF-8")));
    }

    @Override
    protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
        int width = toTransform.getWidth();
        int height = toTransform.getHeight();

        // 计算裁剪区域的中心点和半径
        int radiusX = width / 2;
        int radiusY = height / 2;

        // 创建椭圆形裁剪的 Bitmap
        Bitmap ovalBitmap = Bitmap.createBitmap(width, height, toTransform.getConfig());
        Canvas canvas = new Canvas(ovalBitmap);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.WHITE);

        // 创建椭圆裁剪的区域
        RectF rectF = new RectF(0, 0, width, height);
        canvas.drawOval(rectF, paint);  // 绘制椭圆

        // 将原始图片绘制到椭圆区域内
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(toTransform, 0, 0, paint);
        return ovalBitmap;
    }
}

然后在Glide 中使用自定义的裁剪方法：

java 复制代码

        Glide.with(this)
                .load("https://dw5qmjt8lb49c.cloudfront.net/shortvideo/new-media/prod/content/cover/342i7e48mzfttpqsnv2v5pch9sr210a2.jpg")
                .placeholder(R.drawable.login_phone_bg)
                .error(R.drawable.ic_launcher)
                .transform(new OvalTransformation())
                .into(imageView);

效果如下：

结语

在本篇博客中，我们详细探讨了 ImageView 作为 Android 开发中常用的 UI 组件的基本用法和一些常见的使用技巧。通过介绍 ImageView 的常用属性、如何加载网络图片、以及如何实现图片的圆角和裁剪效果，我们展示了如何充分利用 Glide 这样的强大库来优化图片加载和处理过程。

无论是简单的图片展示，还是需要对图片进行圆角、椭圆形裁剪等高级处理，ImageView 都为我们提供了灵活的使用方式。借助现代的图像加载库，我们可以轻松地应对不同场景下的需求，提升用户体验，并确保应用的性能。

希望本篇博客能够帮助你更好地掌握 ImageView 的使用技巧，在 Android 开发中实现更精美的图像展示效果。如果你对 ImageView 或 Glide 还有其他疑问，欢迎在评论区分享你的观点和问题。