首页 > 代码库 > [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
当 输入框为空时。 设置的默认显示字符串。
加入字符串资源
res/values/strings.xml
. "edit_message"
等<?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
android:text 用来定义button的显示。
<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 android:layout_weight="1" android:layout_width="0dp" ... />
[Android5 系列—] 1. 构建一个简单的用户界面