二、几种简单控件

本篇笔记将介绍与图像显示有关的几种控件用法

包括：专门用于显示图片的图像视图以及若干缩放类型效果，支持显示图片的按钮控件 —— 图像按钮，如何在按钮控件上同时显示文本和图标等。

1. 图像视图 ImageView

显示文本用到了文本视图 TextView ，显示图像则用到图像视图 ImageView 。由于图像通常保存为单独的图片文件，因此需要先把图片放到 res/drawable 目录，然后再去引用该图片的资源名称。

比如现在有张苹果图片名为 apple.png ，那么 XML 文件通过属性 android:src 设置图片资源，属性值格式形如 “@drawable/不含扩展名的图片名称” 。添加了 src 属性的 ImageView 标签示例如下：

<ImageView
    android:id="@+id/iv_scale"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:src="@drawable/apple" />

若想在 Java 代码中设置图像视图的图片资源，可调用 ImageView 控件的 setImageResource 方法，方法参数格式形如 “R.drawable.不含扩展名的图片名称” 。

仍以上述的苹果图片为例，给图像视图设置图片资源的代码例子如下所示：

// 从布局文件中获取名为iv_scale的图像视图
ImageView iv_scale = findViewById(R.id.iv_scale);
// 设置图像视图的图片资源
iv_scale.setImageResource(R.drawable.apple);

运行测试App，展示图片的界面效果如图所示

观察效果图发现苹果图片居中显示，而非文本视图里的文字那样默认靠左显示，这是怎么回事？

原来 ImageView 本身默认图片居中显示，不管图片有多大抑或有多小，图像视图都会自动缩放图片，使之刚好够着 ImageView 的边界，并且缩放后的图片保持原始的宽高比例，看起来图片很完美地占据视图中央。

这种缩放类型在 XML 文件中通过属性 android:scaleType 定义，即使图像视图未明确指定该属性，系统也会默认其值为 fitCenter ，表示让图像缩放后居中显示。添加了缩放属性的 ImageView 标签如下所示：

<ImageView
    android:id="@+id/iv_scale"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:scaleType="fitCenter"
    android:src="@drawable/apple" />

在 Java 代码中可调用 setScaleType 方法设置图像视图的缩放类型，其中 fitCenter 对应的类型为 ScaleType.FIT_CENTER ，设置代码示例如下：

// 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图中间”
iv_scale.setScaleType(ImageView.ScaleType.CENTER);

除了居中显示，图像视图还提供了其他缩放类型

当你尝试了这些属性之后，能发现 centerInside 和 center 的显示效果居然一模一样，这缘于它们的缩放规则设定。

表面上 fitCenter 、 centerInside 、 center 三个类型都是居中显示，且均不越过图像视图的边界。

它们之间的区别在于：fitCenter 既允许缩小图片、也允许放大图片， centerInside 只允许缩小图片、不允许放大图标，而 center 自始至终保持原始尺寸（既不允许缩小图片、也不允许放大图片）。

因此，当图片尺寸大于视图宽高，centerInside 与 fitCenter 都会缩小图片，此时它俩的显示效果相同；当图片尺寸小于视图宽高， centerInside 与 center 都保持图片大小不变，此时它俩的显示效果相同。

2. 图像按钮 ImageButton

常见的按钮控件 Button 其实是文本按钮，因为按钮上面只能显示文字，不能显示图片，ImageButton 才是显示图片的图像按钮。

虽然 ImageButton 号称图像按钮，但它并非继承 Button ，而是继承了 ImageView ，所以凡是 ImageView 拥有的属性和方法， ImageButton 统统拿了过来，区别在于 ImageButton 有个按钮背景。

尽管 ImageButton 源自 ImageView ，但它毕竟是个按钮呀，按钮家族常用的点击事件和长按事件， ImageButton 全都没落下。不过 ImageButton和Button 之间除了名称不同，还有下列差异：

Button 既可显示文本也可显示图片（通过 setBackgroundResource 方法设置背景图片），而 ImageButton 只能显示图片不能显示文本。
ImageButton 上的图像可按比例缩放，而 Button 通过背景设置的图像会拉伸变形，因为背景图采取 fitXY 方式，无法按比例缩放。
Button 只能靠背景显示一张图片，而 ImageButton 可分别在前景和背景显示图片，从而实现两张图片叠加的效果。

从上面可以看出，Button与ImageButton各有千秋，通常情况使用Button就够用了。

但在某些场合，比如输入法打不出来的字符，以及特殊字体显示的字符串，就适合先切图再放到 ImageButton 。举个例子，数学常见的开平方运算，由输入法打出来的运算符号为 “√” ，但该符号缺少右上角的一横，正确的开平方符号是带横线的，此时便需要通过 ImageButton 显示这个开方图片。

不过使用 ImageButton 得注意，图像按钮默认的缩放类型为 center（保持原始尺寸不缩放图片），而非图像视图默认的 fitCenter，倘若图片尺寸较大，那么图像按钮将无法显示整个图片。

为避免显示不完整的情况，XML 文件中的 ImageButton 标签必须指定 fitCenter 的缩放类型，详细的标签内容示例如下：

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:src="@drawable/sqrt"
    android:scaleType="fitCenter"/>

运行测试 App ，打开演示界面如图所示，可见图像按钮正确展示了开平方符号。

3. 同时展示文本与图像

现在有了 Button 可在按钮上显示文字，又有 ImageButton 可在按钮上显示图像，照理说绝大多数场合都够用了。

然而现实项目中的需求往往捉摸不定，例如客户要求在按钮文字的左边加一个图标，这样按钮内部既有文字又有图片，乍看之下 Button 和 ImageButton 都没法直接使用。

若用 LinearLayout 对 ImageView 和 TextView 组合布局，虽然可行，XML 文件却变得冗长许多。其实有个既简单又灵活的办法，要想在文字周围放置图片，使用按钮控件 Button 就能实现。

原来 Button 悄悄提供了几个与图标有关的属性，通过这些属性即可指定文字旁边的图标，以下是有关的图标属性说明。

drawableTop ：指定文字上方的图片。
drawableBottom ：指定文字下方的图片。
drawableLeft ：指定文字左边的图片。
drawableRight ：指定文字右边的图片。
drawablePadding ：指定图片与文字的间距。

譬如下面是个既有文字又有图标的 Button 标签例子：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_about"
    android:textSize="17sp"
    android:drawablePadding="5dp"
    android:text="图标在左边" />

以上的 Button 标签通过属性 android:drawableTop 设置了文字上边的图标，若想变更图标所处的位置，只要把 drawableTop 换成对应方向的属性即可。

Android 基础 — 3、几种简单控件（三）图像显示 | 青训营笔记

二、几种简单控件

1. 图像视图 ImageView

2. 图像按钮 ImageButton

3. 同时展示文本与图像