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

前言

安卓应用的用户界面是构建在View 和ViewGroup 这两个物件的层级之上的。 View 就是一般的UI组件。像button，输入框等。

viewGroup 是一些不可见的view的容器，用来定义子View 怎样布局。 相似在一个网格或是一个垂直列表。

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

定义一个线性布局

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

在创建project师包括的 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 名字在genR.java中创建一个新的资源ID/

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

  edit_message: 这个以下就会介绍怎样创建

android:layout_width 和 android:layout_height

"wrap_content"

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

android:hint

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

加入字符串资源

默认状况。 安卓project会导入字符串资源文件 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>

加入一个button

1. 打开 activity_my.xml

2. 在 <LinearLayout> 中，在<EditText> 后加入一个<Button> 元素

3. 设置button的宽度和高度的属性值为 "wrap_content"

4. 定义   android:text 用来定义button的显示。

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

再执行看一下 ....