Android 第三课 构建简单的用户界面
Android的图形用户界面通过 View
和 ViewGroup
的层叠来构建。 View
对象是普通的
UI 小部件,例如按钮和文本框;ViewGroup
对象是不可见的视图容器,定义如何布局其子视图,例如网格和纵向列表。
Android 提供了对应于 View
和 ViewGroup
子类的
XMl 标签,你可以在 XML 通过 UI 元素的层叠来创建你的 UI。
可选布局
使用 XML 定义 UI 布局而不是在运行时通过代码创建布局,有时候是有好处的; 但对于为不同屏幕大小创建不同布局来说,他是特别重要的。例如,你可以创建两个版本的布局, 并告诉系统一个用于“小”屏幕,另一个用于“大”屏幕。更多信息参见教程支持不同设备。
图1 - 在布局中,ViewGroup
对象是如何形成分支并包含其它 View
对象的插图。
在这一次教程里,你将学到怎样用XML创建一个带有文本输入框和按钮的界面。 在接下来的课里, 你将学会对按钮做出响应,当按钮被按下的时候文本框里的内容被发送到另外一个Activity。
创建线性布局
从目录 res/layout/
里打开 activity_main.xml
文件。
注意:在 Eclipse 中,当你打开布局文件的时候,首先看到的是 ADT 布局编辑,这个编辑页是使用所见即所得的工具帮助你创建布局。 对于本课来说,你是直接在 XML 里进行操作,因此点击屏幕下方的 activity_main.xml标签进入 XML 编辑状态。
创建该项目时你选择的 BlankActivity 模版提供了以 RelativeLayout
为根视图,
并包含 TextView
子视图的activity_main.xml
文件。
首先,需要删除 <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
的子类),
用于水平放置或者垂直放置子视图的部件,由属性android:orientation
来设定方向。LinearLayout
布局里的子元素按照
XML 里设定的顺序显示在屏幕上。
另外的两个属性android:layout_width
和 android:layout_height
用来指定视图的大小,对所有视图来说都是必须的。
因为布局中 LinearLayout
是跟视图,他应该充满整个屏幕区域,
这是通过设置他的高度和宽度为“match_parent
”来实现的。 该值表明, 视图应该扩展其高度和宽度以匹配其父视图的高度和宽度。
关于布局属性的更多信息,参见布局 向导。
添加文本框
在 <LinearLayout>
布局中,添加一个 <EditText>
元素就可以创建一个用户可编辑的文本框。
EditText类属于View的一个用于展示可编辑的文本的子类。 和View的别的类一样,你需要设置XML里的某些属性来指定EditText的具体功能,下边是你应该在线性布局里指定的一些属性元素:
与其他视图
对象一样,你需要设置
XML 里的某些属性来指定 EditText
的具体功能,下边是你应该<LinearLayout>
布局里指定的一些属性元素:
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
关于资源对象
资源对象是简单的可以唯一识别命名整数,他与应用程序资源关联,比如位图、布局文件和字符串。
每个资源在项目的 gen/R.java
文件中都定义了一个对应资源对象。 你可以通过使用 R
类中的对象名来参照你的资源,比如当你需要为 android:hint
属性指定一个字符串值的时候。你也可以创建任意的资源
ID,通过android:id
属性关联到视图,它允许你从其它代码中参照这个视图。
SDK 工具在每次你编译应用时生成R.java
。 你不能手动更改该文件。
更多内容请阅读开发向导提供资源。
关于这些属性:
android:id
- 他为视图提供唯一标识,你可以在程序的代码里进行引用,你可以对这个类进行读和修改的操作 (在下一课里会用到)。
当你想从 XML 里使用资源类的时候必须使用“
@
”符号。 其后是资源类型(这里是id
)、斜线、和资源名称
(edit_message
)。资源类型前的加号 (
+
) 在你首次定义资源 ID 时使用。在你编译应用时,SDK 工具使用该 ID 名称在项目的gen/R.java
文件中创建新的资源
ID,使它参照到EditText
元素。
资源 ID 以这种方式生成一次,其它对该 ID 的参照就不需要加号了。 加号只用于指定新的资源 ID 时,对于类似 字符串、布局这样的实际资源不需要他。 关于资源对象的更多信息参见侧边栏。 android:layout_width
和android:layout_height
- 对于宽和高不建议指定具体的大小,使用“
wrap_content
”指定之后, 这个视图只是占据内容大小的空间。如果你使用了“match_parent
”,这时EditText
将会布满整个屏幕,因为它将适应父布局LinearLayout
的大小。更多信息,参见布局向导。 android:hint
- 这是文本框为空时默认显示的字符串。 参照另外文件中定义的字符串资源的“
"@string/edit_message"
”值用于代替使用硬编码的字符串值。 它指向具体的资源(不是单纯的标识符), 因此不需要加号。 然而,因为你还没有定义该字符串资源,首先你会看到一个编译错误。
在下一小节中通过定义该字符串会解决这个问题。注意: 有与此字符串资源同名的元素 ID:
edit_message
。 不过,对资源的参照根据资源的类型限定了范围(比如id
或string
),
因此使用相同的名称也不会引起冲突。
添加字符串资源
当你需要在用户界面中添加文本时,你应该总是使用资源来指定每个字符串。 字符串资源允许你在一个位置管理所有的 UI 文本,这使寻找个更新文本更容易。 外部的字符串, 也可以让您根据不同的语言,为每个字符串资源提供可供选择的定义来本地化你的应用程序。
默认情况下,你的 Android 项目包括一个字符串资源文件,它在“res/values/strings.xml
”。 添加一个名为“edit_message
”的新字符串,将其值设置为“Enter
a message”。 (你可以删除名为“hello_world”字符串)。
既然你在编辑该文件,顺便为即将添加的按钮“button_send
”添加一个值为“Send”的字符串。
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="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
关于使用字符串资源为其它语言本地化你的应用的更多信息,参见教程“支持不同设备”。
添加按钮
现在,紧接着 <EditText>
元素添加一个 <Button>
到布局中:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
高度和宽度都设置为“wrap_content
”,所以按钮会大到足以显示其文本内容。 此按钮并不需要的android:id
属性,因为活动的代码中不会用到它。
使输入框宽度充满整个屏幕
如图2所示,目前布局设计成使 EditText
和 Button
两个小部件的大小适合其内容。
图2. EditText
和 Button
小部件宽度设置为“wrap_content
”。
该设置对按钮来说,工作得很好,但并不适用于文本字段,因为用户可能输入更长的文字。 因此, 使文本字段充满屏幕宽度的未使用区域会比较好。 在 LinearLayout
布局中,
你可以通过指定 android:layout_weight
属性设置权重来实现。
权重值是一个数字,指定每个视图所要占用的剩余空间量,对于兄弟视图的相对占用量。这有点像调酒配方: “两份伏特加酒,一份咖啡利口酒”,即三分之二的饮料是伏特加酒。例如,如果你设置一个视图的权重是 2、 另一个权重为1,总和是3。所以第一个视图填充剩余的空间的三分之二,第二个视图填充其余空间。 如果添加了第三个视图,并设它的权重为1,那么现在第一个视图(权重2)得到1/2的剩余空间, 剩下的两个各获得1/4。
所有视图的默认权重为 0,因此,如果只有一个视图的权重大于 0, 则该视图填充为各视图分配必要空间后剩余的所有空间。因此,要使 EditText
元素填充布局的剩余空间,设它的权重为1,保持按钮没有权重。
<EditText
android:layout_weight="1"
... />
为了提高布局效率,指定了权重时,你应该将 EditText
的宽度设为零(0dp)。
设置宽度为零会提高布局性能,是因为使用“wrap_content
”作为宽度时, 需要系统进行无意义的计算,因为权重值需要另外的宽度计算,来填充剩余空间。
<EditText
android:layout_weight="1"
android:layout_width="0dp"
... />
图3显示了将所有权重分配给 EditText
元素的结果。
图 3. 给予 EditText
小部件所有权重,
填充了 LinearLayout
布局的所有剩余空间。
现在,完整的布局文件应该如下:
<?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">
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
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>
此布局由创建项目时通过 SDK 工具生成的默认 Activity
类加载,
所以你现在可以运行应用来查看结果:
- 在Eclipse中,从工具栏中单击“Run”。
- 或者从命令行,将目录切换到你的 Android 项目的根目录下,然后执行:
ant debug
adb install bin/MyFirstApp-debug.apk
继续下一课,你可以学习如何响应按钮按下,读取文本字段的内容,启动另一个活动,等等。
Android 第三课 构建简单的用户界面的更多相关文章
- Nodejs课堂笔记-第三课 构建一个nodejs的Docker镜像
本文由Vikings(http://www.cnblogs.com/vikings-blog/) 原创,转载请标明.谢谢! 因为一直做Linux有关的开发工作,所以不习惯在Windows平台编译和测试 ...
- Android 入门第一课 一个简单的提示框
1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...
- mono for android 第三课--页面布局(转)
对于C#程序员来说布局不是什么难事,可是对于我这个新手在mono for android 中布局还是有点小纠结的,不会没关系.慢慢学习.好吧我们开始简单的布局.在之前我们拖拽的控件都是自动的去布局,也 ...
- 《CoffeeScript应用开发》学习:第三章-构建简单的应用程序
字符串插值 CoffeeScript提供了一种更好的构建字符串的解决方案.在双引号字符串(单引号无效)中使用#{}包含一个动态的值. str = 'Hello, CoffeeScript.' cons ...
- Android官方教程翻译(3)——创建一个简单的用户界面
转载请注明出处:http://blog.csdn.net/dawanganban/article/details/9839523 Building a Simple User Interface 创建 ...
- 第三周——构建一个简单的Linux系统MenuOS
[洪韶武 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ] 第三周 构建一个 ...
- 三、使用Maven构建简单的java项目
前边,我刚搭建了Maven环境,还有给大家推荐了学习资源,这个小节,我们来就来,,简单的玩玩maven. 1.所需工具: 1.Eclipse 2.apache-maven-3.3.9 3. ...
- Android OpenGL教程-第三课【转】
第三课 给多边形上色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 这次增加的代码不算多. 增加一个color的buffer ...
- Ant—使用Ant构建简单Java项目(三)
博客<Ant-使用Ant构建简单Java项目(二)>我们简化了运行Test类中main方法须要运行的命令,本博客来介绍一下如何使build.xml文件和当中使用property标签定义的属 ...
随机推荐
- Redis命令总结 (转)
Redis命令总结 连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsa ...
- Python 学习 第七篇:函数1(定义、调用和变量的作用域)
函数是把一些语句集合在一起的程序结构,用于把复杂的流程细分成不同的组件,能够减少代码的冗余.代码的复用和修改代码的代价. 函数可以0个.1个或多个参数,向函数传递参数,可以控制函数的流程.函数还可以返 ...
- C#_面试
class Program { static void Main(string[] args) { , , , , }; var arry = ConvertSum(arr); , , , , , } ...
- 分布式监控系统Zabbix-添加windows监控主机
大多数情况下,线上服务器都是linux系统,但是偶尔也会有些windows机器.下面简单介绍下zabbix添加windows监控机的操作:1)下载windows的zabbix_agent下载地址:ht ...
- apacheTomcat
Window+R ------>cmd || Window PowerShell apacheTomcat\bin> ./startup.sh
- 对PS的评价
Photoshop(简称:PS)是电脑上的图像处理软件:对于广大Photoshop爱好者而言,PS亦用来形容通过该类图形处理软件处理过的图片,即非原始.非未处理的图片:多数人对于这软件的了解仅限于“一 ...
- 《Linux内核分析》实践2
<Linux及安全>实践2 一.Linux基本内核模块 1.1什么是内核模块 linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一 ...
- github使用心得和链接
在本次使用github过程中,刚打开github主界面的时候,吓了一跳,满眼的英文加上各种没用过的命令,真是一个头两个大,废话不多说,下面我就说一下我在使用github过程中遇到的两个问题.: 问题一 ...
- jisuanqi
1.jisuanqi 2.https://github.com/12wangmin/text/tree/master 3.计算截图 7+8 清除 4.总结 通过课程设计,主要要达到两个目的,一是检验和 ...
- vue element-ui upload 实现带token上传
<el-upload class="upload-demo" :data ="uploadData" :headers = "headers&q ...