刘下记录：ImageView.scaleType 属性全解析（含视频）

0. 译序

原文：Working with the ImageView

ImageView 有一个常用场景：ImageView 的宽度固定，高度等比例缩放，且 ImageView 在 padding 全部为 0 的情况下不留白边，即图片完全填充 ImageView。（注意：该方法对“高度固定，宽度等比例缩放”不适用，具体见 例1-2 代码）

这篇文给出了这个场景的答案，翻译过来以背不时之需。

上述需求可以用如下属性实现：

例1-1

<ImageView
android:id="@+id/image"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="@drawable/image" />

但是，如下代码是不行的，显示的图片可能会出现变形，变形的图片宽度为原始图片的宽度，而高度被强制缩放成“30dp”：

例1-2

<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="@drawable/image" />

或者用 BitmapScaler 这个工具类，相关方法如下：

public class BitmapScaler
{
// Scale and maintain aspect ratio given a desired width
// BitmapScaler.scaleToFitWidth(bitmap, 100);
public static Bitmap scaleToFitWidth(Bitmap b, int width)
{
float factor = width / (float) b.getWidth();
return Bitmap.createScaledBitmap(b, width, (int) (b.getHeight() * factor), true);
}

// Scale and maintain aspect ratio given a desired height
// BitmapScaler.scaleToFitHeight(bitmap, 100);
public static Bitmap scaleToFitHeight(Bitmap b, int height)
{
float factor = height / (float) b.getHeight();
return Bitmap.createScaledBitmap(b, (int) (b.getWidth() * factor), height, true);
}

// ...
}

1. 概述

一般来说，我们使用 SDK 内置的图片控件展示图片。这个图片控件会自己考虑加载和优化问题，使得开发者更多的考虑应用相关的布局和内容等细节。

这篇教程中，我们将逐一讲解如何使用 ImageView，如何操作 bitmap，各种分辨率的文件夹以及其他内容。

2. 使用方法

从最简单的开始，ImageView 是布局文件中的一个控件，用途是在屏幕中展示图片（或 drawable 资源文件）。使用方法大概如下：

<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="@drawable/my_image" />

ImageView 会为你处理所有的加载和缩放问题。注意，scaleType 属性决定图片图片如何缩放以适应你的布局。在上例中，scaleType = “center” 使得图片以原始分辨率和居中的方式展示，而不考虑控件占用多大的空间。

3. 尺寸控制

通常条件下，ImageView 要控制的对象是图片的宽高，即 layout_width 和 layout_height：

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="fitXY" />

例子中的 scaleType=”fitXY” 表示将宽高均缩放到指定的长度“50dp”。

Fixing the width and height however means that the proportions of the width and height of the original image, known as the aspect ratio, will be altered. We can take advantage of the adjustViewBounds parameter to preserve this aspect ratio. However, we must either allow the height and/or width to be adjustable (i.e. by using maxWidth and using wrap_content for the dimension). Otherwise, the dimensions cannot be readjusted to meet the required aspect ratio.

然而，固定的宽高会改变原始图片的宽高比，而使用 adjustViewBounds 参数可以保持宽高比。必须将宽度或高度设置为可调节的（例如使用 maxWidth 和 wrap_content）。否则无法保持原始图片的宽高比。

<ImageView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true" />

通过这种将各种属性组合使用的方式我们可以控制图片的大致尺寸和宽高比例。

同样我们可以用 Java 代码通过 getLayoutParams() 动态的更改 ImageView 的宽高：

imageView.getLayoutParams().height = 100; // OR
imageView.getLayoutParams().width = 100;

某些场景下，图片需要缩放以适应父view的宽度，同时要求图片高度等比例缩放。我们可以使用链接中的 ResizableImageView 来达到目的。

4. 缩放类型

ImageView 根据 scaleType 的类型来展示图片。上文中我们探讨了 fitXY 和 adjustViewBounds。下面是常用的 scaleType 的一览表：

（注意：

以下规则仅符合 layout_width、layout_height、scaleType 三个属性的共同作用，而未考虑 adjustViewBounds 等属性；

纸上来的终觉浅，墙裂建议亲手试试，通过 SDK 自带的 layout 实时预览功能来查看不同的 scaleType 属性值与各种 layout_width、layout_height 搭配使用时的效果，便于理解和记忆；

虽然 fitXY 可以让图片完全按照 layout 的尺寸来显示，但是如果原始图片和 ImageView 的宽高比不一致则会导致最终显示的图片变形；如果你在开发图片浏览类型的应用，推荐使用 center 或 fitCenter 类型；）

scaleType	描述
center	将图片中心与 ImageView 的中心重合，保持图片的原始尺寸，只显示落在 ImageView 内部的图片部分
centerCrop	将图片中心与 ImageView 的中心重合，然后进行等比例缩放，直到图片宽高均不小于 ImageView 的宽高，位于 ImageView 之外的图片部分不显示，缩放过程中保持图片宽高比
centerInside	将图片中心与 ImageView 的中心重合，如果图片全部位于 ImageView 内部，则完成，否则对图片等比例缩小直到图片宽高均不大于 ImageView 的宽高
fitCenter	将图片中心与 ImageView 的中心重合，然后等比例进行缩放，直到图片宽高均不大于 ImageView 的宽高；fitCenter 与 centerInside 的区别在于：当图片原始尺寸小于 ImageView 时，后者不对图片做任何处理而前者对图片进行等比例放大直至其宽高至少有一项与 ImageView 对应的宽高相等
fitStart	将图片左上角与 ImageView 的左上角重合，其余和 fitCenter 相同
fitEnd	将图片右下角与 ImageView 的右下角重合，其余和 fitCenter 相同
fitXY	将图片的宽高缩放到与 ImageView 的宽高完全相同；缩放过程完全无视原始图片的宽高比
matrix	根据 setImageMatrix() 方法设置的 Matrix 类来显示图片，Matrix 类可以用来实现图片翻转等效果

上图对应的 android:scaleType 值：

第一行（从左至右）依次是 center, centerCrop, centerInside；

第二行（从左至右）依次是 fitCenter, fitStart, fitEnd, fitXY。

由上述图表可以看出，scaleType 可分为 3 大类：center，fit，matrix：

以 center 开头的值表示将图片中心和 ImageView 中心重合，然后保持原始尺寸（center）或将图片缩放到圈在 ImageView 内部（centerInside）或将图片放大到覆盖 ImageView（centerCrop）；

以 fit 开头的值表示将图片的宽高缩放到至少有一项与 ImageView 的宽高相同，根据双方对准的起点分为中心（fitCenter）、左上角（fitStart）、右下角（fitEnd）或无起点（fitXY）；

scaleType	图片和ImageView中心点重合	保持图片原始尺寸	保持图片宽高比	显示图片与 ImageView 大比较
center	√	√	√	同图片原始尺寸和 ImageView 大小关系
centerCrop	√	x	√	>=
centerInside	√	x	√	<=
fitCenter	√	x	√	<=
fitStart	x	x	√	<=
fitEnd	x	x	√	<=
fitXY	√	x	x	=

还不明白？看下视频讲解吧：安卓 ImageView scaleType 属性值解析

5. 支持多种屏幕分辨率

由于安卓设备的屏幕尺寸、分辨率类型繁杂，需要有一个能自动为设备匹配合适的资源的强大系统。安卓工程目录和安装包中有专门为不同类型的设备准备的资源文件夹，包括：ldpi（低分辨率），mdpi（medium dots per inch，中分辨率），hdpi（高分辨率），xhdpi（超高分辨率）。这些资源文件夹以 drawable-mdip 的形式命名。

为了适配多种分辨率，我们要按照 3:4:6:8 的比例来为上述资源文件夹设计图片文件，具体如下：

分辨率	DPI	示例设备	换算比例	像素	备注
ldpi	120	Galaxy Y	0.75x	1dp = 0.75px
mdpi	160	Galaxy Tab	1.0x	1dp = 1px
hdpi	240	Galaxy S II	1.5x	1dp = 1.5px
xhdpi	320	Nexus 4	2.0x	1dp = 2px	720p
xxhdpi	480	Nexus 5	3.0x	1dp = 3px	1080p
xxxhdpi	640	Nexus 6	4.0x	1dp = 4px

这意味着，如果你在 drawable-mdpi 文件夹中有一张 100x100 的图片，那么你要在 drawable-ldpi 文件中放置 75x75 的图片，drawable-hdpi 文件中放置 150x150 的图片，在 drawable-xhdpi 中放置 200x200的，在 drawable-xxhdpi 中放置 300x300 的图片。



Final Android Resizer 可以让你方便的对图片进行缩放：



这个便捷的工具可以让我们选择 drawable-xxhdpi 文件夹中的一张图片，自动的在相应的分辨率的资源文件夹中生成对应分辨率的图片。

更多支持多分辨率的知识请移步安卓支持多屏幕和图标设计官方文档。

6. 纹理和资源

从 4.3 系统开始，安卓提供一个 res/mipmap 的文件夹，用来存储纹理图片。纹理最大的用处是应用图标，如启动图标等。关于纹理的好处请移步这篇博文：纹理资源文件。

纹理图片资源通过 @mipmap/ic_launcher 的方式引用。将图标放在 res/mipmap 文件夹（而不是 drawable 文件夹）是最优的作法，因为这些图标会在与其他分辨率下经常使用。For example, an xxxhdpi app icon might be used on the launcher for an xxhdpi device. Review this post about preparing for the Nexus 6 which explains in more detail。

7. 使用 Bitmap

我们可以在 Java 代码中设置 ImageView 展示的图片：

ImageView image = (ImageView) findViewById(R.id.test_image);
image.setImageResource(R.drawable.test2);

或者：

ImageView image = (ImageView) findViewById(R.id.test_image);
Bitmap bMap = BitmapFactory.decodeFile("/sdcard/test2.png");
image.setImageBitmap(bMap);

8. 缩放 Bitmap

你可以调用 createScaleBitmap() 方法来调整 Bitmap 的尺寸：

// Load a bitmap from the drawable folder
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);

// Resize the bitmap to 150x100 (width x height)
Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, 150, 100, true);

// Loads the resized Bitmap into an ImageView
ImageView image = (ImageView) findViewById(R.id.test_image);
image.setImageBitmap(bMapScaled);

如果要等比例缩放 Bitmap，可以用 BitmapScaler 这个工具类，代码如下：

public class BitmapScaler
{
// Scale and maintain aspect ratio given a desired width
// BitmapScaler.scaleToFitWidth(bitmap, 100);
public static Bitmap scaleToFitWidth(Bitmap b, int width)
{
float factor = width / (float) b.getWidth();
return Bitmap.createScaledBitmap(b, width, (int) (b.getHeight() * factor), true);
}

// Scale and maintain aspect ratio given a desired height
// BitmapScaler.scaleToFitHeight(bitmap, 100);
public static Bitmap scaleToFitHeight(Bitmap b, int height)
{
float factor = height / (float) b.getHeight();
return Bitmap.createScaledBitmap(b, (int) (b.getWidth() * factor), height, true);
}

// ...
}

其他场景下，你可能想要根据屏幕的高或宽来缩放图片。将 DeviceDimensionsHelper.java 这个工具类拷贝到你的工程中，然后在 Context 中使用如下代码：

// Get height or width of screen at runtime
int screenWidth = DeviceDimensionsHelper.getDisplayWidth(this);
// Resize a Bitmap maintaining aspect ratio based on screen width
BitmapScaler.scaleToFitWidth(bitmap, screenWidth);

关于这个工具类的更多知识请戳我。

注意：任何形式的图片缩放都会造成图片 EXIF 元数据的丢失，包括相机，旋转，拍摄时间等。虽然有解决方案能将这些数据转移，但现在仍然有缺陷。如果你需要这些元数据或者想连同元数据一起上传到服务器，那么你应该上传原始文件而非处理后的文件。

9. SVG 格式图片

通过 svg-android 这个第三方库我们可以使用屏幕分辨率无关的 SVG 图片。

// Parse an SVG resource from the "raw" resource folder
SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.android);

// Fix issue with renderer on certain devices
myImageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

// Get a drawable from the parsed SVG and set it as the drawable for the ImageView
myImageView.setImageDrawable(svg.createPictureDrawable());

更多知识详见官方文档。

10. 参考文献

http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2

http://code.tutsplus.com/tutorials/android-user-interface-design-basic-image-controls–mobile-6846

http://developer.android.com/reference/android/widget/ImageView.html

http://developer.android.com/guide/practices/screens_support.html

https://code.google.com/p/svg-android/wiki/Tutorial

https://github.com/android/platform_frameworks_base/blob/master/core/java/android/widget/ImageView.java#L903-L907