六、Android UI 设计：通过 XML 使用视图和小部件
在本章中，我们将使用我们在本书第一部分中创建的 Hello World 应用，并致力于使其各种功能屏幕的应用用户界面设计更加专业。在 Android 中，这主要是通过 Android 用户界面小部件的 XML UI 参数来完成的，我们已经知道这些小部件是视图的子类。
同时，我们也将利用这一章，让那些不是用户界面设计者的读者领略在努力使用户界面设计看起来专业，同时对最终用户保持易用性时遇到的各种设计考虑。
我将再次尝试同时完成这些目标。极大地增强了 Hello World 应用的用户界面，同时还在一个统一的章节中介绍了关键的 XML UI 参数，该章节将概述在 Hello World 应用的上下文中使用 XML 定义用户界面元素的技术和功能。
Android 用户界面元素:Android 视图和子类
正如我在本书前面提到的，所有用户界面元素，至少是用户用来控制应用的可视元素，都是 Android View 类的子类，这意味着视图本身就是一个对象，也是 java.lang.Object 主对象类的子类。
一些最常见的用户界面小部件对象和布局容器对象，包括 ViewGroup、ImageView 和 TextView，都是 View 类的直接子类。其他我们已经使用过的，比如 Button、VideoView 和 ImageButton，是 View 类的间接子类。
间接子类是子类的简单子类；例如，Android 按钮类，可以通过 android.widget 包找到(导入)(你可以导入 android.widget.Button 以便使用按钮 UI 元素对象)是从 android.widget.TextView 类的子类。这是因为 button 对象具有 TextView 对象所具有的所有功能，以及附加功能(按钮外观和感觉元素)，因此对 TextView 对象进行子类化以创建 Button 对象是合乎逻辑的。
我们将在本书后面看到的其他 View direct 子类包括 AnalogClock 和 ProgressBar 然而，我们将使用的许多用户界面小部件位于视图类层次结构的更底层(也就是说，它们是更专门化的用户界面特性实现)，因此是 Android 视图类的间接子类。
在这一章中，我们将关注所有 Android 应用开发项目中使用的主流视图类或窗口小部件。我们的应用 UI 小部件将包括直接子类 TextView 和 ImageView ，因为图像和文本是任何应用中最重要和最常用的元素，以及按钮、 ImageButton 、 EditText 和 VideoView UI 元素小部件。
优化我们的 NewPlanet 活动 ImageView UI 小部件
让我们从我们的第一个选项菜单项和活动屏幕开始，在NewPlanet.java类中定义，我们在第 3 章中写了它。这个 UI 屏幕让我们单击一个行星的图像，在 Hello World Android 应用中创建基本的行星对象。如果你忘了它看起来像什么，这一章会再次展示，还有行星图片，在图 6-2 中。
现在，我们使用新的 Android 应用项目对话框系列在第 2 章中为我们创建的默认 Android 应用启动图标作为占位符图像。在这一节中，我们将最终用实际的行星图像替换这些占位符图像，稍后我们将使用 XML 参数对它们进行格式化，以使屏幕显示出专业的效果。
我为每个星球创建了四个不同分辨率的版本；一个是 256 像素见方的 ITV，一个是 192 像素见方的平板电脑，一个是 128 像素见方的触摸屏智能手机，一个是 96 像素见方的 240 或 320 像素屏幕的手机。
将我们的图像素材放入可绘制的 DPI 文件夹
接下来，将这些行星图像文件复制到资源文件夹下相应的 drawable 文件夹中。请注意，我们将很快在第 7 章中探讨开发这些不同分辨率图形素材背后的所有理论。现在，我将简单地介绍一下我们正在做的事情的基础，这样我们就可以在本章的用户界面设计工作中使用 drawables(位图图像)。
让我们从行星地球开始，因为这是我们在第 3 章中开发的 activity_add.xml 布局容器中的第一个 XML ImageView 标签。使用 Windows 资源管理器文件管理器，将earth256.png文件复制到 Hello_World 项目资源文件夹中的 drawable-xhdpi 文件夹中，该文件夹位于:
C:/Users/YourNameHere/workspace/Hello_World/res/drawable-xhdpi/
XHDPI 代表超高密度像素图像，这个文件夹包含我们最高分辨率的图像素材，在这种情况下，是一张 256 像素的正方形地球图像。接下来将 earth192.png 文件复制到 drawable-hdpi 文件夹，用于高密度像素图像，然后将 earth128.png文件复制到 drawable-mdpi 文件夹，用于中密度像素图像，最后将 earth96.png文件复制到 drawable-ldpi 文件夹，用于低密度****
接下来，我们将把这四个图像文件分别重命名为earth.png。我们这样做是因为 earth.png 是我们将在 XML 标记和 Java 代码中引用的图像素材名称，Android 会自动查看用户使用的屏幕大小，并进入正确的文件夹，获取分辨率密度图像素材。我们将在第 7 章中进一步探讨这个概念。
接下来，我们需要复制并重命名其他五个行星图像素材，这样我们就有六个了。四个可绘制文件夹中的 png 文件。四个文件夹中的每一个都应该有六个。png 文件，每个文件都以行星的名称开始，并且全部是小写字符。
接下来，我们必须使用 Eclipse 中的 Refresh 命令来更新我们的项目文件夹，以显示我们从 Eclipse“外部”(使用 Windows Explorer 文件管理器)复制到这些文件夹中的这些新素材。
为此，右键单击您的项目文件夹并从菜单中选择刷新，或者您也可以左键单击该文件夹并按下计算机键盘上的 F5 功能键。这样做的目的是告诉 Eclipse 扫描您所有的项目文件夹和文件，并更新 Package Explorer 导航窗格，以及它自己的跟踪例程，以便这些图像文件在我们的代码中被调用时，不会被标记为从我们的项目素材层次结构中缺失(或不存在)。
参考并对齐我们的行星图像源文件
接下来，我们需要进入我们的activity _ add . xmlrelative layout XML 文件，并更改我们在第 4 章中写回的 XML 标记，以指向正确的星球文件名，这些文件名在每个 ImageView 标签中使用 android:src 参数引用。更改占位符图片，目前为 @drawable/ic_launcher ，用小写字母表示每个星球的名称。第一个 ImageView 标签 imageEarth 的参数如下:
android:src="@drawable/earth"
为所有六个 ImageView 标签完成此操作后，单击编辑窗格底部的图形布局选项卡，并使用其预览功能查看是否显示了所有六个行星。如果是，那么您已经正确地完成了工作流程中的前几个步骤。请注意，作为一个整体，所有六颗行星都需要向右移动一点。为了实现这一点，我们将添加现在熟悉的Android:layout _ margin left参数。因为我们希望整个布局(作为一个整体的行星组)被移动，我们将把这个 marginLeft 参数放在父 RelativeLayout 标签中，如图 6-1 中阴影线所示。
图 6-1。添加 RelativeLayout 参数将所有行星居中，并将 android:src 参数设置为新图像
使用 22 密度独立像素 (DIP，或 DP)的设置值，通过以下 XML 标记行将新的 Planet selection ImageView PNG 图形居中显示在我们的 NewPlanet Activity 类用户界面屏幕上:
android:layout_marginLeft="22dp"
现在，返回并单击底部的图形布局选项卡，预览您添加的这个新的 android:marginLeft 参数，并查看这个 22 倾角设置如何将行星组推到显示屏的中心，以获得更专业的 UI 屏幕外观。这显示在图 6-2 中，以及右边的 Eclipse 属性窗格，你可以通过将鼠标放在属性窗格的顶部边框上来放大它，当你的光标变成一个双箭头“拖动以调整我的大小”指示器时，这时你可以向上拖动这个边框，给你自己一个更大的属性编辑区域。
图 6-2。activity _ add XML 代码预览，在属性面板中有行星图片和新的边距设置
请注意，您在 XML 标记视图窗格中编码的参数也在属性窗格视图中设置，因此如果您愿意，也可以用这种方式添加参数。蓝色突出显示的是我们刚刚添加的左边距布局参数 22dp 设置。另外，请注意中间的模拟应用用户界面屏幕，以及我们六颗行星的更专业的视图。这项活动进展顺利。
添加屏幕字幕文本和完成按钮
让这个屏幕完全专业的下一件事是在屏幕顶部添加一个 TextView UI 小部件(标签)来告诉用户这个屏幕是干什么的，以及一个按钮，当他们完成添加行星时可以点击它。doneadingbutton按钮 UI 元素(标签)调用我们的 finish() 活动方法，点击 planet ImageView UI 元素生成那些新对象。我们将在本章的后面写我们的 Java 代码；现在我们正在通过 XML 学习 UI 设计，所以让我们添加标签。
首先，让我们添加一个按钮用户界面元素标签，以便我们的用户在添加完行星后可以退出这个屏幕。最简单的方法是进入 activity_config.xml XML 标记，复制完成配置按钮标签，然后将该标记粘贴到 activity_add.xml 文件的顶部，RelativeLayout 容器标签下。
将 android:id 值改为 @+id/doneAddingButton ，将 android:text 值改为@ string/button _ name _ Done _ add，然后进入 strings.xml 文件，复制粘贴button _ name _ Done标签，创建一个 button_name_done_add 名为 string 的常量
接下来我们要做的是从 imageEarth ImageView 标签中剪切并粘贴(不是复制)两个标签Android:layout _ alignParentLeft和Android:layout _ alignParentTop，并在我们添加的按钮标签中使用它们。这是因为按钮标签现在是这个修订的相对屏幕布局的最顶层的屏幕布局用户界面元素。
因为我们想在屏幕的右上角右对齐新的 All Done 按钮 UI 元素，所以将Android:layout _ alignParentLeft更改为Android:layout _ alignParentRight并保留 android:alignParentTop。在我们的doneadingbuttonUI 元素中，我们并没有真正使用任何新的参数，我们只是“借用”了左上角 ImageView UI 元素中的参数，并对它们进行了更改，以创建一个右上角的按钮 UI 元素。接下来，我们将为我们的屏幕标题添加一个 TextView UI 元素(见图 6-3 中突出显示的行)。
图 6-3。添加一个文本视图标签来添加一个屏幕标题和一个 doneAddingButton 按钮标签来退出活动
接下来，让我们从我们的 activity_main XML 布局容器中复制第一个 TextView UI 元素(标签),并将其粘贴到我们刚刚创建的按钮标签上方。将 android:id 更改为 @+id/addPlanetText 并将 android:text 参数指向@ string/Add _ Planet _ caption，然后进入您的 strings.xml 文件，复制并粘贴hello _ world标签，用它创建一个 add_planet_caption 命名的字符串常量，值为:“点击行星到
通过编辑窗格底部的图形布局编辑器选项卡预览 UI 设计，您会注意到文本有点小，因此返回 XML 编辑模式，并在 TextView 标签中的 android:id 参数之后添加一个设置为 22sp 的 android:textSize 参数，如图图 6-3 所示。
文本字体使用标准像素(sp) 而不是密度无关像素来定义它们的值。如果您尝试将 dp 或 dip 用于任何与字体相关的大小调整，Eclipse 将标记它并警告您使用 sp 值来调整文本大小。
我们需要做的下一件事是将我们的屏幕标题文本与按钮 UI 元素对齐，以便它看起来专业并且对齐，位于屏幕布局的顶部。我们可以用一个名为Android:layout _ align baseline的参数来实现这一点，它将一个 UI 元素与另一个 UI 元素(在本例中是我们的按钮 UI 元素)的基线对齐。
现在让我们实现它，通过使用参数代码设置 alignBaseline 参数指向我们的按钮 UI 元素的 android:id 值:
android:layout_alignBaseline="@+id/doneAddingButton"
这一行代码也显示在图 6-3 中，当我们现在点击编辑窗格底部的图形布局编辑器选项卡时，我们可以看到在 UI 设计中实现了更大的字体大小和基线对齐。
还要注意，在图 6-4 中，Eclipse 实际上向我们展示了基线，它使用这个基线来对齐按钮标签 UI 元素中的文本和屏幕标题 TextView UI 元素。如果你仔细观察，你会看到一条绿线，证明我们的 TextView 和 Button 对象现在是基线对齐的。
图 6-4。查看相对于 doneAddingButton 按钮的 TextView layout_alignBaseline 参数结果
如果没有看到绿色基线，请返回到 XML 编辑模式窗格，并单击 alignBaseline 参数的代码行以突出显示它。
一旦该行代码被突出显示(浅蓝色)，当您再次单击该选项卡时，它将是在图形布局编辑器视图中预览的代码。还要注意在图 6-4 中，我在属性窗格中突出显示了我们的文本大小参数，显示它也可以在那里设置。接下来，让我们以 Android 应用的身份运行，看看我们的 NewPlanet.java 活动屏幕用户界面布局在所有新变化到位后看起来如何。结果可以在图 6-5 中看到。
图 6-5。Nexus S 模拟器中我们的 NewPlanet 活动画面 T3】
添加 Java 代码来整合我们的新用户界面元素
最后，我们需要对我们的NewPlanet.javaJava 代码进行一些添加，以将我们在 XML UI 设计中所做的更改吸收到 Java 代码函数中，为我们的 Hello_World Android 应用添加一个新的 Planet 活动。我们需要做的第一件事是添加一个按钮对象。
在 Java 中设置按钮 UI 对象类似于设置 ImageView 对象来处理 Mars ImageView 对象上的点击。我们使用一行 Java 代码来声明我们的按钮对象，该代码声明了一个按钮对象，将该对象命名为完成按钮，，并通过引用一个完成添加按钮 ID 的 findViewById() 方法将其绑定到我们的 XML 定义，如下所示:
Button doneButton = (Button)findViewById(R.id.doneAddingButton);
接下来，我们利用熟悉的。setOnClickListener() 方法来设置一个新视图。OnClickListener() 为 doneButton 按钮对象。这又包含一个 onClick()事件处理程序，它监听点击，然后为我们的活动执行一个 finish() 方法，允许用户退出活动屏幕，并返回到主屏幕。代码如下所示:
doneButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v){
finish();
}
});
接下来，我们需要从 onClick()事件处理程序方法中移除 finish()方法调用，该方法附加到我们的 marsImage ImageView 对象，因为我们现在有了用于退出活动的 doneButton UI 按钮，并且我们不再希望当我们单击其中一个行星时屏幕消失。
代替 finish()方法，让我们添加一个 Toast 对象和方法调用，让我们的用户知道 Mars 对象实际上已经被创建了。这是引入 Android Toast 对象的逻辑位置，因为它们通常用于用户界面和用户体验的优化和增强。
引入(并利用)Android Toast 类
Android Toast 对象用于将消息发送到您的活动屏幕上，该屏幕会在预定义的时间内向用户发送消息。在我们的例子中，当用户单击 marsImage ImageView UI 元素时，他们将发送消息“Mars Created ”,以便用户知道 Mars 对象是通过用户单击该行星的图像而创建的。
Toast 对象来自于 android.widget.Toast 包和类，并且是 java.lang.Object 的子类(而不是 android.view.view 的子类，因为它不需要任何 View 类特性),因为它们本质上很简单，尽管它们在使用时也非常有效。
声明一个 Toast 对象最简单的方法就是使用。Toast 对象的 makeToast() 方法。该方法需要当前上下文、要烘烤的消息以及常量形式的持续时间。有两个持续时间常数， LENGTH_LONG 和 LENGTH_SHORT ，我们将使用 LENGTH_SHORT 常数快速直观地确认我们的火星星球已经创建。Toast 调用编码如下:
Toast.makeText(NewPlanet.this, "Mars Created", Toast.LENGTH_SHORT).show();
注意，我们已经使用点符号将 Toast show() 方法附加到 Toast.makeText()方法调用的末尾。这是 Java 方法链接的一个很好的例子，这种技术允许我们编写更密集的代码，其中一整块代码可以写在一行代码中。要使用两行单独的 Java 代码“手写”编写这一行代码，您应该编写以下代码:
Toast myToast = Toast.makeText(NewPlanet.this, "Mars Created", Toast.LENGTH_SHORT);
myToast.show();
正如你在这里看到的，我们写的第一行代码要简洁得多！
现在添加我们开发的这行代码来将消息显示到屏幕上，代替我们之前的 finish() 方法调用，我们完成的 NewPlanet Java 代码将看起来像图 6-6 中所示的代码。
图 6-6。添加一个按钮对象和一个 Toast 对象。makeText 方法调用我们的 NewPlanet.java 活动
请注意，当我们作为 Android 应用运行来测试我们的代码时，我们现在会看到一个屏幕，上面有一个“全部完成”按钮，当我们单击火星图像时，它会创建一个火星对象，并向我们提供火星对象已经创建的反馈。
稍后我们将完成应用这一区域的 Java 代码，现在我们正专注于我们的用户界面设计，所以让我们继续，接下来微调我们的 ConfigPlanet 活动屏幕的 UI。
优化我们的 ConfigPlanet 活动 UI:按钮和文本 UI 小部件
让我们通过增强我们的 activity_config.xml 文件中的 XML 标记来改进我们的第二个选项菜单项 Configure Planet 的用户界面设计。首先，我们将通过在每行上放置两个标签参数来压缩一些按钮标签 XML 标记，这样我们就可以在屏幕上放置一些新的 UI 元素标签。请注意，标记参数只需用一个空格字符分隔；参数不需要在它们自己的行上。这可以在图 6-7 中看到，在 LinearLayout 中，我们的按钮标签现在只占了十几行标记。为了增强 UI 设计并使屏幕更具功能性，我们需要在 UI 屏幕的右侧放置一些可编辑的文本字段，与每个按钮相对。
图 6-7。添加 EditText UI 元素标签并嵌套两个 LinearLayouts 以创建并排的 UI 布局
使用嵌套布局容器创建复杂的用户界面设计
为此，我们需要将两个 LinearLayout 容器嵌套在一起，一个用于左侧垂直对齐的按钮 UI 标签，另一个用于右侧垂直对齐的 EditText UI 元素标签。让我们复制 LinearLayout 开始标签，粘贴到 LinearLayout 结束标签下面，开始一个新的容器，如图图 6-7 所示。在它下面复制一个 LinearLayout 结束标记，这样我们的结束标记也就到位了。
然后复制 LinearLayout 开始标签并将其粘贴到 LinearLayout 开始标签的上方，以创建一个新的顶级 LinearLayout 容器，并将其 android:orientation 参数从垂直更改为水平，因为两个嵌套的 LinearLayout 容器将彼此相邻。然后再次复制 LinearLayout 结束标记，并将其粘贴到布局容器的最底部，以便第一个水平 LinearLayout 标记包裹两个内部(嵌套)垂直 LinearLayout 容器标记。
为了设置两个嵌套的 LinearLayouts 之间的宽度比，我们需要向第一个(左侧)标签添加一个 android:layout_width 参数，以定义它将拥有多大的屏幕( 170dp )。右边的 LinearLayout 负责剩下的部分。
如果你愿意，你可以稍微改变嵌套标签的缩进来显示嵌套的内容，如图 6-7 所示。接下来，我们要做的就是将我们的 EditText UI 元素标签添加到第二个 LinearLayout 的内部。
为可编辑文本字段引入 Android EditText 用户界面元素
要添加 EditText 用户界面元素，我们可以使用图形布局编辑器将 EditText UI 元素拖动到屏幕的右侧，或者通过编写一个元素的标记，然后复制五次，同时更改参数以匹配按钮 ID 和输入类型，来手动编码 EditText 标记及其参数:
<EditText android:id="@+id/editTextColonies" android:inputType="number"
android:ems="12" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_marginTop="12dp" />
第一个 EditText UI 字段在 Add Colonies 按钮的对面，有一个 editTextColonies 的 android:id 和一个 android:inputType 的 number (与整数数据匹配)。inputType 参数定义了字段使用的数据类型，并且需要与访问该字段的 Java 代码中使用的数据类型相匹配，稍后当我们编写 Java 代码来填充这些数据字段时，我们将会看到这一点。我们使用数字和文本数据类型作为 inputType 参数，但是如果需要的话，也可以使用其他类型，比如 numberDecimal，表示实数(十进制)。
android:ems 参数为数据字段中使用的文本值设置字体大小，我们将从 12 ems 的值开始，然后如果我们希望数据字段中有更大的文本，稍后再对其进行调整。我们的 EditText UI 元素标记的下一个参数是 android:layout_width ，它被设置为 match_parent ，告诉 android 将 EditText UI 元素(字段)的宽度与父容器对象(标记)匹配，在本例中是第二个嵌套的 LinearLayout。
我们的 EditText 标签中的 android:layout_height 参数有一个 wrap_content 值，它本质上与 match_parent 值相反。wrap content 常量意味着使 UI 元素的边缘符合其中包含的内容，而 match parent 常量则相反:将 UI 元素的边缘扩展到包含它的容器中。
最后，我们将使用 12dp 的一个 android:layout_marginTop 参数将我们的每个 EditText 字段与我们的按钮对齐，这样我们在数据字段之间就有了均匀的间距，并且每个字段都与紧邻其左侧的按钮 UI 元素的底部边缘对齐。
现在我们已经编写了一个代表性的 EditText 标签，让我们将它复制五次，并更改 android:id 参数以匹配按钮 id 名称，并将两个 Forcefield 指示器字段的 android:inputType 参数更改为 text ，这将包含文本值。
升级我们的 Configure Planet Activity screen XML 以在并排的 Linearlayouts 中包含 EditText 数据编辑字段的最终结果可以在图 6-7 中看到，它显示了我们最终的 XML 代码和我们在 Eclipse 右侧的 Outline 窗格中使用的 UI 元素的概述。通过使用作为 Android 应用运行工作流程，检查以确保当前 UI 设置在仿真器屏幕上看起来不错。
添加 Java 代码以整合我们的“配置一个星球”屏幕的新用户界面元素
接下来，让我们修改我们的ConfigPlanet.java活动类 Java 代码，将它“连接”到这些新的 UI 元素，这样它就可以在我们的应用中起作用了。
我们要做的第一件事是为我们的 doneButton Button 对象复制我们的按钮代码，这样活动屏幕上的所有按钮都可以正常工作。注意在图 6-8 中，我通过放置 finish()使 onClick() 代码块更紧凑一些；花括号内的语句放在一行上，因为目前只有那一条代码语句。
图 6-8。在 ConfigPlanet.java 的 Java 代码中添加按钮对象和 onClick()事件处理程序
接下来，我们需要将所有与 doneButton 相关的(5)行 Java 代码复制六次到 doneButton 代码块下面，如图图 6-8 所示，所以我们创建了 colonyButton、colonistButton、baseButton、militaryButton、forceFieldOnButton，最后是 forceFieldOffButton 代码块。确保在每个代码块中为每个按钮 UI 元素引用正确的 XML ID 名称，并确保。setOnClickListener() 方法连接到正确的按钮对象名，该对象名定义在它的上一行中。最后，点击每个代码块左边顶部的减号图标，折叠代码块，如图 6-9 所示，这样我们就有了更多的编辑空间。
图 6-9。添加一个名为 colonyText 的 EditText 对象，并通过:Import EditText 调用 Eclipse 的自动导入特性
现在是时候将我们的 EditText UI 对象添加到我们的 Java 代码中了，这样我们就可以利用用户在我们的程序逻辑中放入这些字段的数据值，因为我们将在整本书中继续构建这个应用。
您应该很擅长在 Java 代码中声明 UI 元素，使用它们的小部件类型、名称和 findViewById() 方法，如下所示:
EditText colonyText = (EditText)findViewById(R.id.editTextColonies);
注意在图 6-9 中，Eclipse 错误标记了我们的 EditText 对象，因为我们不允许在代码中使用它，直到我们导入它，所以将鼠标放在红色下划线的对象上，点击导入 EditText android.widget 包选项，让 Eclipse 导入我们的 android.widget.EditText 类。
我们需要做的下一件事是在我们的 EditText 字段中设置一个默认值，它符合我们建议用户添加的属性的数量。在菌落的情况下，我们使用“1”值，一次添加一个菌落。通过设置文本。带有两个参数的 setText() 方法，一个值，一个缓冲区类型常量。缓冲区类型可以是可编辑的、正常的(固定的)和可扩展的。对于我们的 colonyText 对象，我们的代码如下所示:
EditText colonyText = (EditText)findViewById(R.id.editTextColonies);
colonyText.setText("1", EditText.BufferType.EDITABLE);
现在，我们所要做的就是将最后两行 Java 代码复制到前两行的下面五次，并将 colony 更改为殖民者、基地、军队、forcefieldOn 和 forcefieldOff。然后，确保每个 EditText UI 元素的 XML ID 标记名与我们在 activity_config.xml 中的 XML 相匹配，然后将 colonistsText 的“1”值更改为“100”，将 militaryText 的“10”值更改为这些数据字段设置更合理的默认值。
对于我们的 forcefieldOn 和 forcefieldOffText 数据字段，我们将使用“Forcefield is Off”作为 forcefieldOffText 数据默认设置，并使用 null(空引号)设置作为 forcefieldOnText 数据默认设置。
所有五个复制的两行代码块的最终 Java 代码应该如下所示:
EditText colonistText = (EditText)findViewById(R.id.editTextColonists);
colonistText.setText("100", EditText.BufferType.EDITABLE);
EditText basesText = (EditText)findViewById(R.id.editTextBases);
basesText.setText("1", EditText.BufferType.EDITABLE);
EditText militaryText = (EditText)findViewById(R.id.editTextMilitary);
militaryText.setText("1", EditText.BufferType.EDITABLE);
EditText forcefieldOnText = (EditText)findViewById(R.id.editTextForcefieldOn);
forcefieldOnText.setText("", EditText.BufferType.EDITABLE);
EditText forcefieldOffText = (EditText)findViewById(R.id.editTextForcefieldOff);
forcefieldOffText.setText("Forcefield is Off", EditText.BufferType.EDITABLE);
现在我们只用了十几行 Java 代码就建立了 EditText UI 元素，如图 6-10 所示。稍后，我们将为按钮 UI 元素的 onClick()事件处理程序添加 Java 代码，这些代码将从我们使用设置的 EditText 字段中获取数据值。getText() 方法，并用这些值相应地设置我们的 WorldGen 对象数据变量。
图 6-10。复制六个 EditText 对象和。用 Java 实现 EditText UI 字段的 setText()方法
接下来，我们需要确定我们的 XML 标记和 Java 代码是否给我们提供了我们一直试图实现的更精炼的用户界面设计结果。右键点击项目文件夹，选择 Run As Android Application 菜单项，当 Nexus S 模拟器启动时点击菜单按钮和 Configure Planet 菜单选择，观察 UI 屏幕。
注意，我们对 ems 字体大小设置的估计是正确的，并且 EditText 字段中的数据是一个很好的大小，因此我们将保留那些标记参数设置。然而，EditText 字段的底部并没有与按钮元素的底部完美地对齐；看起来像是 12dp 的 android:layout_marginTop 值太大了，这将每个数据字段从其上的数据字段向下推得太远。因此，让我们将 marginTop 值减少 33%至值 8dp 和再次作为 Android 应用运行。
正如你在图 6-11 中看到的，我们的配置 Planet UI 屏幕排列良好，Java 代码中设置的数据值正确地出现在每个 UI 数据字段中，就像我们设计的那样。在第七章中，我们添加了半透明的按钮，让事情变得更加有趣，但现在，这个活动屏幕的用户界面设计已经升级，并在我们的 Java 代码中实现了，所以让我们继续前进，接下来拨入我们的星球旅行活动屏幕。我们在这个应用上取得了巨大的进步！
图 6-11。使用实现的可编辑文本字段配置活动 UI 屏幕
优化我们的 TravelPlanet 活动:Android 的 VideoView Widget
我们的 TravelPlanet.java 活动类拥有最简单的 XML 标记代码，并将拥有最复杂的 Java 代码(当我们进入视频章节时，第 11 章和第 12 章)，因为我们将使用一种先进的新媒体类型:数字视频。我们在这一部分的目标是使我们的应用的“到行星旅行”部分在外观和用户体验上更专业，我们将通过去掉位于视频视图屏幕顶部的按钮来实现这一点，以便用户可以享受全屏视频播放。为了完成这个，我们需要从我们的 UI 中移除按钮 UI 元素。
配置我们的 VideoView 用户界面元素
进入 activity_travel.xml 编辑页签，将按钮 UI 元素标签从 FrameLayout 容器中全部删除，如图图 6-12 所示。因为我们不再需要点击按钮来退出我们的活动，我们将需要使视频视图本身可点击，所以让我们寻找一个参数来实现这一点。键入 android ，然后按下冒号键从 Eclipse 中获得参数选项助手对话框，然后向下滚动并寻找任何处理可点击性的参数。
图 6-12。移除按钮 UI 元素标签，改为使 VideoView UI 元素可点击
请注意，列表中有两个名为 android:clickable 和 android:longClickable 的参数，双击 android:clickable 来添加它，然后使用相同的工作流程返回并双击 android:longClickable 参数来添加它，此时我们正在这里编写标记。在本章后面的 Java 代码中，以及在第 11 章和第 12 章中，我们将更深入地讨论数字视频，我们使用 Android onTouch() 事件(因为视频正在触摸屏上播放)在视频屏幕上实现点击和长时间点击。
接下来，我们添加了另一个 UI 参数，当我们的用户在一个星球的表面旅行时，它可以增强我们在数字视频播放过程中的用户体验。许多 Android 设备优先考虑节能而不是用户体验，因为我们不希望我们的 Android 设备屏幕在用户的旅行体验中变暗(甚至变黑)，所以我们将寻找一个参数来解决这个问题。
再次键入 android 关键字和冒号键激活器并从 Eclipse 中调出参数选项助手对话框，并寻找一个在 VideoView 播放期间保持我们的 android 设备屏幕打开的参数。
这里需要注意的是(如果你还没有注意到的话),这个 Eclipse 参数选项助手对话框将只用与你在其中输入 android 关键字和冒号激活符的标签相关的参数填充它的视图。因此，这是准确找出每个用户界面元素的标签有哪些可用参数的好方法。双击 android:keepScreenOn 参数并添加。
一旦您完成了 activity_travel.xml 文件的 XML 编辑，它应该看起来像图 6-12 。现在，我们只需要更改 Java 代码来访问我们在 XML 编辑会话中所做的事情，这样一切就像手套一样合在一起了。
添加 Java 代码，将我们的旅行融入行星屏幕的新用户界面元素
我们需要做的第一件事是删除实例化我们的按钮对象的 Java 代码，或者编辑它，用一个 travelVideo VideoView 对象替换我们的按钮对象，如下行代码所示:
VideoView travelVideo = (VideoView)findViewById(R.id.travelVideoView);
一旦这样做了，Eclipse 将会突出显示一个错误和一个警告；根据错误import Android . widget . VideoView导入 video view 类以供使用，另一个黄色警告强调了这样一个事实，即您不再需要import Android . widget . button语句，因此如果您想的话，现在可以删除该 import 语句(您不必非要这样做—这是一个警告级别，不会阻止代码正确编译和运行)。
图 6-13。用 Java 中的 VideoView 对象和 onTouch()处理程序替换按钮和 onClick()处理程序
一旦我们创建了 travelVideo VideoView 对象，我们就可以在它上面设置一个事件监听器。因为数字视频最好通过触摸屏设备使用，所以让我们利用这个机会使用 onTouch() 事件监听器，而不是 onClick()事件监听器。要设置 OnTouchListener() ，使用以下代码:
travelVideo.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
Toast.makeText(TravelPlanet.this, "Going Home", Toast.LENGTH_SHORT).show();
finish();
return true;
}
});
有了这段代码，我们的用户所要做的就是触摸屏幕(在我们添加视频后，视频最终会出现在屏幕上)，然后 onTouch() 事件处理程序向屏幕广播一个 Toast ，上面写着“回家”，然后执行活动 finish() 方法，将用户带回主页。现在，我们的 VideoView UI 元素处理按钮 UI 元素曾经处理的事件，按钮不会阻挡我们查看视频视图屏幕。这样的 UI 设计有更专业的用户体验。
在第 7 章中，如果我们需要触摸事件来控制视频回放或视频传输，那么我们可以将触摸事件改为长点击。现在，我们只是把基础放在适当的位置，以便我们可以在以后对它进行扩展，但在某种程度上，它可以在当前的应用功能中很好地工作。这是开发我们代码的最好方法，通过确保它在开发的每个阶段都能很好地工作。
因此，让我们作为 Android 应用运行，并确保代码正常工作。一旦应用启动，点击菜单按钮，并选择旅行到星球菜单选项，它会带你到一个黑色的屏幕(空白视频视图屏幕)，你可以在屏幕中间点击(模拟手指触摸)。一旦你这样做了，一个写着“回家”的祝酒信息就会出现，应用会返回到主屏幕。现在我们已经有 75%的应用活动屏幕在工作，我们需要微调我们的攻击星球屏幕，然后我们将准备进入一些图形设计！
优化我们的攻击星球活动 UI: ImageButton UI Widgets
在我们修改attack _ activity . XMLlinear layout 容器中的 ImageButton 标签的 XML 标记之前，我们应该将 ImageButton 标签将用于自定义按钮图标的图像元素放入正确分辨率的可绘制资源文件夹中。我们在本章的“配置行星”一节中已经这样做了，关于我们的 ImageView 标签使用的六个行星图像(只有这些图标更酷)。先这样吧。
将图像素材放置到位
复制五个 ImageButton 图形的 96 像素版本。png 文件到您的Hello _ World/RES/drawable-xhdpi/文件夹中。它们被命名为 attackbomb96px.png、attackinvade96px.png、attackvirus96px.png、attacklaser96px.png 和 attackexit96px.png。一个巧妙的方法是选择第一个，然后按住键盘上的 Ctrl 键，同时选择其他四个。这允许不连续的文件选择，而 Shift 键将选择一系列文件(单击第一个文件，按住 Shift，然后单击所需范围内的最后一个文件)。然后右键选择复制，然后选择目标文件夹，右键选择粘贴。
一旦它们在 /res/drawable-xhdpi 文件夹中，删除文件名的 96px 部分，这样文件(最终，一旦我们完成所有这些复制)都有相同的通用名称:attackbomb.png、attackinvade.png、attackvirus.png、attacklaser.png 和 attackexit.png。
接下来，对这五个文件的 80px 版本执行完全相同的工作过程，将它们复制到 /res/drawable-hdpi 文件夹中，并删除文件名中的 80px 部分，因此它们都是通用名称。再次进行相同的工作过程，将这五个文件的 64px 版本放入 /res/drawable-mdpi 文件夹，最后再将这五个文件的 48px 版本放入 /res/drawable-ldpi 文件夹。
参考、对齐和合成我们的攻击图标图像源文件
现在，我们已经准备好进入 Eclipse XML 编辑窗格，并添加增强新用户界面屏幕设计所需的标记参数。我们还需要更改标记的 android:src 参数中指定的图像源文件名，以便我们令人印象深刻的新自定义 ImageButton 图形图标在每个 ImageButton 标记中正确引用。
让我们首先修改 ImageButton 标签(图 6-14 )，使用新的文件名，以及功能参数，如声音效果、背景颜色值和边距，以便在图像图形之间的 UI 屏幕上留出一些空间。
图 6-14。升级 ImageButton 标签参数以引用新图像并添加背景透明度
因为最终(在第 7 章之后)我们所有的应用屏幕都将有深色或黑色的背景，以太空中发现的星际场和等离子场为特色，让我们给 LinearLayout 容器添加一个新参数，给它一个黑色背景。我们将通过 android:background 参数来实现这一点，正如我们将在第 7 章中了解到的，颜色黑色在计算机中通过 #000000 值来表示。
当我们添加 android:background 参数时，让我们为每个 ImageButton 添加相同的标记参数，并使用值 #00000000 ，这是透明的值，因为额外的两个零控制透明度。同样，我们将在下一章图形中学习为什么会这样。
接下来，我们将更改 launcher_ic 占位符图形(最后！)，带有我们的通用攻击图形名称，这些名称现在位于我们的四个分辨率特定的可绘制文件夹中。如果你在包资源管理器 /res/drawable 文件夹中没有看到它们的名字，如图图 6-14 所示，那么你可能忘记了在之前使用 Windows 资源管理器将文件复制到正确的文件夹中之后，右击 Hello_World 文件夹并刷新IDE 在硬盘上的项目文件夹的“视图”。
一旦 Eclipse 可以“看到”新文件，将每个 ImageButton 的启动器图标 android:src 参数引用更改为新文件名的第一部分，如图图 6-14 所示。为了更专业地分隔屏幕上的 ImageButton UI 元素，添加一个初始值为 9dp 的 android:layout_margin 参数，以便在我们为 ImageButton 使用的每个新图形周围留出一些空间(没有双关语，至少现在没有)。
最后，让我们使用参数助手对话框来查找一个音效标签参数，方法是键入 android ，然后按下冒号键。向下滚动并搜索与启用 ImageButton 声音效果相关的标记参数。双击添加Android:soundEffectsEnabled参数，一旦在列表中找到，将其值设置为 true。。确保您为五个新的 ImageButton 标记中的每一个标记进行了所有四个更改和添加，如图图 6-14 和图 6-15 所示。接下来，我们将添加文本。
图 6-15。按下朝左的人字形<字符来调用 Eclipse 中的添加标签助手对话框
向我们的 XML 标记添加屏幕标题文本视图
为了确保用户知道当他们到达这个攻击 UI 屏幕时要做什么，让我们在我们的 UI 屏幕顶部添加一个标题来告诉用户当他们在这个屏幕上时要采取什么行动。在第一个 ImageButton 标签前添加一行空格(按回车键)，如图图 6-15 所示，然后按键盘上的朝左的人字形<键(Shift-Comma) ，注意在 Eclipse 中会弹出一个添加标签助手对话框。
找到 TextView 标签，双击将其添加到您的 XML 标记中。请注意，这里有数百个标签，足以装满几本书，您可以使用这个弹出助手来探索一些不常用的标签。在本书中，我们将介绍您最常用来实现文本、图像、视频、动画 UI 元素等的标签，但是当您有时间时，可以通过这个很酷的功能随意探索更适合的 UI 元素。现在让我们配置我们的文本视图标题。
因为我们的 UI 屏幕背景现在是黑色的，让我们通过使用 android:textColor 参数和一个数据值 #FFFFFF，使我们的标题文本变成白色，我们很快就会知道它是白色的十六进制值。使用 android:textSize 参数将您的文本大小设置为 18 标准像素( sp ，并确保添加 wrap_content 的标准 layout_width 和 layout_height 参数设置；如果您忘记了这些，Eclipse 将标记您的 XML。
最后，在 strings.xml 文件中添加一个 attack_planet_caption 标记，它设置这个值:使用图标选择攻击类型，然后通过一个 android:text 参数和一个@ strings/Attack _ planet _ caption**值引用它。
要预览到目前为止您所做的工作，您可以使用编辑窗格底部的图形布局选项卡，或者使用作为 Android 应用运行工作流程来获得您的 UI 屏幕在 Android 智能手机上的更精确的渲染视图。随着这个攻击 UI 屏幕变得更加复杂和详细，您会看到图形布局预览只是一个估计，并没有提供像模拟器一样好的预览。
正如您将在预览中看到的，UI 屏幕在顶部和左侧有元素，但有很多黑色空间，不是我们在本章中试图实现的专业外观的 UI 屏幕，因此我们需要在每个 ImageButton 图标的右侧添加一些文本，以告诉用户每个图标的作用。
使用嵌套的 LinearLayout 容器创建更复杂的用户界面设计
为了创建一个更复杂的 UI，我们将需要遵循一个类似于我们将配置星球 UI 屏幕提升到下一个级别的工作流程，因此让我们在一个父级水平 LinearLayout 中添加两个嵌套的垂直linear layout(一个用于 ImageButtons，另一个用于 TextViews)。
将顶部的 LinearLayout 标签复制到其下，并将第一个(现在是父级)LinearLayout 上的方向参数更改为水平。删除第二个 LinearLayout 的 android:background 参数，因为第一个(父)现在设置 UI 屏幕的全局参数。将第二个 LinearLayout 的 android:layout_width 从 match_parent 更改为 70dp ，因为我们现在希望左边的 LinearLayout 符合我们的 ImageButtons。
请记住，确保在 XML 定义的底部有两个嵌套的 LinearLayout 结束标记，然后复制第二个 LinearLayout 标记并将其粘贴到倒数第二个 LinearLayout 结束标记之后，以创建第三个 LinearLayout 标记。将 TextView UI 元素复制到第二个嵌套的垂直 LinearLayout 容器中，因为该容器将保存我们的 TextView UI 元素。同样，确保你的第二个嵌套的 LinearLayout 容器在 XML UI 定义的底部也有一个结束标签，并缩进嵌套的 linear layout，如图 6-16 所示。
图 6-16。嵌套 LinearLayout 容器以添加到 TextView 标签中来标记我们的攻击星球选项图标
接下来，让我们复制下面的Attack _ planet _ captionTextView 来创建一个Attack _ planet _ bombTextView 标签，我们可以为一些更大更丰富的文本进行配置，以标记每个攻击 ImageButton 图标的功能。将 android:textColor 值更改为 #FFFFBB 使其变为黄色并将 android:textSize 值更改为 25dp 使其比标题文本大 40%。添加一个带有 18dp 值的Android:layout _ margin top标签，将文本从屏幕标题下推至第一个 ImageButton 旁边。
现在，通过你的图形布局和运行 Android 应用工作进程来渲染UI 屏幕，看看它看起来怎么样。在我们将这个 TextView 标签复制四次以创建我们的其他 TextView 标签之前，我们仍然需要一点微调，所以让我们接下来做这件事。
微调我们的用户界面设计，给我们的攻击图标添加文本标签
添加一个Android:layout _ margin left参数，其设备无关像素(DIP，或 DP)值为 8dp ，以将我们的文本从 ImageView 图标向用户界面屏幕的中心推一点。
现在我们准备复制并粘贴这个attack _ planet _ bombTextView 四次，创建我们的其他 attack _ planet TextViews。确保将 android:text 参数更改为引用您在 strings.xml 文件中创建的< string >标签常量，这些常量根据每个文本视图的功能为它们创建文本标签(参见图 6-17 )。
图 6-17。Nexus S 模拟器中的攻击星球 UI 屏幕预览
将复制的 TextView 标签的 android:layout_marginTop 参数调整到 36dp 到 40dp 之间，使标签靠近每个图标图形的中心，如图图 6-17 所示。这是一个迭代的过程，您可以调整这些值，并在模拟器中来回移动，直到您获得将每个标签放在屏幕上每个图标中间的值。接下来，更改 textColor 值以设置从黄色到紫色的颜色渐变。
接下来，我们需要升级我们的AttackPlanet.java活动子类中的 Java 代码，以实现我们尚未实现的四个 ImageButton 对象。请记住，我们之前已经对 exitButton ImageButton 对象进行了编码，并让它调用我们的 Activity finish()方法，Java 代码我们将保持不变，实际上，我们将复制它，然后再粘贴四次，以创建我们的其他四个 ImageButton 对象。
添加 Java 代码来整合我们的攻击星球屏幕用户界面元素
复制包含 ImageButton 对象创建的代码块，并将。setOnClickListener 代码块在 exitButton 对象设置代码下实现了四次 OnClickListener()和 onClick()方法。
将 exitButton 代码保留为第五个也是最后一个代码块，转到第一个代码块，在所有三个位置(名称、引用和方法调用)将 exitButton 更改为 bombButton 。接下来，让我们将 finish() 方法调用改为 Toast.makeText() 方法调用，它告诉我们的用户当他们单击 ImageButton 图标图形时做了什么。
我们的。makeText() Toast 对象方法有一个 AttackPlanet 类上下文，一个炸弹掉了！文本消息和短的显示长度持续时间，如下所示:
Toast.makeText(AttackPlanet.this, "Bombs Away!", Toast.LENGTH_SHORT).show();
接下来，执行相同的工作流程，用 onClick()事件处理程序创建 invadeButton 、 infectButton、和 laserButton ImageButton 对象，这些对象向部队发送、病毒传播、和激光发射！分别消息。
图 6-18 显示了完成后五个代码块的样子！
图 6-18。在 AttackPlanet.java 为每个攻击方法添加 ImageButton 对象和 onClick()处理程序
现在，我们可以完整地测试我们的攻击星球活动用户界面。
右键单击项目文件夹并作为 Android 应用运行，以启动 Nexus S 模拟器。加载后，单击菜单按钮并选择攻击星球菜单项，在攻击星球 UI 屏幕出现后，单击前四个 ImageButton 图标图形中的每一个，并观看您的祝酒词消息完美地出现在 UI 屏幕的底部。然后单击第五个退出图像按钮，观看屏幕退出并返回您的家！
我们现在已经实现了 XML 标记和 Java 代码，使我们的整个 Hello World 应用在基本用户界面设计级别和导航级别上 100%可用。我们准备在本书接下来的几节中实现一些非常酷的富媒体元素。
我们将在接下来的几章中添加这些新的媒体元素，包括图形设计、动画、数字视频和数字音频。这应该会很有趣，因为我们现在要让这个应用对我们所有的最终用户来说真的很有趣，像游戏一样！
摘要
在本章中，我们仔细研究了一些最常用的 Android android.widget 包用户界面类，并在我们的 Java 代码中将它们实现为我们自己的 Hello World 应用的功能 UI 对象。我们了解到 UI 元素窗口小部件是从古老的 Android 视图类中派生出来的子类，我们看了看 Android 应用开发项目中最重要和最普遍使用的 UI 窗口小部件类。
在这一章中，我们学习了更多关于 Eclipse 特性的知识，特别是我们如何简单地通过在一个空行中键入 < (朝左的人字形字符)，键入 android 关键字，然后键入冒号键激活器，就可以调出标签助手对话框和参数助手对话框。这是一个很好的方式来探索 Android 操作系统中在任何给定时间(在任何给定的 API 级别安装上)可用的数百个标签和参数。
对于我们的新星球活动，我们仔细研究了 Android 的 ImageView 类，以及 Android 的 TextView 和 Button 类，然后我们使用 XML 中的一些自定义参数在更高级的层次上实现了这些 UI 元素类型。然后，我们在 Java 代码库中实例化这些 UI 元素对象中的每一个，为新的行星选择屏幕创建一个高度可视化的用户界面，我们需要用户使用该界面在我们的应用中选择和创建新的行星。
对于我们的 Configure planet 活动，我们利用了 Android 按钮类，以及通过 Android EditText 类的文本编辑字段，然后我们用 XML 中的自定义参数实现了这些 UI 元素类型中的每一个，然后用 Java 实例化它们，以创建我们的数据输入用户界面，用于我们的用户能够在我们的应用中定义 Planet 属性所需的 Planet 配置数据输入屏幕。
对于我们的 Travel Planet 活动，我们查看了 Android VideoView 类，我们在 XML 中实现了一些高级参数，以便我们的 VideoView 可以被点击和长时间点击(或触摸和长时间点击)来实现功能。我们还使用一个 android:keepScreenOn 参数来确保任何 Android 设备屏幕在我们的视频内容播放过程中保持打开。最后，我们用 Java 实例化了我们的 VideoView 对象，并实现了一个 OnTouchListener() 和 onTouch() 事件处理程序，为我们的用户在我们的应用中旅行到他们的星球表面所需的星际旅行数字视频播放屏幕创建了一个光滑的用户界面。
对于我们的攻击星球活动，我们研究了 Android ImageButton 类，该类允许 Android 开发人员实现由图像和动画等图形素材构成的按钮。正如你可能想象的那样，我们将在下一章图形设计中更详细地讨论这个小部件，但是我们想在讨论这本书的这一部分之前先介绍一下基础知识。我们在 ImageButtons 中添加了自定义按钮图标图形，以替换我们正在使用的占位符图像，并添加了其他参数，为我们使该屏幕支持声音效果和合成做好准备，我们将在未来的章节中学习这些内容。然后，我们在 Java 代码中连接这些 ImageButtons，使这个 UI 屏幕在用户界面设计上既实用又专业。
在本章中，我们学习了 Android Toast 类和对象，以及如何实现 Toast，向我们的用户广播反馈消息，向他们提供可视化更新，告诉他们在他们使用我们的用户界面屏幕活动子类期间，我们的应用正在执行什么任务。
在下一章中，我们将学习在 Android 应用中使用图形，我们将开始为我们的 Hello World Android 应用定制屏幕布局和用户界面，使用 XML 标记代码(大部分)以及 Java 代码来定义和实现这些令人惊叹的用户体验和用户界面元素。接下来的几章将会非常有趣，因为我们将会使我们的应用具有商业可行性！**
版权属于：月萌API www.moonapi.com，转载请注明出处
