首页 > 代码库 > [Android5 系列—] 1. 构建一个简单的用户界面

[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 名字在gen\R.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"
    ... />

再执行看一下 ....




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