安卓开发--构建简单用户接口

安卓应用的图形用户接口，使用分层的view和ViewGroup对象构建。View对象通常是UI窗口小部件，如BUTTON,TEXT FIELD等

，ViewGroup对象是隐藏的View容器，它用来定义子View如何布局。就像方格或垂直的列表。

安卓提供①个XML文件，里面包含了View和ViewGroup的子类，你可以在文件里定义你的UI设计，如下图



在这节课中，我们将在XML文件中创建一个布局，包括一个文本和按钮，

接下来的课程，当按钮被按下，它将发送一个文本框给另外一个活动实体。

 

一 创建线性的布局

在res/layout/文件夹中打开activity_main.xml文件

注意，在ECLIPSE下，如下图，当你打开一个布局文件，你第一先看到的图形布局编辑器。这个编辑器使用WYSIWYG工具帮助你构建布局，

对于本节课，我们将直接使用XML文件编辑器直接操作XML文件，所以点击activity_main.xml的屏幕底下的标签，打开XML编辑器。

 

 


XML编辑器



当你创建这个工程的时候，你选择的BlankActivity模板，包括这个activity_main.xml文件，文件里涵括一个RelativeLayout根节点，

视图和一个TextView子视图

删除<TextView>元素和改变

<RelativeLayout>

元成

<LinearLayout>

.元素，然后增加

android:orientation

属性

并且设置为

"horizontal"。结果如下：

<?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">
</LinearLayout>

LinearLayout是一个ViewGroup，是ViewGroup的子类，它以平行或垂直布局子窗口，如上，指定

android:orientation="horizontal"属性，每个LinearLayout的子View按照XML文件设定的顺序出现在

屏幕上。 

另外两个LinearLayout的属性，android:layout_width和android:layout_height被所有的窗口需要，

他们指定窗口的大小。

因为LinearLayout 在布局中是根窗口，它将填充整个屏幕区域，程序通过设置宽和高为match_parent。这个值

指定这个窗口和它的父窗口相同的大小。

更多信息查看lAYOUT导向。

 

 二 增加一个TEXT FIELD

创建一个用户可编辑的TEXT FIELD，在<LinearLayout>节点里增加一个<EditText>元素。

像任何View对象，你必须定义一个包含XML属性指定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提供一个唯一的标号,你可以在你的APP里引用这个对象，例如

读或操作这个对象。当你从XML文件中提到任何资源对象，标记@是被需要的。他后面跟

一个资源类型id，一个斜线/，然后是资源名称eidt_message。

当你第一次定义一个资源ID时， 资源类型前面的+号是需要的。当编译APP时，SDK工具

使用这个ID名称在你的工程的gen/R.java文件中去创建一个资源ID。一旦资源ID通过这种

方式声明，其他引用这个ID不需要+号。

 

android:layout_width

和

android:layout_height

 ---用于指定宽和高的大小，

wrap_content值说明VIew的大小应该和。。。如果你用match_parent替换，EditText元素

 填充满屏，以为他和LinearLayout一样大。

android:hint

当text_field空时，定义一个默认的字符串显示。

 

三增加一个字符串资源

当你需要定义一个文字输入框在你的应用中，你需要总是指定一个字符串的资源。字符串资源允许你

管理所有UI TEXT。这样以更容易找到和更新文字。

默认情况下，安卓工程包含一个字符串资源文件，这个文件在res/values/strings.xml.

增加一个新的名字'edit_message'和设置值为“Enter a message”

同样在这个文件中增加“Send”字符串，这个是为按钮增加的，叫做“button_send”



strings.xml文件看起来像下面的内容

 

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">My</string>

    <string name="action_settings">Settings</string>

    <string name="hello_world">Hello world!</string>

    <string name="edit_message">Enter a message</string>

    <string name="button_send">Send</string>

</resources>

四 增加一个按钮

现在增加一个<Button>到视图，和<EditText>过程类似

<Button
android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_send"/>

 

<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>

 


 


 模拟器显示：



 五 调整INput BOX适合屏幕宽度

现在我们设计了一个拥有EditText和Button的窗口部件，这两个窗口大小仅仅是他们自己的大小，如上面图所示，

这个按钮可以很好的工作，但是对文本域不是很好，也就是对textFeild不是很好，用户可能输入的信息比较长，

所以我们最好让textFeild和屏幕保持一致，你可以使用LinearLayout的weith属性，使用android:layout_weiht属性指定。

weight值守一个数字，它指定每个视图应该消耗剩余的空间量，这工作有点像饮料配方中的成分量：2份伏特加，1份菲利口酒，

意思是2/3的伏特加酒。例如若你给一个窗口的weight是2，其他的窗口是1，这两个值加起来是3，那么第一个窗口将占用2/3的

空间，第二个占用剩下的空间，你若增加第三个窗口，给这个窗口的weight是1，那么第一个窗口占用2/4的空间，剩下的两个窗口

各占用1/4。

默认的weight是0，如果你指定的weight值大于0，并且只指定一个，那么那个窗口填充剩余的空间。

        android:layout_weight="1"

指定weight是为了改进显示效果，你应该修改width的值为0，设置width值为0，改进布局的性能，因为使用wrap_content，需要请求系统

的宽度。





下面修改和上面为修改weight的显示在模拟器上略显不同，貌似没有文档说明的相同，使用真实设备可以查看下。