• 欢迎访问Eblogs,最热门语言开发,最热门数码资讯,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入Eblogs
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏Eblogs吧
  • 欢迎大家多多留言交流哦~

构建一个简单的用户界面

AndroidDeveloperTraining 曹传欢 876次浏览 4个评论

在这节课中,你将会创建一个带有文本域和按钮的XML布局。在下节课中,你的应用将可以响应处理按下按钮时将文本域的内容发送到另外一个界面activity中。

一个应用的图形用户界面是用 View 和 ViewGroup 层级的对象来构成的。 View 是日常比较常用的UI(User Interface后面简称UI)组件比如 buttons 和 text fields。 ViewGroup对象是一个看不见的用来定义子View摆放位置的容器,比如在一个网格(GridView)或者一个竖形的列表中(ListView)中。

Android 提供了一个对应 View 和 ViewGroup 子类的XML词汇,所以你可以在XML中使用UI元素的层次结构来定义你的UI。

布局都是 ViewGroup的子类。 在这个练习中,你将会使用 LinearLayout元素来完成作业。

图形1. 插图是 ViewGroup 对象在布局中如何形成分支同时包含其他 View 对象的。

创建一个线性布局


  1. 在Android Studio中, 在res/layout 目录下, 打开 content_my.xml 文件。你创建这个项目的时候选择的这个空白的Activity模型包含了使用 RelativeLayout 根视图 TextView 子视图的 content_my.xml 布局文件。
  2. 在 Preview 窗格中, 点击隐藏图标  来关闭预览窗格。在 Android Studio中, 当你打开一个布局文件时,你将首先看到一个预览界面。点击这个窗格上的元素打开设计窗格上的 WYSIWYG 工具。在这节课中,你将直接使用XML来工作。
  3. 删除 <TextView> 元素。
  4. 改变 <RelativeLayout> 元素标签为 <LinearLayout>
  5. 添加 android:orientation 属性然后设置成为 "horizontal"
  6. 删除 android:padding 属性和 tools:context 属性。

结果大概像是这样:

LinearLayout 是一个可以放置横向或者纵向子视图的视图组 ( ViewGroup的子类),正如指定 android:orientation 属性那样。每个 LinearLayout的子View出现的顺序是按照在XML中定义的顺序(比如android:orientation 定义的是横向,然后按照XML中的顺序横向排列,纵向亦然)。

另外两个属性, android:layout_width 和android:layout_height, 所有的View视图都需要指定他们的尺寸大小。

因为 LinearLayout 是布局文件中的根视图,所以它应该通过设置width和height属性为 "match_parent" 来充满整个屏幕区域来提供给应用。这个值的声明含义是这个view可以拓展它的宽高来匹配父view的宽高。

获取更多关于布局的信息, 查看 Layout 指南。

添加一个文本域


正如每一个视图对象,必须定义某些XML属性来指定的EditText对象的属性。

  1. 在 content_my.xml 文件中, 在 <LinearLayout> 标签元素中, 定义了一个 id 属性设置为 @+id/edit_message 的 <EditText>标签元素。
  2. 定义 layout_width 和layout_height 属性为 wrap_content
  3. 定义一个 hint 属性值为一个叫做 edit_message的字符串对象。

这个<EditText> 元素格式如下:

你添加的<EditText> 属性如下:

android:id
用来为view视图提供唯一的识别码,可以从代码中引用这个对象,比如读取或者操作这个对象(将在下一节中呈现)。

当你从XML中引用任何资源对象的时候这个标签 (@) 是必须的,解释的通俗一点就是:如果你想在代码中引用这个对象你就需要在XML中使用@符号来定义这个id属性,如果只是用来呈现不需要引用的话可以不指定其id属性。格式为”@+id/需要定义的名字”,比如“id/edit_message”。定义的时候要用+号,XML中引用直接”/”后面跟id名字(@id/需要定义的名字),后面会讲到。

资源类型前面的(+)号只需要在你定义资源ID的时候需要。当你编译应用的时候,SDK工具会使用ID名称在你的项目中 gen/R.java 文件下创建一个新的资源ID来关联 EditText 元素。跟资源ID只需要定义一次的方式一样,其他引用ID不需要加号(+)。只有在指定新的资源ID是必要的像strings或者layous这种具体资源是不需要加号(+)的。

android:layout_width 和android:layout_height

替代使用指定大小的宽度和高度,"wrap_content" 值意味着将按照view中内容的需要来确定其大小。如果你使用 "match_parent"代替, 那么 EditText元素大小将充满整个屏幕,因为它会匹配父类 LinearLayout的大小。 更多信息,查看 Layouts 指南。
android:hint
当文本域输入内容为空时显示的默认文案。 使用一个硬编码的字符串来作为它的值, "@string/edit_message" 的值是在一个独立文件中定义的。因为它指向的是一个具体的资源(不只是一个识别码),所以它不需要加号(+)。但是,因为你还没有定义的字符串资源还没有,你会先看到一个编译器错误。你可以通过下面的定义字符串内容来修复这个问题。

注意: 该字符串资源具有相同的名称edit_message作为元素ID 。然而,为资源的引用总是由资源类型(例如ID或字符串)范围,因此,使用相同的名称不引起碰撞。

添加一个字符串资源


默认情况下, 你的Android项目在 res/values/strings.xml目录下包含了一个string字符串资源文件。在这里你添加一个叫做 "edit_message" 的字符串然后将其值设置为 “Enter a message.”

  1. 在 Android Studio中, 在 res/values 目录中, 打开 strings.xml.
  2. 添加一行字符串命名为 "edit_message" 值为 “Enter a message”.
  3. 添加一行字符串命名为 "button_send" 值为 “Send”。你会在下面的部分创建按钮时用到这个值。

strings.xml 的结果大概是这样:

对于UI中的文本,通常将其指定为一个资源文件。字符串资源可以让你在一个独立的地方管理所有的UI文本,这样使得找到该值或者更新这个值的时候很容易。你还可以通过提供支持可替代的没一个字符串资源来是你的应用本地化和国际化。(就是定义N个语言的strings.xml)

更多关于使用其他语言字符串资源来本地化你的应用信息,查看 Supporting Different Devices 这一节。

添加一个按钮


  1. 在Android Studio中,  res/layout 目录下, 编辑 content_my.xml 文件。
  2. 在 <LinearLayout> 元素组件中,  紧接着 <EditText>element元素组件定义一个 <Button>
  3. 将按钮的宽度width 和高度height 设置为 "wrap_content" 以让按钮按需适配按钮的文本标签。
  4. 使用android:text 属性定义按钮的文本标签;将它的值设置为你上面部分定义的 button_send 字符串资源。

你的 <LinearLayout> 应该是这样的:

 

注意: 这个按钮不需要 android:id 属性,因为它不会再activity代码中被引用。

如插图2所示,当前的设计布局使得 EditText 和 Button 组件都是只有他们内容那么大。

插图2. EditText 和Button 组件他们的宽度都是设置为 "wrap_content"

对于按钮来说看起来表现良好,但是对于文本域不见得很好,因为用户可能会输入很长的东西。将它的宽度设置为按钮剩余的尺寸会更好一些。你可以在 LinearLayout 里使用一个weight 属性, 使用 android:layout_weight 属性来定义。

这个权重值(weight)是用来指定每个view需要占用空间的数字值(1,2,3,4这样的值)。工作有点像成分在饮料配方中的量:“2份苏打水,1份糖浆”是指饮料的三分之二是苏打。例如,如果你给视图一个为2的权重,另一个为1的权重时,总和是3,所以在第一视图填充剩余的空间的2/3和第二视图填充的其余部分。如果您添加第三个视图,并给它一个权重为1,那么第一个预览(权重为2)现在得到1/2的剩余空间,而剩下的两个分别获得1/4。

所有view的默认权重是0,如果你给一个view视图的权重设置为一个任意大于0的值,它将会填充其他view占用空间后剩余的所有空间。

让输入框充满屏幕


为了在你的布局中给 EditText 元素组件充满剩余的空间,按照以下设置:

  1. 在 content_my.xml 文件中, 将 <EditText> 元素的 layout_weight 属性设置为 1.
  2. 同时, 将 <EditText> 元素的layout_width 属性设置为 0dp.

    为了提高布局layout的效率,当你指定权重值的时候,应该将width属性这是为0dp。(设置为其他的也不会报错,但是会有警告,应该是影响执行效率还是推荐写成0dp)。之所以要将其宽度设置为0来提高性能是因为使用 "wrap_content" 属性作为宽度的话需要系统来计算一个最终不相干的值因为权重值需要计算另外一个宽度来充满剩余空间。说白了就是说如果你设置为0dp,系统就会认为这个view占据了整个一行空间,如果设置了非0值,系统还要计算是否还有其他组件占用空间。

    插图3展示了当你把 EditText 设置为所有权重的时候的结果。

    插图 3. EditText 组件被指定了全部权重,所以它在 LinearLayout中占满了所有剩余空间。

下面是完整的 content_my.xml布局文件代码:

运行你的程序


这个布局是你创建项目时SDK工具构建的 Activity 类默认采用的。运行程序看下结果:

  • 在 Android Studio中, 在工具栏中, 点击 Run .
  • 或者使用命令行, 切到Android项目根目录然后执行:

接下来的课程将学习怎么响应按钮按下操作,通过文本域读取内容,启动另外一个界面,等等。


Eblogs , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明构建一个简单的用户界面
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 不错,不错,看看了!
    zengda2016-04-06 11:31 回复
    • 谢谢
      曹传欢2016-04-13 23:07 回复
  2. 博客多久更新一次?
    2950601782016-04-08 15:43 回复
    • 看时间,一半一个月更几篇
      曹传欢2016-04-13 23:07 回复