原文地址:http://developer.android.com/training/basics/firstapp/building-ui.html
本节, 创建包含一个文本框和一个按钮的布局. 下一节,实现按钮点击后将文本框的内容传递到另一个Activity.
Android app 的UI采用 View
和 ViewGroup
对象形成的层次结构. View
对象通常是buttons 或text fields这样的控件。 ViewGroup
对象是布局容器, 如grid 或 vertical list.
Android 提供 XML 对应 View
和 ViewGroup
的词语。你可以使用XML定义一个层次结构的UI.
Layouts 是 ViewGroup
的子类。 本例中, 使用 LinearLayout
.
Alternative Layouts
可为不同的屏幕尺寸定义不同的布局,具体内容请查看 Supporting Different Devices.
创建线性布局
- 在 Android Studio, 从
res/layout
目录, 打开activity_my.xml
文件.activity_my.xml
文件当前包含一个RelativeLayout
根view 和一个TextView
子view. - 在 Preview 面板, 点击隐藏图标 关闭 Preview pane.
在 Android Studio, 当打开一个布局文件, 首先显示 Preview pane. 在此面板,使用 WYSIWYG 的设计模式. 本节, 直接使用 XML.
- 删除
<TextView>
元素. -
<RelativeLayout>
改为<LinearLayout>
. - 添加
android:orientation
属性,值设为"horizontal"
. - 移除
android:padding
属性和tools:context
属性.
<LinearLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > </LinearLayout>
LinearLayout
是一个 view group ( ViewGroup的子类
) 水平或垂直方式布局被其包含的子view, 方向由 android:orientation
属性指定. LinearLayout的子view按其在
XML文件中出现的顺序显示在屏幕上.
另两个属性, android:layout_width
和 android:layout_height
, 是所有view必须的,用来指定尺寸.
因为 LinearLayout
是此布局的根view, 因此将其宽度和高度设为 "match_parent"
用来充满整个屏幕。该值的意思是容器有多大,就显示多大.
更多信息请查看 Layout 指南.
添加文本框
和其他 View
对象一样, 必须指定 EditText
对象的一些XML格式的属性.
- 在
activity_my.xml
文件, 在<LinearLayout>
元素, 定义一个<EditText>
元素,其id
属性设为@+id/edit_message
. - 定义
layout_width
和layout_height
属性为wrap_content
. - 定义
hint
属性为一个字符串对象edit_message
.
<EditText>
e元素的定义如下:
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />
以下是在 <EditText>
中设置的属性:
-
唯一标识, 用来在代码中表示此元素.
(
@
) 表示引用 XML中定义的资源. 随后紧跟资源的类型 (本例中类型是id
), 一个斜线, 随后是资源名称(edit_message
).
(+
) 只在第一次定义资源的Id时使用.当编译app时, SDK tools 使用此 ID 在项目的gen/R.java
文件创建一个新的资源Id用来表示EditText
. -
"wrap_content"
表示大小随内容变化而不是固定大小. 如果使用"match_parent"
,EditText
将充满整个屏幕. -
文本框内容为空时显示的提示. 不是使用具体的字符串常量,而是通过
"@string/edit_message"
引用定义在另一个独立文件中的字符串资源.
android:id
android:layout_width
和
android:layout_height
android:hint
添加字符串资源
默认包含一个 res/values/strings.xml
. 添加一个名为 "edit_message"
的字符串,值为 "Enter a message."
- 在Android Studio, 从
res/values
目录, 打开strings.xml
. - 添加
"edit_message"
字符串,值为"Enter a message". - 添加
"button_send"
字符串,值为 "Send".. - 移除
"hello world"
字符串.
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>
这样的好处是可以在一个地方管理所有UI文本字符串,修改和更新会很方便。还为app的本地化提供便利.
使用字符串资源支持多国语言,请查看 Supporting Different Devices class.
添加按钮
- 在 Android Studio, 从
res/layout
目录,打开activity_my.xml
文件. - 在
<LinearLayout>
中, 定义一个<Button>
元素,紧随在<EditText>
元素之后. - 添加并设置属性之后,
<LinearLayout>
应是这样的:
<LinearLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText android:id="@+id/edit_message" android:layout_width="wrap_content" 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>
Note: button不需要 android:id
属性,因为不需要在代码中引用它.
现在两个元素的大小只有内容需要的那么大, as shown in figure 2.
这样设置宽度不太适合文本框,这里可以将文本框宽度设置为占据按钮之外的宽度,二者充满屏幕宽度. 在 LinearLayout
使用 android:layout_weight
属性可以实现.
weight值是一个数字,代表view可占据的空间, 和同级views空间相关. 例如一个view设为1,另一个设为2,则第一个占据1/3,而第二个占据2/3.
weight默认值是 0, 如果只有一个view指定了大于0的weight,则其占据剩余所有空间.
完整的 activity_my.xml
是这样的:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="/apk/res/android" xmlns:tools="/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>
运行app
运行app,查看效果。
next lesson 学习如何相应按钮事件,向另一个Activity发送信息等。