Android开发学习系列-----构建你的第一个应用(2)

构建简单的用户界面

在本课中,您将学习如何创建一个 XML 格式的布局,其中包含一个文本字段和一个按钮。 在下一课中,在按下此按钮时,您的应用会将文本字段的内容发送给另一个 Activity 作为响应。
Android 应用的图形界面使用  View  对象和  ViewGroup  对象层次结构而构建。 View  对象通常为 按钮 文本字段 之类的 UI 小部件。而  ViewGroup  对象则为不可见的视图容器,它们定义子视图的布局,比如是网格布局还是垂直列表布局。
Android 提供对应于  View  和  ViewGroup  子类的 XML 词汇,以便您使用 UI 元素层次结构以 XML 格式定义 UI。
布局是  ViewGroup  的子类。在本练习中,您将学习创建  LinearLayout
图 1.   ViewGroup  对象如何在布局中形成分支并容纳其他  View  对象的图解。

创建线性布局

  1. 在 Android Studio 的 Project 窗口中,打开 app > res > layout > activity_main.xml
  1. 此 XML 文件定义 Activity 的布局。它包含默认的“Hello World”文本视图。
  1. 布局编辑器中,当您打开一个布局文件时,首先显示的是设计编辑器。 在本课中,您将直接使用 XML,因此请点击窗口底部的 Text 标签以切换到文本编辑器。
  1. 删除所有内容并插入以下 XML:<?xml version="1.0" encoding="utf-8"?>
  1. <LinearLayout
  1.     xmlns:tools="http://schemas.android.com/tools"
  1.     android:layout_width="match_parent"
  1.     android:layout_height="match_parent"
  1.     android:orientation="horizontal">
  1. </LinearLayout>
LinearLayout  是一个视图组( ViewGroup  的子类),它会按照  android:orientation  属性的指定,将子视图设置为垂直或水平方向布局。 LinearLayout 的每个子视图都会按照它们各自在 XML 中的出现顺序显示在屏幕上。
其他两个属性  android:layout_width  和  android:layout_height  则是所有视图的必备属性,用于指定它们的尺寸。
LinearLayout  是布局中的根视图,因此应将宽度和高度设置为 "match_parent",从而填满可供应用使用的整个屏幕区域。 该值表示视图应扩大其宽度或高度,以 匹配 父视图的宽度或高度。
如需了解有关布局属性的详细信息,请参阅 布局 指南。

添加文本字段

在 activity_main.xml 文件的  <LinearLayout>  元素内,添加以下  <EditText>  元素:
  1. <LinearLayout
  1.     xmlns:tools="http://schemas.android.com/tools"
  1.     android:layout_width="match_parent"
  1.     android:layout_height="match_parent"
  1.     android:orientation="horizontal">
  1.     <EditText android:id="@+id/edit_message"
  1.         android:layout_width="wrap_content"
  1.         android:layout_height="wrap_content"
  1.         android:hint="@string/edit_message" />
  1. </LinearLayout>
无需担心出现 @string/edit_message 错误;您很快就会修复该错误。
下面说明了您添加的  <EditText>  中的属性:
这会为视图赋予唯一的标识符,您可以使用该标识符从应用代码中引用对象,例如读取和操作对象(下一课中将有介绍)。
从 XML 引用任何资源对象时,都需要使用 @ 符号。 请在该符号后依次输入资源类型(本例中为 id)、斜杠和资源名称 (edit_message)。
只有在第一次定义资源 ID 时,才需要在资源类型之前加一个加号 (+)。 当您编译应用时,SDK 工具会使用 ID 名称在项目的 R.java 文件中新建一个引用  EditText  元素的资源 ID。一旦以此方式声明资源 ID,其他对该 ID 的引用皆无需使用加号。 只有在指定新资源 ID 时才必须使用加号,对于字符串或布局等具体资源则不必如此。 如需了解有关资源对象的详细信息,请参阅边栏。

"wrap_content" 值并不规定宽度和高度的具体大小,而是指定根据需要缩放视图,使其适合视图的内容。 如果您要改用 "match_parent",则  EditText  元素将填满屏幕,因为它会匹配父 LinearLayout  的大小。如需了解详细信息,请参阅 布局 指南。

这是文本字段为空时显示的默认字符串。"@string/edit_message" 并非使用硬编码字符串作为其值,而是引用另一个文件中定义的一个字符串资源。 由于它引用的是一个具体资源(而不仅仅是标识符),因此不需要加号。 不过,由于您尚未定义字符串资源,所以最初会出现编译错误。 在下一节中,您可以通过定义字符串来修正该错误。

:此字符串资源与元素 ID edit_message 同名。不过,对资源的引用始终都按资源类型(如 id 或 string)确定其作用域,因此使用相同的名称不会引起冲突。

添加字符串资源

默认情况下,您的 Android 项目在  res > values > strings.xml  位置包含一个字符串资源文件。您需要在此处添加两个新字符串。
1.        从  Project  窗口中,打开  res > values > strings.xml
2.        添加两个字符串,使您的文件如下所示:
  1. <?xml version="1.0" encoding="utf-8"?>
  1. <resources>
  1.     <string name="app_name">My First App</string>
  1.     <string name="edit_message">Enter a message</string>
  1.     <string name="button_send">Send</string>
  1. </resources>
对于用户界面中的文本,务必将每个字符串都指定为资源。 字符串资源允许您在单一位置管理所有 UI 文本,从而简化文本的查找和更新。 此外,将字符串外部化还可让您为每个字符串资源提供替代定义,从而将您的应用本地化为不同的语言。
如需了解有关使用字符串资源将应用本地化为其他语言的详细信息,请参阅 支持不同设备 课程。

添加按钮

返回到 activity_main.xml 文件并在  <EditText>  后添加一个按钮。您的文件应如下所示:
  1. <LinearLayout
  1.     xmlns:tools="http://schemas.android.com/tools"
  1.     android:orientation="horizontal"
  1.     android:layout_width="match_parent"
  1.     android:layout_height="match_parent">
  1.         <EditText android:id="@+id/edit_message"
  1.           android:layout_width="wrap_content"
  1.           android:layout_height="wrap_content"
  1.           android:hint="@string/edit_message" />
  1.         <Button
  1.           android:layout_width="wrap_content"
  1.           android:layout_height="wrap_content"
  1.           android:text="@string/button_send" />
  1. </LinearLayout>
:此按钮不需要  android:id  属性,因为不需要从 Activity 代码中引用它。
如图 2 所示,该布局当前设计为根据内容大小调整  EditText  和  Button  小部件的尺寸。
图 2.   EditText  小组件和  Button  小部件的宽度均设置为 "wrap_content"。

这对按钮很适合,但不太适合文本字段,因为用户键入的内容可能更长。 最好让文本字段填满未使用的屏幕宽度。 您可以在  LinearLayout  内通过 weight  属性来实现此目的,该属性可使用  android:layout_weight  属性来指定。
Weight 值是一个数字,用于指定每个视图与其他同级视图在剩余空间中的占比。 这有点像饮料配方中各种成分的比例: “2 份苏打、1 份糖浆”是指饮料中三分之二是苏打。例如,如果您将一个视图的 weight 值指定为 2,将另一个视图的 weight 值指定为 1,总和是 3,那么第一个视图将填满剩余空间的 2/3,而第二个视图则填满其余部分。 如果您添加了第三个视图,将其 weight 值指定为 1,那么现在第一个视图(weight 值为 2)将获得 1/2 的剩余空间,其余两个视图则各占 1/4。
所有视图的默认 weight 值都为 0,所以如果您仅将一个视图的 weight 值指定为大于 0,那么等到其他所有视图都获得所需空间后,该视图便会填满所有剩余空间。

使输入框填满屏幕宽度

在 activity_main.xml 中,修改  <EditText>  ,使这些属性如下所示:
  1. <EditText android:id="@+id/edit_message"
  1.     android:layout_weight="1"
  1.     android:layout_width="0dp"
  1.     android:layout_height="wrap_content"
  1.     android:hint="@string/edit_message" />
将宽度设置为零 (0dp) 可提高布局性能,这是因为如果将宽度设置为  "wrap_content" ,则会要求系统计算宽度,而该计算最终毫无意义,因为 weight 值还需要计算另一个宽度,才能填满剩余空间。
图 3.   EditText  小部件获得了布局的所有 weight,因此它填满了  LinearLayout  中的剩余空间。

完整的  activity_main.xml  布局文件现在看上去应该像下面这样:
  1. <?xml version="1.0" encoding="utf-8"?>
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  1.    android:orientation="horizontal"
  1.    android:layout_width="match_parent"
  1.    android:layout_height="match_parent">
  1.     <EditText android:id="@+id/edit_message"
  1.         android:layout_weight="1"
  1.         android:layout_width="0dp"
  1.         android:layout_height="wrap_content"
  1.         android:hint="@string/edit_message" />
  1.     <Button
  1.         android:layout_width="wrap_content"
  1.         android:layout_height="wrap_content"
  1.         android:text="@string/button_send" />
  1. </LinearLayout>
运行您的应用
要查看应用目前在设备或模拟器上的外观,请点击工具栏中的  Run  。
要添加诸如响应按钮和启动另一个 Activity 等应用行为,请继续学习 下一课

参考材料:《Android编程权威指南(第2版)》
Android官网开发入门指南(https://developer.android.com/training/permissions/requesting.html)    




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值