[Android5 系列—] 1. 构建一个简单的用户界面

前言

安卓应用的用户界面是构建在View 和ViewGroup 这两个物件的层级之上的。 View 就是一般的UI组件，像按钮，输入框等。 viewGroup 是一些不可见的view的容器，用来定义子View 如何布局， 类似在一个网格或是一个垂直列表。

安卓提供了一套XML的标签词汇用来定义UI的页面显示。

定义一个线性布局

1. 在 res/layout 目录下。打开 activity_my.xml (my 是您定义的activity 的名字)

在创建工程师包含的 BlankActivity 模板文件，包含一个 RelativeLayout 的根视图和一个  TextView 的子视图。

2. 删除  <TextView> 元素

3. 将 <RelativeLayout> 修改成 <LinearLayout>.

4. 添加 android:orientation  属性 ，并把值设置成  "horizontal".

5. 移除 android:padding 和 tools:context 的属性

修改后的文件类似：

<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的一个子类)，这个布局配合设置 android:orientation把子视图布置成水平或竖直方向。

android:layout_width 和 android:layout_height  这两个属性用来设置布局的大小。这个值设置成 "match_parent" 就会撑开他的长宽和父View 适应。

过多关于布局的内容，可以参考官方介绍：

http://developer.android.com/guide/topics/ui/declaring-layout.html

添加一个文本输入框

1. 在 activity_my.xml ，在<LinearLayout> 中，定义<EditText>元素，属性 “id”的值设置成 @+id/edit_message.

2. layout_width 和 layout_height的属性值设置成"wrap_content"

3. 定义 hint 的属性，值为 edit_message.

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

属性及属性值说明

android:id  -- 

@+id/edit_message

@ 的意思是： 但需要从XML 读取资源物件时

  +: 但首次定义一个资源ID时，需要加上 "+“号。 在编译APP的时候, SDK 工具会通过ID 名字在gen\R.java中创建一个新的资源ID/

  id: 是类型(处理id类型， 还有string 等类型)

  edit_message: 这个下面就会介绍如何创建

android:layout_width 和 android:layout_height

"wrap_content"

替代设置实际的宽度和高度， wrap_content 这个值可以让view 填充整个内容。

android:hint

当 输入框为空时， 设置的默认显示字符串。

添加字符串资源

默认状况， 安卓工程会导入字符串资源文件 res/values/strings.xml.  这里就添加以下上面用到的  "edit_message" 等 1.  打开 res/values/strings.xml 2.  添加一行 "edit_message"， 值设置成  "Enter a message". 3. 再添加一行， "button_send" 值设置成 "Send". 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. 打开 activity_my.xml2. 在 <LinearLayout> 中，在<EditText> 后添加一个<Button> 元素3. 设置按钮的宽度和高度的属性值为 "wrap_content"4. 定义   android:text 用来定义按钮的显示。
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>

使输入框填充整个屏幕

以上的部分， 运行后效果如下：


可以看到， 输入框并没有占满这个屏幕。 设置 <EditText> 的属性  layout_weight  和  layout_width

<EditText    android:layout_weight="1"    android:layout_width="0dp"    ... />

再运行看一下 ....