本系列持续更新中。转载请注明来源。
前言：最近打算系统学习一下Android开发，发现Android官网上的developer training也是个很好的学习资料，于是想到一边学习一边写一个中文版出来，方便大家学习沟通交流，不足之处请大家指出。
教程官方链接：http://developer.android.com/training
本节链接：http://developer.android.com/training/basics/firstapp/building-ui.html
===============================================================
1 入门
1.1 建立你的第一个项目
1.1.3 建立一个简单的用户界面
本节要点
1． 创建一个LinearLayout（线性布局）
2． 添加Text Field（文本输入框）
3． 添加字符串资源
4． 添加Button（按钮）
5． 使文本输入框占满屏幕宽度
其他需要了解的：
1. Layouts
Android应用程序的图形用户界面是一个基于View与ViewGroup对象的层级结构。View对象通常是一些UI widgets（UI控件），如button或者text field等。ViewGroup对象是不可见的View容器，它定义了其中包含的view的布局，如网格布局或者垂直列表布局等。
Android提供了一种对应于View以及ViewGroup子类的XML格式的描述，你可以在XML文件中使用层次化的UI元素描述来定义你的UI。
图1. 展示了layout分支中的ViewGroup对象以及如何包含其他View对象
在本节课中，你将会在XML文件中创建一个layout，其中包含一个text field和一个button. 在接下来的课程中，你需要做到当button被按下时，将text field中的内容发送到另一个activity.
* 可选布局
虽然在XML中定义UI比起在代码中定义UI更加有用，但是非常重要的一点是你可以为不同的屏幕尺寸创建不同的布局。例如，你可以创建两个不同版本的布局，并告诉系统在小屏幕上使用第一种布局，在大屏幕上使用第二种布局。欲知更多信息，可以参考Supporting Different Devices.
创建一个Linear Layout
从 res/layout/ 目录中打开fragment_main.xml文件。
注：在Eclipse中，当你打开一个layout文件时，你首先看到的是图形界面的layout编辑器。这是一个通过WYSIWYG（所见即所得）工具来帮助你建立你的layout的编辑器。在这节课中，你将要直接编写XML文件，因此你需要点击gragment_main.xml文件中的底部选项卡，切换到XML编辑器。
当你创建这个项目时你选择的Blank Activity模板包括了fragment_main.xml文件，其中包含了一个RelativeLayout根视图（root view）和一个TextView子视图（child view）。
首先，你需要删掉<TextView>元素并且将<RelativeLayout>修改为<LinearLayout>. 然后添加android:orientation属性并将其值设置为”horizontal”. 结果应该如下所示：
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > </LinearLayout> |
LinearLayout是一种将包含其中的view按照垂直或水平方式排列的一种布局，它通过android:orientation属性来指定排列方式。在LinearLayout中的各个子元素的排列顺序与它们在XML文件中的顺序一致。
LinearLayout中的另外两个属性android:layout_width和android:layout_height指定了LinearLayout的宽度和高度，这两个属性对于所有view都是必须指定的。
由于LinearLayout在这个布局中是根布局，通过将宽度和高度的属性值设置为”match_parent”，可以使得LinearLayout占满整个屏幕区域。将宽度或高度的属性值设置为”match_parent”意味着这个view会尽量扩展它自己的宽度或者高度来填满它上一级view的宽度或者高度。
想要了解更多关于layout的属性，请参考Layout指南。
添加Text Field
想要创建一个用户可编辑的文本输入区域，你需要在<LinearLayout>中添加一个<EditText>元素。
和其他view对象一样，你需要通过XML属性的方式为EditText对象定义其特征。你应该按照如下方式在<LinearLayout>中定义你的<EditText>对象：
| <EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" /> |
下面是有关各属性的详细介绍：
android:id:
该属性是view具有的一个唯一的标识，可以通过这个标识在代码中引用这个view，比如获取view的信息或者修改view的信息等（将在下节课中用到）。
当你从XML中引用resource（资源）对象时，都必须添加@符号。在@符号后面依次是resource类型（在本例子中resource类型是id）、斜线和resource名字（本例中是 edit_message）。
当你第一次定义某个resource ID的时候必须在resource类型前面添加一个加号（+）。这样，当你编译你的应用程序的时候，SDK工具会在gen/R.java文件红添加一个新的resource 对象来指向你新建的元素。一旦resource ID已经生成后，其他对于这个ID的引用就不再需要添加加号了。只有当你新建一个resource ID的时候需要添加加号，当引用的是一个字符串或者layout的时候不需要添加加号。请在下面*段落中了解更多关于resource对象的信息。
* 关于resource对象
一个resource对象就是一个简单的唯一的整数名称，每一个名称关联着一个应用程序的resource，如位图、layout文件或者字符串等。
每个resource都有一个在gen/R.java文件中对应的resource对象。你可以使用对象名称在R类中引用到你的resource，比如当你需要引用一个特定的字符串来复制给android:hint属性时。你也可以通过设置android:id属性来给一个view创建一个resource ID，这样你就可以再其他代码中通过这个ID来引用这个view了。
SDK工具会在每一次编译代码的时候自动生成R.java文件。请记住不要手动修改这个文件。
想要了解更多，请阅读Providing Resources指南。
android:layout_width 和android:layout_height:
你可以选择为这两个属性指定具体的数值，或者你也可以将其设置为”wrap_content”，这表示当前view的宽度或者高度会取可以显示其内容的最小值。如果你将其值设置为”match_parent”，那么在LinearLayout中，当前view会在宽度或者高度上尽可能的占满其上一级的view. 想要了解更多信息，请参考Layouts指南。
android:hint:
这个属性的值表示的是当text field中没有任何输入时显示的默认字符串。在这里，我们没有直接给出一个字符串作为属性的值，取而代之的是，我们使用”@string/edit_message”来引用了在另外一个文件中定义的字符串。因为这个引用是一个具体的资源（不是一个ID），因此不需要使用加号。然而，由于你现在并没有定义这个字符串，因此你现在会看到一个编译错误。你会在下一段中学习并定义这个字符串。
注：这个字符串资源的名字edit_message与EditText元素的id名字一样，但是由于引用的时候都会首先在特定范围内匹配（如id范围内或者string范围内），因此这样的不同类型的相同名字并不会带来冲突。
添加字符串资源
当你需要在用户界面中添加文字时，你应该总是制定一个字符串作为resource. 字符串resource允许你在同一个文件中管理所有的用户界面文字，因此你可以更容易的找到并修改你要处理的字符串。这样做的另外一个好处就是，你可以通过外部文件来为你的应用程序定义不同语言版本的用户界面文字。
默认情况下，你的Android项目包含了一个字符串资源文件，其路径为res/values/strings.xml. 在其中添加一个新的名为”edit_message”的字符串，并将其值设置为”Entera message.”（你可以删除掉”hello_world”字符串）。
你还需要添加一个”button_send”字符串，并将其值设置为”Send”，这个字符串将作为button的文字。
此时的strings.xml文件如下所示：
| <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">My First App</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string> <string name="action_settings">Settings</string> <string name="title_activity_main">MainActivity</string> </resources> |
想要了解更多关于字符串资源以及如何给你的应用程序制定不同的语言版本的字符串文件的信息，请参考Supporting Different Devices类。
添加Button（按钮）
现在你需要在布局文件中添加一个<Button>元素，并将其置于<EditText>元素之后。
| <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" /> |
将button的宽度和高度的属性值均设为”wrap_content”，这样button的大小就为可以包含其显示文字的最小的大小。这个button并没有android:id属性，因为它并没有在activity的代码中被引用。
使文本输入框占满屏幕宽度
当前的layout的设计是使EditText和Button这两个控件都选择可以包含他们内容的最小的大小，如图2所示。
图2. 当EditText和Button控件的宽度都设置为”wrap_content”的情况
这样的设置对于Button并没有问题，但是对于EditText来说有可能存在问题，因为用户有可能会需要输入更多的文字内容。因此，更好的选择就是将EditText设置为填满可用的屏幕宽度。在LinearLayout中，可以通过给不同控件设置权重的方法来达到这个目的，具体来说，你可以通过修改android:layout_weight属性来实现。
Weight（(权重值）是一个指定了view在与其同级的view中占据的剩余空间的比例的一个值。这个工作原理就好像一个鸡尾酒配方，“2分伏特加，一份咖啡力娇酒”代表了在这个鸡尾酒中有2/3是伏特加，余下的是咖啡力娇酒。举例来说，如果你有两个同级的view，将第一个view的weight设置为2，将第二个view的weight设置为1，总和为3，那么第一个view会占据剩余空间的2/3，第二个view会填满余下的空间。如果你加入了第三个同级的view并将它的weight设置为1，那么第一个view将会占据总的剩余空间的1/2，另外两个view各占据总剩余空间的1/4。
对于所有view，默认的weight值为0，因此如果你只要给某一个view的weight设置一个大于0的值，那么该view将会占据所有的剩余空间（在所有view都占据他们至少要占据的空间之后）。因此，你只需要将你的EditText元素的weight属性值设置为1即可（不需要设置button的weight属性值）。
| <EditText android:layout_weight="1" ... /> |
为了提高布局的效率，当你为一个view指定了weight值之后，你应该将它的width值设置为0（0dp）。因为如果将width的值设置为”wrap_content”会使得系统去计算一个无关紧要的值，但是实际上EditText的width仅仅依赖于另外一个view（button）的width，因此将EditText的width设置为0dp会提高计算效率。
| <EditText android:layout_weight="1" android:layout_width="0dp" ... /> |
图3展示了当你为EditText添加了weight值之后的效果。
图3. 当给EditText添加了weight属性值之后它占据了LinearLayout中剩余的全部空间
接下来是完整的layout文件：
| <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <EditText android:id="@+id/edit_message" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:hint="@string/edit_message" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" /> </LinearLayout> |
当你创建这个项目时，这个layout被应用到了默认的自动生成的Activity类中，因此你可以运行你的应用程序来查看布局的效果。
1. 在Eclipse中，点击工具栏中的Run.
2. 或者在命令行工具中，改变当前路径到你的Android项目的根目录下并执行：
| ant debug adb install bin/MyFirstApp-debug.apk |
继续学习下一课来学习如何对按钮的点击做出回应，读取文本输入框的输入内容并将其发送给另外一个activity等等。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
