创建用户界面
本节课程中,你将创建一个XML布局文件,里面包含一个文本域和一个按钮.下一节课程中,当点击按钮发送文本域中的内容
给另一个活动页面时,你的程序将响应.
安卓应用的图形用户界面通过具有层级结构的View和ViewGroup对象创建.View对象长用于用户界面的局部部件,例如:
按钮,文本域.ViewGroup对象一个不可见的用于定义子视图布局的,例如:网格视图布局,垂直视图布局.
安卓提供了一个同View和ViewGroup对应的XML文件.因此,你可以使用用户界面元素的层级结构在
这个XML文件中定义你的用户界面.
布局对象是ViewGroup的子元素,在这个练习中,你将学习线性布局.
设置线性布局:
1.在Android Studio中,找到res/layout文件夹,打开activity_my.xml文件.
当你创建这个工程时,选择的BlankActivity模板对应的activity_my.xml文件中包含了一个相对布局
的根视图和一个文本视图的子视图.
2.在预览面板上,单击隐藏图标按钮关闭预览面板.
在Android Studio中,当你打开一个布局文件时,最先显示的就是预览面板.在面板中点击元素就会在
设计面板中打开WYSIWYG工具.在本节课程中,我们学习直接通过XML文件布局和添加内容.
3.删除"<TextView>"元素.
4.将"<RelativeLayout>"元素改成"<LinearLayout>"
5.添加"android:orientation"属性,并设置为"horizontal".
6.删除"android:padding"属性和"tools:context"属性.
最终结果如下:
res/layout/activity_my.xml
<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)是一个视图容器,用于设置子视图为垂直布局还是水平布局.例如"android:orientation"
如属性值所规定的那样.每一个线性布局对象的子元素都会根据XML文件中指定的顺序显示在屏幕上.
为了详细说明视图的大小,可以使用另外两个属性"android:layout_width"和"android:layout_height"定义.
因为LinearLayout是布局根视图,所以它应该覆盖整个屏幕区域以提供给程序使用.将宽度和高度设置为"match_parent",
这个值声明视图的将扩展自己的宽,高以适应父视图的宽和高.
添加一个文本域:
和定义每一个视图对象一样,你必须定义确切的XML属性来详细说明编辑框对象的属性.
1.在activity_my.xml文件的"<LinearLayout>"元素中,定义一个"<EditText>"元素
"id"属性设置为"@+id/edit_message".
2.将"layout_width"和"layout_height"属性的值设置为"wrap_content".
3.定义一个名为"edit_message"的字符串对象属性"hint".
"<EditText>元素最终如下:
res/layout/activity_my.xml
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
下面我们对在"<EditText>"元素中添加的属性做详细说明:
android:id
为视图指定一个唯一的标识符,你可以通过这个唯一的标识符从你的程序代码中引用这个对象,
例如:读取和操作这个对象(我们将在下节课程中讲述).
首先"@"符号是必须的,通过它你可以从XML中引用任何资源对象.接下来是资源类型(在这里是id),
然后是正斜线"/",最后是资源名称(edit_message).
位于资源类型前面的加号(+),只在你第一次定义资源ID时才需要添加.当编译程序时,SDK工具会
使用这个ID名创建一个新的资源ID,并添加到工程下gen/R.java文件中,指向"EditText"元素.
通过这种方式声明资源ID后,再引用这个ID时就不需要加号(+)了.只在定义新的资源ID时才
需要使用加号(+),定义或声明其他资源(例如:字符串,布局等)不需要使用加号(+).
资源对象:
一个资源对象是与一个应用程序资源(如:位图,布局文件,字符串)相关联的唯一整数名称.
每一个资源在工程路径下的gen/R.java文件中都有一个对应的资源对象.例如,当你需要
为"android:hint"属性定义一个字符串值时,你可以使用R类中的对象名称来引用资源.
你也可以通过使用"android:id"属性为相关视图创建任意资源ID,通过这个资源ID,你可以
其他代码中引用这个视图.
你每次编译程序,SDK都会重新构建R.java文件.因此请不要手动修改R.java文件.
android:layout_width和android:layout_height
不使用特定的值设置宽度和高度,而是使用"wrap_content",目的在于使用这个值会使
视图自适应内容的大小.如果是用"match_parent",则"EditText"元素将会充满屏幕,
因为它匹配的是父类"LinearLayout"的大小.
android:hint
当文本域为空是,默认显示这个属性的字符串.之所以使用"@string/edit_message"
指向独立文件中的字符串资源,而不使用硬编码字符串,是因为它指向的是一个具体的资源
(不仅仅是一个标识符),这里不需要使用加号(+).然而,由于目前你还没有定义字符串资源,
你将看到一个编译错误.在下一个节中定义字符串资源后将修复这个问题.
备注:这个字符串资源和元素ID拥有相同的名称"edit_message".然而,资源的引用总是被
资源类型域(如:id或string)却分开的,所以使用相同的名称并不会造成冲突.
添加字符串资源:
默认在工程路径/res/values/strings.xml下有一个字符串资源文件,在这里你可以添加一个名为
"edit_message"的字符串,设置值为"Enter a message.".
1.在Android Studio中打开res/values文件夹下的strings.xml文件.
2.添加一个名为"edit_message"值为"Enter a message"的字符串元素.
3.添加一个名为"button_send"值为"Send"的字符串元素.
在下一节中,你将会使用这个字符串创建一个按钮.
4.删除"hello world"行.
strings.xml文件最终如下:
res/values/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>
通常用户界面中的每一个文本都有一个对应的字符串资源.这样方便在同一个地方管理所有的用户
界面文本,这使得查找和更新文本信息变得非常容易.将字符串外部化,可以非常方便的定义不同的
替代字符串资源,使你的程序能够非常容易的以不同的语言本地化.
添加按钮:
1.打开res/layout文件夹中的activity_my.xml文件
2.在"<LinearLayout>"元素中定义一个"<Button>"元素,紧跟着"<EditText>"元素.
3.设置按钮的宽和高为"wrap_content",使按钮自适应文本内容的大小.
4.通过"android:text"属性定义按钮的内容,将按钮的内容设置为之前定义的"button_send"字符串资源.
最终"<LinearLayout>"元素如下:
res/layout/activity_my.xml
<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_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>
备注:这个按钮不需要定义"android:id"属性,因为在活动类的代码中没有引用这个按钮.
到这里,显示结果如下图.文本编辑框和按钮的大小自适应内容的大小.
这样做对按钮组件而言是不错的,但是对文本框来说就不太好了,因为用户可能在文本框中输入较长的内容.
使文本框填充满整个屏幕宽度是一个很好的选择.你可以通过在"LinearLayout"中定义"weight"属性
来实现.定义方式为"android:layout_weight".
"weight"的值是一个数字,相对于被兄弟视图消耗的空间来指定其余每个视图应该占有的空间.就像一种饮料
中的原料组合一样:其中苏打为2个单位,糖浆为1个单位,也就是说这种饮料的三分之二是苏打.例如,如果你定
义第一个视图的"weight"为2,另一个视图的"weight"为1,则第一个视图会占用总空间的2/3,剩余的空间被
另一个视图占用.如果你再添加第三个视图,"weight"为1,这时第一个视图占用的空间为1/2,另外两个视图各
占1/4.
默认所有视图的"weight"的值为0.如果你只设置了一个视图的"weight"值大于0,那么这个视图将填满其他视图剩余的所有空间.
使输入框占满屏幕宽度:
想要占满你的布局对象中"EditText"元素剩余的空间,如下:
1.在activity_my.xml文件中设置"<EditText>"元素的"layout_weight"属性值为1.
2.设置"<EditText>"元素的"layout_width"属性值为"0dp".如下:
res/layout/activity_my.xml
<EditText
android:layout_weight="1"
android:layout_width="0dp"
... />
为了提高布局效率,设置"weight"属性时应该把"EditText"的"width"属性值设置为0.因为"wrap_content"
值指定系统计算的宽度值在这里根本就没用."weight"值需要的宽度值是通过另外的计算机制计算的.
目前图形界面结果如下图:
activity_my.xml文件的整体内容如下:
res/layout/activity_my.xml
<?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>
运行你的应用:
布局是由创建工程时SDK生成的默认Activity类提供的.
运行程序查看结果:
* 单击Android Studio工具栏中的"Run"图标.
* 或者从命令行进入到工程跟路径下,执行命令:
ant debug adb install bin/MyFirstApp-debug.dpk