刘下记录：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. 支持多种屏幕分辨率

---

因为安卓设备的屏幕尺寸、分辨率类型繁杂，需要有一个能本身主动为设备匹配合适的资源的强大系统。安卓project目录和安装包中有专门为不一样类型的设备准备的资源目录，包含：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 这个工具类复制到你的project中，而后在 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 元数据的丢失，包含相机。旋转。拍摄时间等。尽管有解决方式能将这些数据转移，但现在仍然有缺陷。假设你需要这些元数据或者想连同元数据一块儿上传到server，那么你应该上传原始文件而非处理后的文件。

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