AndroidSDK上⼿指南：⽤户界⾯设计
内容简介
我们将为应⽤程序项⽬添加布局⽅案，在这⽅⾯XML与Eclipse ADT接⼝将成为⼯作中的得⼒助⼿——不过在后⾯两节中还会⽤到⼀部分Java开发知识。XML与Java在Android平台的开发⼯作当中可谓⽆处不在，如果⼤家对⼆者还缺乏基本的了解，请尽快想办法补补课。对于刚刚⼊门的读者朋友来说，本⽂所介绍的要点将成为各位⽇后开发⼯作的重要基础。
1. XML基础知识
在我们开始讨论布局之前，先来梳理作为标记语⾔的XML的基础知识。如果⼤家对于XML已经很熟悉，可以直接跳过本节。XML是⼀种⽤于保存数据值的语⾔。XML⽂件在多个领域发挥作⽤。它们在某些项⽬中的功能与数据库⾮常相近，⽽且通常被作为⽹页的输出机制。如果⼤家之前曾经使⽤过HTML，应该会对XML的基本功能感到熟悉。
在XML中，数据值被保存在元素当中。单⼀元素通常包含⼀个开始标记与⼀个结束标记，如下所⽰：
1. <product>Onion</product>
如⼤家所见，开始标记与结束标记⼏乎完全⼀样，惟⼀的区别在于结束标记中多了⼀个“/”符号。在上⾯的例⼦中，数据值也就是元素内容，即⽂本字符串“Onion”。开始标记也可以容纳与数据项⽬相信的其它属性信息，如下所⽰：
1. <product type="vegetable">Onion</product>
每项属性都有⼀个名称与⼀个值，其中值就是引号内的部分。元素中还可以包含其它元素：
1. <section name="food"><font></font>
2. <product type="vegetable">Onion</product><font></font>
3. <product type="fruit">Banana</product><font></font>
4. </section><font></font>
在这种结构中，我们将section元素称为主元素、products元素则被称为⼦元素。两个⼦元素之间属于“兄弟关系”。在XML⽂档当中，必须存在⼀个root元素作为主元素，或者被称为“嵌套”。这就构成了⼀种tree结构，其中⼦元素作为⾃主元素延伸出去的分⽀。如果某个⼦元素之下还包含其它⼦元素，那么它本⾝同时也具有主元素属性。
⼤家还会遇到另⼀种⾃结束元素，其中开始与结束标记并⾮独⽴存在：
1. <order number="12345" customerID="a4d45s"/>
其中元素末尾的“/”符号代表结束。
我们在Android平台上所使⽤的全部资源⽂件都要⽤到XML标记，其中包括布局⽂件、可绘制元素、数据值以及Manifest。
2. Android布局
第⼀步
当⼤家在安装了ADT的Eclipse IDE当中使⽤XML时，输⼊过程中显⽰的相关背景提⽰能让编码过程变得更轻松⼀些。在编辑器中打开新应⽤中的主布局⽂件，确保XML编辑标签已经被选中，这样我们就能直接对代码进⾏编辑了。我们⾸先要处理的是⽤于主屏幕的布局⽅案，⽤户在启动应⽤之后最先看到的就是它。Eclipse会提供⼀套基础布局，供我们进⾏个性化修改：
1. <RelativeLayout xmlns:android="schemas.android/apk/res/andr
oid"<font></font>
2.    xmlns:tools="schemas.android/tools"<font></font>
3.    android:layout_width="match_parent"<font></font>
4.    android:layout_height="match_parent"<font></font>
5.    android:paddingBottom="@dimen/activity_vertical_margin"<font>
</font>
6.    android:paddingLeft="@dimen/activity_horizontal_margin"<font>
</font>
7.    android:paddingRight="@dimen/activity_horizontal_margin"<font>
</font>
8.    android:paddingTop="@dimen/activity_vertical_margin"<font></font>
9.    tools:context=".MainActivity" ><font></font>
10.    <TextView<font></font>
11.        android:layout_width="wrap_content"<font></font>
12.        android:layout_height="wrap_content"<font></font>
13.        android:text="@string/hello_world" /><font></font>
14. </RelativeLayout><font></font>
如⼤家所见，root元素是⼀项布局元素，在上⾯的⽰例中为RelativeLayout。Android当中还提供其它⼏种布局类型，我们可以将⼀种布局嵌套到另⼀种当中。这⾥的root布局元素拥有⼏项额外属性且与布局效果密切相关，例如宽度、⾼度以及边距等等。布局元素当中的TextView允许开发⼈员显⽰⼀条⽂本字符串。TextView是View的⼀种，View属于可见及交互性元素，⽤以构成我们的应⽤程序UI。因此，应⽤程序中的每套分屏⽅案都要选择⼀种View，并在其中包含⼀种或者多种布局机制。在Android系统中，这些布局被称为ViewGroup对象，每个ViewGroup内包含⼀套或者多套View。
第⼆步
为了专注于⼀套布局的基础创建⼯作，我们要把主布局⽂件中的现有内容全部删掉，这样才能从零开始
着⼿设计。正如我们之前所提到，⼤家可以利⽤Java代码创建⾃⼰的布局或者View，不过Android上的多种⼯具允许开发者利⽤XML设计⾃⼰的应⽤UI——这样各位就可以在创建元素的同时直接观察设计效果了。在某些实例中，⼤家可能见过单纯通过Java代码创建⼀些或者全部UI的做法，但现实情况下⼤部分创建⼯作还是要由XML完成的。这种做法还能保证应⽤程序逻辑与显⽰元素彼此独⽴。
1. <LinearLayout xmlns:android="schemas.android/apk/res/androi
d"<font></font>
2.    android:layout_width="fill_parent"<font></font>
3.    android:layout_height="fill_parent"<font></font>
4.    android:orientation="vertical" ><font></font>
5.    <!-- views go here --><font></font>
6. </LinearLayout><font></font>
LinearLayout会沿横向或者纵向显⽰我们打算使⽤的View。在以上⽰例中显⽰⽅向为垂直，因此每个Vie
w都会沿屏幕下⽅依次排列。如果采取横向布局，那么各个View将由左⾄右依次排列。如果使⽤“layout width”与“layout height”两种属性（在Android当中，它们往往被称为布局参数），那么布局会被拉伸⾄横向与纵向的最⼤长度。
在“layout height”声明⾏之后再添加⼀条新⾏，通过键⼊“android：”准备开始输⼊属性。当⼤家输⼊对应内容，Eclipse就会提供⼀套与该属性相关的列表。⼤家可以继续输⼊内容以缩⼩属性列表，也可以直接在列表中⽤⿏标进⾏点选。现在我们选择“android：gravity”属性。
键⼊“center_horizontal”作为gravity值，这样其中包含的元素就会以X轴为中⼼加以显⽰：
1. android:gravity="center_horizontal"
这种⽅式适⽤于布局中的⼀切元素。我们可以添加其它⼏种额外显⽰属性，例如填充、边距以及背景等。不过在今天的⽂章中，我们先从最简单的项⽬⼊⼿。
3. 添加View
第⼀步
正⾯我们开始向布局中添加View。所谓View，是指UI当中的可见元素。让我们⾸先添加⼀些⽂本内容和
⼀个按钮。进⼊LinearLayout元素（在开始忹结束标记之间），输⼊“<”之后Eclipse就会提⽰⼤家与属性相关的可⽤元素列表。
在列表中选择TextView。请注意，与⼤部分View⼀样，这是⼀种⾃结束元素。为TextView设置两种属性，分别为layout width与layout height（键⼊‘android：’并选择对应提⽰）：
1. <TextView<font></font>
2.    android:layout_width="wrap_content"<font></font>
view ui框架
3.    android:layout_height="wrap_content" /><font></font>
通过“wrap_content”，我们可以保证View的宽度⾜以容纳其显⽰内容——这就避免了像布局那样以填充⽅式显⽰元素。现在再为TextView添加另⼀项属性，这⼀次通过列举⽂本字符串实现显⽰功能：
1. android:text="Hello there"
在保存⽂件之后，⼤家会看到Eclipse显⽰出⼀条警告消息。如果将⿏标悬停在消息之上，编辑器的边框处将显⽰该⽂本——这部分内容也会同时显⽰在Problem视图当中。警告内容为“Hardcoded string……should use @string resource（硬编码字符串……应使⽤@string资源）。”系统推荐的做法是将每⼀个
⽂本字符串值保存为⼀项值资源，⽽不应将其直接包含在布局XML当中。尽管从起步阶段来看这样的处理⽅式既⿇烦⼜毫⽆意义，但⼀旦养成良好习惯、⼤家会在今后的⼯作中逐渐发现其在⼤型项⽬中的价值。通过Package Explorer
出“res/l”⽂件并打开，切换到“l”标签并对代码进⾏编辑。
可以看到，Eclipse已经添加了⼏条字符串。要另⾏添加，只需为其设定名称与值：
1. <string name="hello">Hello there</string>
这意味着如果⼤家需要在应⽤程序UI当中不⽌⼀次使⽤同⼀条字符串，⽽且稍后⼜需要对其进⾏修改，则只需在⼀处做出变更即可。保存字符串⽂件并切换到布局⽂件。将TextView的“text”属性引⽤到值⽂件的对应字符串中：
1. android:text="@string/hello"
我们通过在字符串名称前加上“@string”的⽅式告知Android⼯具需要在哪⾥寻字符串资源。这样⼀来，警告信息就不会再出现了。Eclipse通常会在我们编码的过程中发出这些提醒，从⽽通知我们当前存在的错误或者警⽰问题。⼤家可以选择遵循或者忽略警告信息的内容，但对于错误则必须加以调整，否则应⽤程序将⽆法正常⼯作。
第⼆步
在TextView之后添加⼀个Button：
1. <Button<font></font>
2.    android:layout_width="wrap_content"<font></font>
3.    android:layout_height="wrap_content"<font></font>
4.    android:text="@string/click" /><font></font>
在我们的⽰例中，Button使⽤的属性与TextView相同。不过在其它情况下，它可能会使⽤更多属性，⽽且⼀般来说不同视图需要配合不同属性。按钮上显⽰的是“text”属性值。将这条字符串同之前⼀样添加到我们的“res/l”⽂件当中：
1. <string name="click">Click Me!</string>
在接下来的教程中，我们将处理按钮的点击效果。切换到布局⽂件，查看编辑器右侧的Outline视图——它显⽰的是另⼀套指向⽂件元素的界⾯。双击列出的项⽬以跳转到对应代码位置。⼤家也可以展开或者折叠主元素。当布局变得更加复杂时，这种处理⽅式就变得⾮常实⽤。
提⽰：要整理Eclipse编辑中所打开的全部⽂件，我们只需按下“Ctrl+A”对其进⾏全选，然后按下“Ctrl+I”即可。
4. Graphical Layout
第⼀步
确保我们的布局⽂件已经正确保存，然后切换到Graphical Layout标签。
⼤家可以看到⾃⼰所设计的布局已经能够直接查看。界⾯左侧的Palette区域允许我们选择UI项⽬并将其拖动到布局当中。不过我们应该⾸先使⽤XML，直⾄对基本框架拥有初步概念。XML能帮助我们控制细节设计，所以即使在使⽤图形化⼯具的时候，我们也可能需要对XML 结果进⾏编辑。
在Graphical Layout视图上⽅是⼀套下拉清单，我们可以从中选择⽤于查看布局效果的设备类型，其中也提供切换显⽰⽅向及缩放效果的⼯具。⼤家需要在设计布局的过程中不断利⽤Graphical Layout对效果加以控制。另外，这⾥也提供其它⼀些值得尝试的布局元素与设置。
第⼆步
⼤家可能已经注意到，在这⼀次的布局设计当中可见元素的显⽰位置与屏幕上边缘靠得⽐较近。下⾯就来解决这个问题。切换到XML编辑标签并向LinearLayout当中添加边距属性：
1. android:layout_margin="10dp"
我们使⽤“dp”来设置像素的独⽴密度，这样设计就会让像素密度⾃动与⽤户设备相匹配。保存⽂件并切换到Graphical Layout以查看实际效果。
在我们进⾏布局设计时，Graphical Layout是⼀款⾮常实⽤的参考⼯具，但只能起到引导的效果。要了解我们的布局在应⽤程序运⾏时以怎样的⽅式显⽰、⼜能实现怎样的功能，⼤家需要将其载⼊虚拟或者物理设备进⾏实际难。我们会在后续⽂章中进⼀步讨论这个话题。
5. 选项
⼤家可以在应⽤程序屏幕中包含各类布局类型以及View，但其基本处理⽅式都是⼀致的。我们前⾯所使⽤的是LinearLayout，但还有其它多种⽅案可供选择，其中⽐较常见的有RelativeLayout、FrameLayout、AbsoluteLayout以及GridLayout。⼤家可以在LinearLayout Palette当中到这些类型，建议各位放松⼼态、在⾃⼰的View中任意选择并观察其显⽰效果。当添加来⾃Graphical Layout⼯具的元素时，请务必切换到XML以观察新元素的加⼊会产⽣什么样的标记代码。
Android平台针对多种常见需求提供View⽅案，例如单选按钮、复选框以及⽂本输⼊区等。这些⽅案能够⼤⼤节约我们需要⼿动执⾏的功能数量；但如果各位需要使⽤⾮⾃带UI元素，则需要创建⼀个⾃定义
View类。⼀般来说，最好是在没有其它选择时再这样处理，毕竟标准化UI元素在⽤户设备上的表现更为可靠，同时也能节约开发及测试的时间。
结论
在今天的教程中，我们讨论了Android平台上⽤户界⾯布局的基本设计流程，但并未做深层次挖掘。在本系列⽂章的下⼀部分，我们将尝试在应⽤程序添加⽤户交互元素、检测并响应按钮点击。接下来，我们将着眼于同Android开发关系最密切的Java相关概念，并进⼀步探讨应⽤程序开发过程中所涉及的要素及实践⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。