图1 图像框支持GIF动画
图2 动画图像框增强的功能
2、图像框支持 Nine-Patch 图片
Nine-Patch 就是 9-patch 图，也叫 .9 图，也称碘酒图，扩展名是 .9.png，这是什么图片呢？先来看看不同尺寸图像框显示同一张图片的效果：
图3 图像框拉伸效果对比
左边为原图，中间的图像框不设置宽高，右边设置为缩放。可以看到中间的图片没有填满图像框，而右边的圆弧脑袋拉伸变形了。能不能让圆弧在拉伸时不变形呢？假设我们希望是圆弧脑袋和手足不变，躯干部分拉伸。如图4所示，将图片切分为 9 份，也就是 1 3 7 9 编号的四角保存不变，在 2 4 编号用黑色点标记的地方拉伸。
图4 图片分割与拉伸标记
将原图的四边各扩大 1px，并且设置透明背景，以 1px 的黑色线段或者点，在 2 4 区域标记出拉伸图像的区域，保存为 .9.png 文件。当横向需要拉伸时，在 2 区标记的位置拉伸；当纵向需要拉伸时，以 4 区标记的位置拉伸。图片四周添加的 1px 在显示时会被裁切，只用于标记如何显示，这种标记方法就是 Nine-Patch 图片名字的由来。
图5 Nine-Patch 图片的拉伸效果
图像框的这个功能有什么用呢？
例如我们要显示全屏的介绍页图片，由于屏幕尺寸不一样，图片必然需要拉伸才能全屏。使用 .9 图标记出拉伸的区域，能够让图片在我们期望的位置拉伸。可是图像框里面不能放其他组件，如果需要制作一个对话列表，我们希望气泡边框拉伸，左右指示箭头不变形，就不能用图像框了。
布局和按钮的背景图片，也支持 .9 图！
设计聊天气泡如图6所示，1 3 7 9 区保持不变，2 4 区标记拉伸，而 6 8 区则用于标记用于显示内容的区域。
图6 聊天气泡图的拉伸标记和内容区域标记
实际保存图片的大小为 31x36 px，名字为 received.9.png 和 sent.9.png，应用到组件设计视图如下：
图7 聊天对话框的组件设计
但是左右两边的小箭头怎么看起来这么小呢？因为我们所使用模拟器的像素密度是 320dpi（xhdpi），而保存图片的像素密度是 mdpi ，系统并不知道，需要给图片文件名加上标记 mdpi-，分别命名为 mdpi-received.9.png 和 mdpi-sent.9.png，显示效果对比如下：
图8 背景图添加像素密度前缀的效果对比
如果将文件名的前缀设置为 ldpi-，显示效果会是怎么样呢？请同学们自己动手试试。ldpi、mdpi、xhdpi 是什么东西？请接着看。
3、图片的像素密度设置
安卓设备种类繁多，有手机、平板和电视等不同尺寸的屏幕，而且相同尺寸屏幕的密度也可能不同。不清楚像素密度是什么的同学，请先阅读“App Inventor 入门：组件宽高的dp是什么？”
以一张 540x120 分辨率的图片为例，在分辨率为 1080x1920，像素密度为 xxhdpi 的6寸屏幕A设备中，图片显示的宽度占屏幕的一半。在分辨率为 720x1280，像素密度为 xhdpi 的6寸屏幕B设备中，图片显示的宽度占屏幕的 3/4。这个很好理解，用图片宽度除以屏幕分辨率宽度就能得出结果。
图9 不同像素密度设备显示宽高都设置为A的图片
但是，如果这张图片是以 xxhdpi 标准设计的，那么在AB两个设备中显示的宽度都应该占屏幕的一半，这样才符合设计师的初衷。怎么样可以实现呢？我们可以将图片的 px 宽度换算成 dp，限定图像框的宽度。参考上篇介绍的计算公式，这里 540px = 180 dp。
而更简单的方法，是设置图片文件名的前缀为 xxhdpi-，无需计算 dp。这就是上篇所说将图像框的宽高设置为 A，也能达到设置 dp 一样的效果。如图9所示，第二张图片因为文件名设置 xxhdpi- 前缀，在AB设备显示的宽度都是占屏幕的一半。
表1 屏幕的像素密度与分辨率
表1列出的像素密度与分辨率只是标准参考，并不代表 xhdpi 的设备就一定是 720x1280。同样的，屏幕的分辨率也不能决定像素密度，请参考 “App Inventor 入门：组件宽高的dp是什么？”
在原先的 App Inventor 中，直接将图片 px 等同为 dp，导致图像框不设置宽高时会将图片放大显示，出现图片模糊的问题。作者认为这是不正确的，在 WxBit 图形化编程系统中做了更正。因此，小图片放到图像框不设置宽高，在 hdpi 及以上的屏幕中， WxBit 图形化编程系统显示的图片看起来比原先 App Inventor 系统里的图片小。
在安卓的开发规范中，推荐为不同密度的屏幕分配不同分辨率的图片，以减少系统对图片的缩放次数，提高渲染效率。对于图形化编程系统来说，这样做有点过于复杂，因此我们只保留一套图片。如果发现图片显示不清晰，很可能是因为小图片被放大导致。设计稿可以使用更高密度如 xhdpi 或 xxhdpi，图片设置像素密度的文件名前缀，保证在主流高像素密度屏幕的显示效果，在低像素密度的屏幕则自动缩小。如果还是达不到期望的效果，只能是制作多套图片，根据设备的像素密度手工设置了。
原文链接：App Inventor 进阶：图像框的3个秘密，转载请注明来源！