首页 » AppInventor » App Inventor 进阶:图像框的3个秘密

App Inventor 进阶:图像框的3个秘密

图像框是一个很常用的组件,相信使用过 App Inentor 的同学都不陌生。但是对于 WxBit 图形化编程系统内的图像框,除了比较活跃的内测用户,基本上都没有同学完全了解。
1、图像框支持 GIF 动画
这个功能很早就实现了,直接将 gif 图片设置到图像框就行。目前只支持 gif,还不支持 apng 和 webp 格式的动画。如果想要控制动画的播放,监听动画的播放事件,则需要使用“动画图像框”。动画图像框在图像框基础上开发,是增强版的图像框。

图像框支持GIF
图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-,显示效果会是怎么样呢?请同学们自己动手试试。ldpimdpixhdpi 是什么东西?请接着看。

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个秘密,转载请注明来源!