天天看点

《Android UI基础教程》——1.4节工具

本节书摘来自异步社区《android ui基础教程》一书中的第1章,第1.4节工具,作者 【美】jason ostrander,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 工具

android ui基础教程

android sdk中包含可协助你开发应用的一整套工具。其中包括sdk工具和平台工具。sdk工具,包括adt,是独立于平台并且不管你是为哪个android版本开发应用都能够使用的。平台工具是针对特定的android版本的并且在更新sdk版本时需要重新安装。让我们把注意力集中在sdk工具上来,尤其是那些被用来开发android应用ui的工具。

1.4.1 android开发者工具

开发android应用的主要工具是使用adt插件的eclipse ide。eclipse是一个强大的、多语言的开发环境,拥有诸如代码补全、内嵌文档以及自动重构等多项特性。你可以使用eclipse来开发应用,使用标准的eclipse java debugger进行调试,甚至可以签署在android market上发布的发布包。在adt中继承了许多工具,你应当熟悉使用它们。在这里,我将把重点放在创建android应用的用户界面的工具。其中最主要的是图形化的布局编辑器。

图形化布局编辑器

图形化布局编辑器允许你通过拖放来创建ui。在早期版本的adt中,图形化布局编辑器并不是很有帮助。幸运的是,最新版本非常强大,可以用来创建复杂的包含有复合组件以及动画的布局。

图1.12展示了图形布局编辑器的各个组件。

《Android UI基础教程》——1.4节工具

1.configuration下拉菜单让你可以改变当前布局展示的方式。这是查看在诸如手机和平板电脑等不同硬件配置下的ui的一个快捷方式。

2.canvas展示了将在特定硬件配置下显示的当前布局。布局包括一组指定上下文的按钮,这被用来快速改变选择的视图的参数。你可以从palette拖曳视图并把它们放在这儿从而构建ui。你还可以右击组件以得到可用配置的指定上下文的列表。你还可以重用这个列表来重构ui使其成为可复用的组件。

3.palette包含android用户界面的基本构建模块。在这里你可以找到基本的布局容器、控制形式(包括按钮和文本输入)、甚至像过渡动画等高级功能。你可以拖动任意组件到canvas中来创建ui。当你拖动组件到canvas上时,它们将会捕捉到已存在的模块的边缘,自动对齐布局。

4.outline通过有层次地列出所有组件展示了布局的全貌。这样可以很容易地看出各组件之间是如何嵌套的。它同样也让发现隐藏的或者不可见的组件更加容易。你可以使用这个视图来快速记录布局的组件。

5.在图形布局编辑器底部的是切换到ui的标准xml视图的tab。虽然你可以通过使用图形布局编辑器完成很多工作,仍然建议你通过手工编码完成最终布局的xml。

《Android UI基础教程》——1.4节工具

图形化布局编辑器非常强大。你应该花一些时间去了解可用的选项。让我们试用一下,给布局加几个按钮和文本框。

1.在eclipse的package explorer中,展开项目的布局res / layout`` 文件夹。

2. 右击名为main.xml的文件并选择打开方式android布局编辑

器(图1.3)。

然后将会出现图形化布局编辑器。在开始编辑之前,可能需要先进行一下设备配置。在窗口顶部的控制栏是关于设备的android版本、主题、屏幕大小、朝向等的详细说明。

3.如图1.14所示配置选项。为了使更改生效,你可能需要关闭并重新打开main.xml文件。

《Android UI基础教程》——1.4节工具

4.现在尝试拖一个textview到编辑器中,就放在现有的textview的下面。注意到你只能将其放在现有视图的上面或者下面。还记得前面提到的linearlayout容器吗?它是竖直朝向的,所以你在它里面只能垂直排放视图。现在试着改变这个textview的大小。

5.让它与窗口的宽度相同。

6.在新创建的textview下面加一个按钮,并让按钮的宽度与窗口的宽度相同。现在可以看到它与图1.15非常类似。可以看到,图形化布局编辑器使得方便快速地创建复杂布局变得可能。

《Android UI基础教程》——1.4节工具

1.4.2 android虚拟设备

android设计用于在多种硬件上能够运行。所以在应用发布之前检验代码使其能够与绝大多数android设备兼容,这一点很重要。这个时候,就有了android虚拟设备,或者叫做avd。avd是一个模拟的android设备。它不仅仅是一个模拟器,实际上它能运行完整的android框架,就像真实的设备能做的那样。这是一个重要的区别,它比一般的模拟器要好得多,能够更好地代表现实世界中的设备。

由于avd是虚拟设备,它们使用标准的android图形栈。对于平板电脑之类的高分辨率的avd来说,它们太慢了。google正在努力改善这一点,但从现在来看,还是建议使用图形化布局编辑器来测试布局,并只在最终验证的时候使用模拟器。当然,你总是可以使用一个真实的android设备来进行测试。

当你运行hello world应用时就已经创建了一个avd了。你使用avd manager做到这一点。通过avd manager,你可以创建一系列的有着不同硬件特点的模拟设备,包括以下内容。

屏幕尺寸和默认朝向。

硬件支持,如加速器和游戏手柄。

android操作系统版本。

sd卡存储,使用你的磁盘模拟。

总之,许多手机制造商制作了特定的avd来帮助在他们的硬件上进行测试。你应当创建一系列的虚拟设备并逐一测试,保证应用程序具备最大的设备兼容性。

提示: 模拟器对于测试应用程序很有用,但是它不能模拟所有的硬件功能。例如,没有对于模拟opengl图形、近场通信(nfc)、甚至是wi-fi的支持。要保证最大的系统兼容性,你必须总是在一个真正的硬件设备上测试应用最终版本。

1.4.3 层次浏览器(hierarchy viewer)

无论开发什么应用,程序响应速度快这一点都很重要。通常来说,反应迟缓的应用程序是由于在画ui时影响了速度。为了帮助在这些情况下进行调试,android增加了一个叫做hierarchy viewer的工具。顾名思义,这个程序将显示应用的完整布局层次,允许你对潜在的问题进行优化和调试。

注意: 出于安全考虑,层次浏览器只连接到运行有开发者版本的android的设备。事实上,你只能在已有root权限的手机或者模拟器上使用层次浏览器。

通过运行android sdk目录下的可执行的tools/hierarchyviewer使用层次浏览器。

1.现在运行层次浏览器并选择hello world应用。

2.点击load view hierarchy按钮,你将会看见如图1.16所示。

hierarchy viewer有4个主要组成部分。

左侧边栏根据每个设备的运行过程显示所有已连接的设备。在这里你可以选择你的应用。

树形视图是ui布局的图形表示。你可以清楚地看到布局是由哪几个部分组成的。绘制拥有许多嵌套组件的大布局比起制作简单的布局要花长得多的时间。如果仔细观察,你会在一些组件上看到彩色的圆圈。这会直观地展示绘制该视图以及其子视图所花的时间。绿色是较快,红色是较慢。点击视图可以得到关于其绘制时间的更多信息,同时可以看到该视图出现在屏幕上的预览。

树形概览提供了一个整体层级的快速放大视图,让你可以快速感觉到布局的复杂度。这个窗格同时提供关于树形视图窗格的快速导航。

布局视图展示了应用实际展示的轮廓。这能够帮助在实际展示的ui中定位视图组件。通过点击窗格中的内容,你可以看到展示的内容分别对应哪个组件。

如果你自己观察hello world应用的层级,你可能会注意到它包含比列在main.xml中更多的组件。下面是一个简单解释。

最上面的组件是phonewindow。这代表该设备的展示。它总是存在并且是除了通知栏之外整个展示的基础容器。这不是在main.xml中的linearlayout。相反,这个布局是系统绘制的,目的是为了在内容上展示标题栏。注意到额外的framelayout和textview了吗?那个是该应用的标题栏。如果运行的程序没有标题栏,那么这个布局将会被删除。

另一个framelayout是应用。这个布局包含了一个子linearlayout。子linearlayout来自于例子中的main.xml文件。它包含两个textview和你早先在hello world应用程序中创建的按钮。

hierarchy view在调试嵌套的linearlayout时尤其有用。如果你开始创建多层次的linearlayout布局,考虑切换到relativelayout以降低复杂度。

1.4.4 用ddms截屏

虚拟调试监视服务器(ddms)是一个能够捕获应用状态的强有力的工具,包括正在运行的线程数、堆的使用情况、对象分配以及日志。这些特性都是在本书所述范围之外的,ddms另外还有一个非常重要的功能,这个功能所有的应用开发者都会需要:它允许你能获得应用程序的屏幕截图。要运行ddms,在eclipse中选择window >open perspective > other > ddms。在设备窗格中选择你的设备,然后点击相机图标(图1.17)。这将会打开设备截屏窗口。在这里你可以旋转图像,刷新并重新捕获屏幕以及保存。

《Android UI基础教程》——1.4节工具

注意: android 4.0版本及以上无需使用ddms也可以截图。只需同时按住电源和音量向下按钮,然后截图就会保存在设备图片库中。

1.4.5 其他工具

除了通用的android ui工具之外,还有一些工具对于完善应用ui非常有用,但这些工具大多鲜为人知。

draw9patch

在一个设备上android应用程序所使用的图像往往会被拉伸以填满可用区域。这会使图像变得扭曲,最终造成难看的图形。android使用一个称作9-patch的图像去处理缩放而不会导致失真。例如,在android中所有的按钮都是9-patch图像缩放而来,但是它们的边角却都保持合适的形状(图1.18)。一个9-patch图像其实就是一个标准的图像文件,只不过多了1像素的边框。通过把边框中的像素点变成黑色,在放大时你可以看到图像的哪些部分可以被拉伸。android sdk提供了创建这些图像的draw9patch命令行工具。

《Android UI基础教程》——1.4节工具

图1.18 draw 9-patch工具的一个例子。按钮可以延伸,但边角保持不变

layoutopt

手动优化布局非常乏味。layoutopt工具通过分析布局并展示视图层级上无效率的地方可以为你做的一些事情。这个命令行工具需要一个xml布局文件列表,或者文件目录,然后可以输出它的分析结果。尽管这对于调试复杂的层级来说并不足够,但它可以在修复布局变慢时提供一个快速方法。

android asset studio

monkey

在创建应用程序时,彻底测试用户体验的每一个方面至关重要。很难真正测试一个ui,因为应用的开发者对于界面非常熟悉并且不会去做那些预料之外的或者只是古怪的事情——比如在旋转手机时同时按多个按钮。这个时候就可以用到monkey工具了。monkey按照指定的次数迭代,并且会随机地点击屏幕的各个区域,改变设备的朝向,点击音量和媒体键,总之会做很多疯狂的事情。这通常是找出意想不到错误的简单方式。