搭建一个简单的用户交互界面
Android应用程序的图形用户界面,是使用视图和ViewGroup对象的构建的层次结构。视图对象通常是UI小部件,如按钮或文本字段,ViewGroup对象是不可见的视图容器,定义子视图的布局,如在网格或垂直列表。
Android提供一种XML语法对应于View和ViewGroup子类,这样你就可以在XML的层次结构视图元素定义的UI。
图1.ViewGroup的对象如何形成插图分支布局中包含视图对象。
在本课中,您将创建一个XML布局,包括一个文本输入框和一个按钮。在下面的课,你会回应,当按钮被按下文本字段中的内容发送到另一个活动。
Use a Linear Layout
使用线性布局
打开main.xml文件的res/布局/目录(每一个新的Android项目包括这个文件默认情况下)。
注:在Eclipse中,当你打开一个布局文件,你第一次显示ADT布局编辑器。这是一个编辑器,帮助您构建布局使用所见即所得的工具。这一课,你要直接使用XML,所以点击“main.xml文件”选项卡,在屏幕底部打开XML编辑器。
默认情况下,main.xml文件包含一个LinearLayout的根视图组和TextView的子视图的布局。你会重新使用的LinearLayout在这一课,但改变它的内容和布局方向。
首先删除的TextView的元素的值更改安卓方向为“横向”。结果看起来像这样:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
</LinearLayout>
LinearLayout视图组(ViewGroup的一个子类),规定了成员的方向,无论是垂直或水平方向,指定的android:方向属性。一个LinearLayout中的每个成员出现在屏幕上按XML中规定的顺序。
其它两个属性,android:layout_width 和 android:layout_height ,都限定了其他视图的尺寸。
因为LinearLayout是在布局中的根视图,它应该充满了整个屏幕区域的应用程序,可通过设置“fill_parent"”的宽度和高度。
Add a Text Field
To create a user-editable text field, add an <EditText>
element inside the <LinearLayout>
. The EditText
class is a subclass of View
that displays an editabletext field.
Like every View
object, you must define certain XML attributes to specifythe EditText
object's properties. Here’s how you should declare itinside the <LinearLayout>
element:
每个View对象一样,你必须定义某些XML属性来指定的EditText的对象的性质。这里是你应该如何声明它的<LinearLayout>元素:
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
关于这些属性:
这提供了一个独特的标识符的观点,你可以用它来引用该对象,从您的应用程序代码,如阅读和操纵的对象(你会看到在下一课) 。
需要在符号(@)当你想指资源对象,其次是资源类型(在这种情况下, ID )从XML ,那么的资源名称( edit_message ) 。 (其他的资源可以使用相同的名称,只要它们是不相同的资源类型,例如,字符串资源使用相同的名称。 )
加号(+)是必要的,只有当你第一次定义的资源ID 。它讲述了SDK工具,需要创建的资源ID 。因此,当应用程序被编译, SDK工具使用的ID值, edit_message ,在项目的根/ R.java文件中创建一个新的标识,现在与的EDITTEXT元素的。一旦创建的资源ID ,以及其他的ID不需要的加号。这是唯一的属性,可能需要加符号。参见更多信息资源对象的边框文件。
这是一个默认的字符串时要显示的文本字段为空。而不是使用一个硬编码的字符串值,“@string/ edit_message的”价值是指在一个单独的文件中定义一个字符串资源。因为这个值是指将现有的资源,它并不需要的加符号。然而,因为你还没有定义字符串资源,你会看到一个编译错误,当您添加“@string/ edit_message的”值。你会解决这个问题在下一节中定义的字符串资源。
Add String Resources
当你需要在用户界面中添加文本时,你应该总是在资源文件中指定文本每串。字符串资源,可以让你保持一个单一位置的所有字符串值,这使得它更容易找到并更新文本。外部字符串还允许您以您的应用程序本地化为不同语言提供替代定义每个字符串。
默认情况下,你的Android项目包括res/values/strings.xml字符串资源文件。打开此文件,删除现有的“hello”字符串,添加一个“edit_message”字符串使用<EditText>元素。
当你在这个文件中,还添加按钮,你很快就会添加一个字符串,称为“button_send”。
的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>
</resources>
如需使用几种语言,您的应用程序本地化的字符串资源的更多信息,请参阅支持各种设备类。
Add a Button
在增加一个按键在layout中,紧跟元素<EditText>:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
高度和宽度都设置为“wrap_content”,所以按钮是一样大的需要,以适应按钮的文本。此按钮并不需要在android:id属性,因为它不会从活动代码中被引用。
Make the Input Box Fill in the Screen Width
目前设计的布局的EditText和按钮部件只需要以适合其内容一样大的,如在图2中示出。
图2。的EditText和按钮部件的宽度设置为“wrap_content”。
该按钮也能正常工作,但没有得到很好的文本字段,因为用户可能会键入较长的东西,并且有额外的空间留在屏幕上。因此,它会是不错的填充,使用文本字段的宽度。 LinearLayout中这样的设计使重量属性,您可以指定使用的android:layout_weight属性。
权重值允许你指定每个视图应该消耗剩余的空间量,相对量所消耗的兄弟的意见,就像在饮料配方的成分:“2份伏特加,1份咖啡利口酒”意味着三分之二喝的是伏特加酒。例如,如果你给一个视图的权值为2和另外一个权重为1的总和是3,所以第一种观点得到的剩余空间2/3,得到的其余部分的第二视图。如果你给第三种观点权重为1,那么现在第一种观点得到1/2的剩余空间,而剩下的两个各拿1/4。
所有意见的预设权重为0,所以如果你指定任何重量值大于0,只有一个视图,然后填充每个视图后给予足够的空间它要求任何剩余空间。因此,为了填补剩余的空间与EDITTEXT元素,给它权重为1,体重没有离开按钮。
<EditText
android:layout_weight="1"
... />
图3显示了结果当你将所有权重的EditText元素。
图3。的EditText小重的所有布局,所以填充的LinearLayout中的剩余空间。
完整的布局文件现在看起来应该是下面这样:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_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工具创建项目时产生,所以你现在可以运行应用看到的结果