八、Android 中的组合：高级图形用户界面设计
在本章中，我们将采用在前一章中掌握的基本数字成像概念，并构建更复杂的数字成像构造，以将更高级的基于图形设计(即基于位图)的用户界面元素添加到 Hello World 应用中。这将帮助你使你的应用在视觉上引人入胜，无论它是游戏、商业应用、实用应用，还是(希望)全新的、前所未有的东西。
我们讨论多状态用户界面元素，它改变用户在使用 UI 时看到的图像，并向最终用户提供关于他们正在触摸(或正在点击)什么的视觉反馈，以及哪个用户界面元素是最后使用的。我们将各种 UI 元素与其他图形设计元素组合在一起，创造出高级的、无缝的视觉效果；跨越几个不同标签及其参数设置的效果，但看起来像一个 UI 实体。
我们还完成了每个应用活动屏幕用户界面的设计和外观，增加了独特的(非标准)UI 元素，使我们的应用在所有视觉层次上都完全自定义。许多 Android 开发人员只实现和使用标准的用户界面小部件，因此他们的应用只具有标准的 Android 外观和感觉，而没有使用任何基于图像的视觉修改，这将使他们的 Android 应用与市场上的其他应用相去甚远。
多状态 UI 元素:正常、按下和聚焦状态
让我们将攻击星球活动用户界面屏幕上的 ImageButton 用户界面元素升级到下一个级别，并将其更改为多状态图像按钮。多态图像按钮交互改变按钮图形，这取决于用户正在做什么(或者刚刚做了什么)来与它们交互。在你的用户界面设计中加入一个交互式的用户界面元素，可以让用户对你的应用所展现的专业水平有一个全新的认识。
多状态图像按钮中的 正常状态是您第一次到达用户界面屏幕时看到的图形元素。在我们的攻击星球用户界面屏幕中，这些按钮的正常状态是我们已经有的按钮图标图形。你也可以称这个按钮状态为默认按钮图像状态。
每当用户触摸按钮时，多状态图像按钮中的 按下状态就会显示出来，这意味着用户在触摸屏上的手指触摸或导航按钮按下动作(如果用户使用导航键)。对于我们新的 AttackPlanet 多态 ImageButton 按钮按下的图像元素，让我们在图标周围添加一个金箍。通过这种方式，当用户触摸该用户界面屏幕上的攻击方法图标时，一个金环环绕该图标，显示 UI 元素正被触摸的交互反馈。
多状态按钮中的聚焦 状态发生在用户释放(停止触摸)该按钮并使用该用户界面元素时。用户界面元素被称为具有焦点，因为用户正在使用它，并且它不会失去焦点，直到用户选择另一个用户界面元素(触摸另一个 ImageButton UI 元素)或者附加到该 UI 元素的操作完成，例如我们的 Toast 消息当前在我们的 Java 代码中充当占位符。
我们利用图像按钮图标周围的银色圆圈来显示哪个按钮具有焦点，并且当前正在使用，因此哪个按钮是用户最后选择使用的。首先，我们需要为三种图像状态中的每一种创建 ImageButton 源文件，我们的正常状态已经创建好了，所以我们只需要使用 GIMP 2.8 中的一些高级多层合成技术来创建按下和聚焦的按钮状态。
创建我们的 ImageButton 多态图像源文件
让我们启动 GIMP 2.8，现在为我们的四个攻击模式图标，为 Android 要求的四个像素密度中的每一个都这样做。这是四个攻击模式图像按钮乘以四个像素密度，乘以两个按钮状态，这等于我们需要创建的三十二个不同的图像素材。如果你想做好，开发一个专业的 Android 应用无论如何都不是一件容易的事情。
添加我们已经拥有的四种像素密度的四个图像按钮，我们的四个攻击模式多状态按钮有 48 个图像。最后，为我们的退出攻击模式按钮添加另外四个像素密度素材，并且您有实施我们的攻击行星屏幕所需的 52 单独的数字图像素材，请注意，这不包括背景stars.png数字图像，这将这一个用户界面屏幕的总数带到 53 为每个屏幕密度创建这一高级用户界面屏幕设计所需的数字图像素材。我以为这是一本入门书！一旦我们读完这本书，你会发现你已经使用了数百种资源来开发你的 Android 应用！
GIMP 启动后，使用文件
打开菜单序列在您的工作区文件夹中的 Android Hello_World 项目文件夹的 drawable-XHDPI 文件夹中找到您的 attackinvade 96 像素图形。
先设置好 GIMP 的工作环境，使用视图
缩放 2:1 菜单序列将视图设置为 200%，，如图图 8-1 所示。
图 8-1。启动 GIMP 2.8，缩放至 200%，然后点击右边的图层标签(看起来像堆叠的白色牛皮纸)
接下来，点击右上角的图层标签(看起来像堆叠的白色牛皮纸)，这样你可以看到我们的图像目前有一个名为【attackinvade.png】T2 的单层，这是我们刚刚打开的索引色 PNG8 士兵的脸图标图像。
如果您单击通道选项卡(一个堆叠的 RGB 颜色通道图标)，您将看到一个包含 8 位图像数据的索引颜色通道。如果我们在图像处于索引颜色模式时添加我们的环层，环将只有几种颜色来描绘其 3D 金属外观，并且不会像我们希望的那样看起来像照片一样真实。我们需要做的是将我们的图像转换成真彩色模式，然后导入下一层图像合成功能。
在 GIMP 2.8 中，您的图像当前设置使用的色深可以在模式子菜单下的图像菜单中找到。如果您访问此图像模式菜单序列，您将看到几个关键的图像模式，包括 RGB (真彩色模式)灰度(单色模式)和索引彩色模式，您将看到这是当前选择的模式(该子菜单项旁边的点表示当前模式)。
让我们改变我们的图像的颜色模式，然后再继续我们的工作过程，这样我们就可以从我们在这个过程中可能添加的任何额外的真彩色图像层中获得最高的视觉效果。要将当前图像的颜色深度从索引(8 位)颜色模式更改为 RGB (32 位)颜色模式，选择图 8-2 所示的图像模式 RGB 菜单序列，将图像模式从 8 位更改为 32 位颜色。如果我们不这样做，我们添加的任何层将使用 256 色调色板的图像，这是从初始图像层(数据)。这将限制以后导入的任何图像(图层)使用这 256 种颜色；这将严重影响我们的视觉质量，尤其是当我们添加更多的层。
图 8-2。使用图像模式 RGB 菜单序列将图像模式从索引色转换为真彩色
一旦我们调用了图像模式 RGB 菜单序列，将我们的 GIMP 图像编辑环境切换到真彩色模式，我们可以再次单击右侧的通道选项卡，可以看到我们现在已经从一个通道(图像的 256 色索引调色板)变为一个图像编辑环境，其中我们有四个颜色通道(或三个颜色通道和一个透明通道)。这在图 8-3 中显示，由于我们的层被选中(以蓝色突出显示)用于图 8-1 中，所以我们的四个通道也被选中，以保持从层编辑模式(tab)到通道编辑模式(tab)的选择。
图 8-3。点击右边显示的通道选项卡，确认现在有红色、绿色、蓝色和阿尔法通道
图像编辑软件是模态，也就是说，无论工具、颜色和编辑模式在任何给定点被设置和激活，都会影响当你在图像上使用当前工具时会发生什么。因此，如果您处于图层模式，并且您在图层模式下编辑图像，这将影响图像中所有通道的数据。但是，如果您只想编辑图像的绿色通道上的数据，您可以切换到通道编辑模式进行编辑，方法是在使用这些编辑工具之前，单击通道选项卡和绿色通道(任何编辑工具都可以在任何模式下使用)。
这种模态软件操作在将软件特性组合到用户想要创建的任何工具集中的能力方面更加强大。因此，它产生更专业的结果，但也更难以有效地使用。在使用模态软件包的过程中，用户必须始终跟踪在任何给定时间什么模式、设置和工具当前是活动的。这些编辑模式、工具和设置实时结合，最终创建所使用的精确编辑功能。
导入我们的金环图像进行合成
现在我们准备进入正题，将我们的金箍棒图像导入到它自己的图层中，来设置我们的图像合成操作。为此，我们将使用 GIMP 的文件打开为图层……菜单序列，如图图 8-4 所示。正如工具提示告诉我们的，这将在我们的图层选项卡中打开一个图像文件作为图层。选择此菜单选项后，您会看到一个对话框，让您找到名为GoldHoop96.png的图像素材，这是一个 truecolor PNG32 文件，带有定义透明度的 alpha 通道。
图 8-4。使用导入环层，文件打开为层…菜单序列
选择此文件并打开它后，它会作为“层”标签中自己的层合并到项目中。通道选项卡显示合并的 RGBA 通道数据，如图 8-5 所示，您的图像视图显示无缝合成在士兵脸上的金箍。接下来，我们需要将这个包含士兵面部的新图层向下移动，这样面部就会移动到环的中心。我们这样做是为了让我们的士兵看起来像是在透过铁环看，这样眼睛就不会被遮住。值得注意的是，GIMP 使用 RGBA 通道排序，而 Android 使用 ARGB，也就是说，当在 Android 中以十六进制指定通道时，前两个位置是 alpha 值，而不是后两个位置，就像使用 Photoshop 或 GIMP 的人可能会简单地假设的那样。
图 8-5。导入箍层，并在 RGBA 通道中进行数据合并，如右边通道选项卡所示
通过移动图层位置将士兵的脸放在金环的中心
要将面部层向下移动到环中，选择带有面部图形的下层，如图 8-6 中的蓝色所示，然后也单击移动工具(四箭头十字，位于第二行中间)来设置模态编辑操作，以移动(移动工具模式)攻击入侵层(层编辑模式)。
图 8-6。选择图层标签和移动工具，将面向下移动到环中，这样顶部与环的内部相切
一旦你做到了这一点，你就可以用你的鼠标点击并拖动正面直接进入环的中心，然后，如果你喜欢，你可以使用键盘上的左右箭头键将图像移动到适当的位置，一次一个像素。这个微调你的图像居中操作，直到合成图像看起来像图 8-6 中的一样。
擦除金环外不需要的像素
现在，我们所要做的就是选择图 8-7 (第四排第二个图标)所示的橡皮擦工具，将 GIMP 置于擦除模式，擦除士兵脸部和衬衫在铁环外的部分。请注意，我们保持底部(面部)图层处于选中状态，因此我们的图像编辑软件模式包括:橡皮擦工具模式、 RGB 真彩色模式和图层编辑模式设置为 attackinvade.png 图像图层(仅在该图层上将橡皮擦工具编辑同时应用于所有四个通道)。
图 8-7。使用橡皮擦工具移除士兵图像中超出环圈的部分，如图所示
导出我们的攻击按下按钮图标状态
现在，我们准备好将 导出我们的 attackinvadepress 按钮图标状态到我们的 drawable-xhdpi 文件夹中，我们的三个图像状态按钮中的两个(正常和按下)将准备好用 XML 代码实现。
为此，我们使用 GIMP 的文件导出菜单序列，将文件命名为attackinvadepress.png、，最后，找到我们的workspace/Hello _ World/RES/drawable-xhdpi文件夹，我们要在其中保存这个 96 像素高分辨率(超高密度像素图像)的数字图像文件。在所有这些文件名、文件夹路径名和图像类型(。png 扩展名)信息，则可以点击导出按钮完成此操作，如图图 8-8 所示。
图 8-8。使用导出图像对话框保存真彩色。drawable-xhdpi 文件夹中名为 attackinvaderpress.png 的 png 文件
请注意，因为我们的 GIMP 颜色深度模式设置为 truecolor RGB，所以我们现在使用 alpha 通道导出 PNG32 truecolor PNG 文件，但我们的文件大小仅增加了一倍，从 8K 增加到 16K，因为我们删除(擦除)了大量图像数据，并且因为 PNG32 压缩算法非常高效。
如果可以很好地优化数据足迹，那么几乎总是希望使用 PNG32 格式而不是 PNG8 格式，因为在 PNG32 文件中，图像数据的质量水平以及 alpha 通道比在 PNG8 文件中好得多(使用了更多的颜色和透明度值)。
创建我们的 attackinvadefocus 图像按钮状态
最后，我们需要创建我们的 attackinvadefocus 图像按钮状态。这要容易得多，因为我们的第三个按钮状态的大部分图像编辑工作过程已经为我们的 attackimagepress 图像按钮状态完成了，包括改变图像模式，移动士兵的脸，以及擦除圆圈外围的像素。我们现在要做的就是加一个银箍来表示专注。
使用文件打开为图层……功能，如图图 8-4 所示，通过找到SilverHoop96.png图像，并将其导入到我们的 GIMP 2.8.4 项目中，将另一个图层添加到我们的图像合成堆栈中。
因为结果看起来很棒，如图 8-9 所示，我们可以继续再次使用我们的文件导出工作流程，如图图 8-8 所示，只是这一次，使用文件名:attackimagefocus.png，并使用相同的 drawable-xhdpi 文件夹位置，因为这是一个 96 像素的超高密度像素图像文件。
图 8-9。使用文件打开为层…菜单序列打开 SilverHoop.png 并将其添加到层堆栈上
创建我们的其他分辨率密度多态图像按钮图标
要创建 attackinvadepress 和 attackinvadefocus 的其他三种尺寸(80、64 和 48 像素)版本，请遵循图 7-17 中上一章概述的工作流程，使用图像缩放图像… 菜单序列和图像缩放对话框，将图像从 96 像素均匀缩放到 80 像素(之后为 96 像素到 64 像素和 96 像素到 48 像素)。确保在每个工作过程中点击 SilverHoop96 图层上的眼睛图标关闭其可见性，然后使用文件导出将 drawable-hdpi 中的文件保存为attackinvadepress.png。
一旦完成，你可以再次点击眼睛图标，重新打开 SilverHoop96 层的可见性，并再次执行文件导出操作，在你的 drawable-hdpi 文件夹中创建一个attackinvadefocus.png。一旦你生成了这两个文件，使用编辑撤销菜单序列回到你的 96 像素版本，并做这里概述的整个工作过程来创建 64 像素 MDPI 和 48 像素 LDPI 入侵图标素材。需要注意的是，在只有触摸屏的 Android 设备上(比如我们的 Nexus S 模拟器)不使用焦点按钮状态。这种聚焦状态仅在使用轨迹球、小键盘或键盘导航的 Android 设备上使用。一旦用户触摸了触摸屏(如果设备有触摸屏的话)，Android 进入触摸模式，在这种操作模式下，不会使用聚焦按钮状态，但它仍然会安装并在不使用触摸屏的其他 Android 设备类型(如 ITV)上工作。
在 XML 中实现多态按钮:Android 的选择器标签
一旦您完成了上一节中概述的其他三个图像按钮图标(炸弹、病毒和激光)的工作过程，并创建了我们将需要在攻击星球活动屏幕中实现多态 ImageButton UI 元素的按下和聚焦状态的所有 32 个(4 x 4 x 2)图像，我们就可以开始编写实现 <选择器> 标记的 XML 文件(全部四个)。选择器标签允许 Android 从三个不同的按钮图像状态 <项目> 标签中进行选择，这些标签来自我们现在在 drawable resource 文件夹中的图像素材。请记住，我们的正常或默认状态图像已经完成，因此这个活动用户界面屏幕总共需要 48 个多态图像素材，加上 4 个 attackexit 图标的特定分辨率图像，因此总共有 52 个图像，当然不包括我们的 stars 背景图像。
创建一个新的资源类型的 Android XML 文件:Drawable
我们要做的第一件事是创建一个新的 Android XML 文件。右键单击你的 Hello_World 项目的 drawable-xhdpi 文件夹，然后选择新建 Android XML 文件创建向导对话框。该对话框如图 8-10 中的所示，并自动为您创建 XML 文件。
图 8-10。用一个<选择器>根元素创建一个新的 Android XML 文件
将资源类型设置为可提取，将项目设置为 Hello_World ，并将文件命名为:attack _ invasive。因为 Android 在 XML 和 Java 代码中不使用文件扩展名，所以确保不要将文件命名为 attackinvade，因为这是我们的 PNG8 文件名。因为 Android 文件名中允许使用下划线，所以在单词 attack 和 invasive 之间使用下划线，以模拟这些单词之间的空格字符。
接下来，找到名为选择器的根元素，并选择它作为我们的父标签(根元素)容器，最后点击完成按钮创建attack _ invasive . XML文件。在图 8-11 中需要注意的是，Android 将 attack _ invasive . XML 文件放在了一个 /res/drawable/ 文件夹中，这是作为新的 Android XML 文件操作的一部分而创建的。这是因为该文件引用了多个分辨率资源，所以它只在 /res/drawable 文件夹中出现一次，而不是在每个 drawable-dpi 文件夹中。
图 8-11。多态 ImageButton 的 XML 标记:在 attack _ invasive . XML 中的<选择器>标签内添加<项目>标签
将 Android 标签添加到 attack _ invasive . xml 多态 XML 定义中
现在我们已经在编辑窗格中打开了 attack _ invasive . XML 文件，让我们添加三个指定三种图像状态的标签。项目标签包含一个用于状态定义的参数和一个用于可绘制素材定义的参数。按下并聚焦的多状态项目标签编码如下:
<item android:state_pressed="true" android:drawable="@drawable/attackinvadepress" />
<item android:state_focused="true" android:drawable="@drawable/attackinvadefocus" />
默认或正常的按钮状态项标签没有多态参数，只有图像的可绘制素材引用参数，这个<项>标签是最后添加的，如图图 8-11 所示。
在这种情况下，选择器容器中这些标签的顺序很重要，因为这是评估这些项目的顺序，很像我们在 Java 代码中使用的 select (case)语句。
从我们的活动屏幕布局 XML 引用我们新的多态 ImageButton XML 定义
我们需要做的最后一件事是打开我们的 activity_attack.xml 用户界面屏幕布局定义的选项卡，并将 attackinvade 按钮的引用改为指向attack _ invasive(XML)而不是 attackinvade (PNG)。这就是 Android 实现 ImageButton 所经历的逻辑链，现在它在如何处理用户界面元素的使用中包括了多状态 XML 选择器逻辑。
为了实现其他三个炸弹、病毒和激光攻击模式多状态按钮，我们必须再经历三次图 8-10 和图 8-11 所示的工作过程，添加 XML <选择器>对 attack_bomb.xml、attack_virus.xml 和 attack_laser.xml 多状态图像素材定义 XML 文件的定义。
每个选择器 XML 文件必须指向 drawable 子文件夹中正确的 PNG8(正常)和 PNG32(按下和聚焦)数字图像素材文件名，然后我们可以在 activity_attack XML 文件中引用这些新的 XML 文件定义，而不是引用默认的图像状态 PNG8 文件名。
一旦我们的四个攻击模式按钮中的每一个都完成了所有这些工作过程，我们的攻击星球用户界面屏幕将完全转换为多状态 ImageButton 用户界面元素！
请记住，当您接下来使用 Nexus S 模拟器测试用户界面屏幕时，聚焦图像状态不会显示，因为我们正在模拟的 Android 设备是一种仅具有触摸屏的消费电子产品。
图 8-12 显示了一个 Eclipse IDE，在包浏览器窗格的 /res/drawable 文件夹中(用蓝色突出显示)有我们刚刚创建的 attack_bomb、attack _ invasive、attack_laser 和 attack_virus 文件的 XML 文件(还要注意这些文件的标签仍然在 Eclipse 主编辑窗格的顶部打开)。
图 8-12。activity _ attack . xml 中的新 XML 标记引用了新的多状态图像按钮选择器 XML 文件
在图 8-12 中，我们的 activity_attack 用户界面屏幕定义的 XML 标记还显示，我们已经更改了每个 ImageButton 标签的所有 android:src 参数，以指向 XML 文件名，在每个文件名中间使用下划线，而不是指向中间不使用下划线字符的 PNG8 文件名。
最后，我们需要测试应用，以及我们新的多状态 ImageButton 用户界面元素，通过作为 Android 应用运行的工作流程。启动 Nexus S 模拟器，点击《入侵星球》的士兵脸图标，当你点击并按住鼠标左键(通过鼠标按下操作)时，你会看到士兵脸移动到环的中心，如图图 8-13 所示。
图 8-13。在 Nexus S 模拟器中运行我们的应用，测试我们的攻击外观 ImageButton 多状态图像按钮
确保并测试所有四个攻击模式按钮图标，以确保您已经正确实现了所有活动 XML 标记和 XML 标记以及数字图像引用。
现在是时候将我们的配置行星用户界面屏幕提升到一个更专业的水平了，通过添加一个与空间相关的背景图像，然后改变我们的用户界面元素在新的碰撞星系图像上的合成方式，以便我们增强这个新 UI 设计的对比度(可读性)。
合成我们的 UI 元素:Alpha、Color、Gravity 和 TextStyle
让我们把我们的“配置一个星球”用户界面提升到下一个层次，因为这是关于 Android 图形设计合成的章节。首先，我们将添加一个视觉上令人印象深刻的背景，称为空间，它显示了两个碰撞的星系。接下来，我们将为用户界面屏幕元素标签添加新的合成和桌面发布(DTP)参数，以最大化它们的对比度(可见性),并使用新的背景以及新的字体、间距、重力和 alpha 效果来改善 UI 的外观。
首先，像以前一样，让我们将 space1280x720.png、space1024x600.png、800x480.png 空间和 480x320.png 空间文件复制到 XHDPI、HDPI、MDPI 和 LDPI 文件夹中，然后将它们全部重命名为space.png，这是我们稍后将在代码中引用的文件名。
修改 activity_config XML 参数，将空间背景图像与 UI 元素合成
我们要在我们的 activity_config.xml 文件中做的第一件事情是使用 @drawable/space 引用参数添加一个 android:background 参数指向我们新安装的space.png文件，如图图 8-14 所示。在添加新的数字图像背景后，如果您单击编辑窗格底部的图形布局选项卡，您将会看到我们现有的用户界面元素已经基本消失，因此我们必须对当前的 XML 标记进行一些相当剧烈的参数更改，以使我们的 UI 在这个空间背景下看起来非常专业。
图 8-14。编辑我们的 LinearLayout，添加 space.png 背景和按钮标签，添加白色 textColor 值
先从按钮标签开始，添加一个 android:textColor 参数，设置为 #FFFFFF 的白的十六进制值，如图图 8-14 所示。再一次，让我们使用图形布局选项卡作为快速简单的屏幕预览，看看我们的按钮是否变得更容易阅读。正如你在图 8-15 中看到的，这解决了按钮 UI 元素的问题，它们看起来很棒。然而， EditText 文本字段几乎不可能被识别，这将需要大量新的标签参数来使它们既可读又最终在外观上专业。
图 8-15。在图形布局编辑器中预览我们的新按钮和背景参数
使用背景色和 Alpha 透明度提高我们的编辑文本字段的对比度
为了让我们的 EditText 文本编辑字段与这个令人惊叹的碰撞星系背景一起工作，我们将不得不使用明亮的背景颜色(白色)、一些不透明度(alpha 通道)以允许星星穿过，以及一些更好的字体、对齐和编辑文本字段间距来匹配(平衡)屏幕布局对面的按钮间距。
我们想要添加的第一个 EditText 标记参数是 android:background 参数，我们将它设置为白色的十六进制颜色值(#FFFFFF ) ，这样我们就可以看到我们在这个深色背景上做了什么。为了使这个白色背景有点像半透明，让我们也添加一个 android:alpha 参数，它使用从零(透明)到一(不透明)的十进制范围来控制 UI 元素的不透明度 (alpha 通道值)。我们使用 50%的透明度设置 0.5 开始。现在我们可以看到我们的文本字段，接下来我们可以调整我们的Android:layout _ margin top参数来隔开它们。
对于第一个 EditText 标签，这相当于 13dp ，其余的需要一个额外的 10 dp ，或者一个 23dp 的最终设置，以使它们与每个按钮完全相对，正如你在图 8-16 中的 XML 标记中看到的。
图 8-16。编辑我们的 LinearLayout 容器标签和 EditText 标签及其参数
因此，现在我们的文本字段从上到下与它们各自的按钮完全隔开，我们需要从左到右隔开它们。他们正在触摸 UI 屏幕的右侧，这看起来很不专业。我们来调整一下，给 UI 屏幕设计增加一些对称性。
因为我们希望将所有 EditText 字段移动一个平均距离 5dp ，类似于屏幕另一侧按钮上的间距，所以让我们在保存它们的 LinearLayout 容器中用一个单个标签来完成，而不是添加六个标签(每个 EditText 元素标签一个)。
一旦你添加了如图图 8-16 所示的Android:Layout _ margin right = " 5dp "，点击你的图形布局标签，看看它看起来怎么样。为了更精确地了解它将如何排列，使用作为 Android 应用运行工作流程，并在 Nexus S 模拟器中查看当前的 UI 设计；你会发现它开始变得真正令人惊叹。
格式化 EditText UI 元素中的文本特征
现在我们已经将 EditText UI 容器与屏幕及其背景图像分隔开来并完美地合成在一起，让我们设置一些参数来优化包含在文本字段中的文本。对于数字数据输入文本字段，让我们指定一种等宽字体，这使得数字输入特别易读；这是通过Android:typeface = " monospace "参数实现的。
为了让文本在屏幕上更易读，我们还可以添加一个 android:textStyle 参数，设置字体使用粗体文本，使字符更粗，更容易在较小的显示器上阅读。最后，为了使文本在文本字段内看起来间隔均匀，并且在显示器的右侧对称，让我们使用一个中心参数将文本在每个编辑文本数据输入字段内居中。这通过使用设置为中心的 android:gravity 参数或 android:gravity="center" 标记来实现。Android gravity 参数以 Android 中的任何东西为中心，而不仅仅是文本，所以熟悉这个参数，并在其他类型的用户界面小部件和标签中寻找它，因为 gravity 可能非常有用。
现在是时候使用我们的 Run As Android Application 工作流程，并在 Nexus S 模拟器中预览所有这些用户界面元素标签参数修改和优化的结果。正如您在图 8-17 中看到的，配置活动用户界面屏幕看起来真的开始专业了。
图 8-17。在 Nexus S 模拟器中预览我们完成的配置活动屏幕
接下来，让我们通过添加自定义背景图像和我们所在星球的图像视图，将我们的 Hello World 应用主屏幕提升到下一个级别。我们将在稍后的动画章节中定制这些。最后，我们将为文本着色，以匹配星系背景图像中耀眼的等离子体光颜色。
升级我们的应用主屏幕:添加 ImageView 标签和 textColor 参数
我们需要做的第一件事是设置我们的全新主屏幕，将 galaxy480x320.png、galaxy800x480.png、galaxy1024x600.png 和 galaxy1280x720.png 的图像复制到它们各自的可绘制子文件夹中，就像我们之前做的几次一样。一旦这些文件分别位于 LDPI、MDPI、HDPI 和 XHDPI 文件夹中，只需将它们重命名为galaxy.png，我们就可以在 activity_main.xml 文件的 XML 标记中引用它们，该文件定义了我们的 Hello World 应用主屏幕用户界面设计。一旦我们做到这一点，我们就可以微调我们的 UI 元素颜色，以匹配银河图像。
因为我们想让这个新的背景图片跨越整个布局容器，我们将把参数 android:background 添加到 RelativeLayout 容器标签中，并将其设置为我们的galaxy.png文件的 @drawable/galaxy 引用路径，如图 8-18 顶部所示。
图 8-18。添加 galaxy.png 背景图片；定制 textColor 参数以匹配图像中的等离子颜色
使用图形布局选项卡预览图像，请注意，由于低对比度(可读性)，文本现在需要我们的注意。让我们将新的文本颜色与背景图像右下方等离子体中突出的橙色和黄色色调相匹配。
让我们将左边的标签文本设置为橙色，以平衡背景图像右上角的橙色，并将数据文本设置为黄色，以匹配背景图像中心的黄色等离子体耀斑。为了创建匹配的橙色，通过使用两个 F 值将红色通道保持在最大强度，并通过将这两个值设置为 D ，在绿色通道中使用较小的强度(记住相等的红色和绿色值导致黄色)，并通过将这两个值设置为 A ，在蓝色通道中使用更小的强度，因此明亮等离子体橙色的 #RRGGBB 值为因为我们知道相等的红色和绿色值会产生黄色，所以我们想要使用 #FFFF99 来获得一个完全饱和的黄色，类似于主屏幕背景图像中间等离子耀斑中的颜色。
更改你的 activity_main.xml 标记中所有的 android:textColor 十六进制值，如图图 8-18 所示，然后使用 Run As Android Application 工作进程，看看我们的新主屏幕此时是什么样子。正如你在图 8-19 中所看到的，新的屏幕在视觉上引人注目，看起来非常舒适，所以现在让我们添加一个行星图像，让用户也能看到他们当前所在的行星。
图 8-19。在 Nexus S 模拟器中预览我们新的 galaxy.png 背景图像和新的文本着色
要添加一个行星图像到我们的 UI 屏幕，使用 ImageView 标签和相对布局定位参数，如图图 8-20 所示。标记及其参数的 XML 标记应该如下所示:
<ImageView android:id="@+id/imageEarth"
android:src="@drawable/earth"
android:background="#00000000"
android:layout_width="wrap_width"
android:layout_height="wrap_width"
android:layout_marginLeft="12dp"
android:layout_marginTop="8dp"
android:layout_below="@+id/textView8"
android:contentDescription="@string/content_desc_earth" />
图 8-20。添加一个 ImageView 标签来保存我们的星球，并配置其背景 alpha 和边距参数
我们将参考我们的earth.png源图像，并设置一个# 00000000(# aarggbb)的 alpha 通道，它是 100%透明的。我们这样做是为了让背景星系图像的合成效果完全无缝。接下来我们将使用一个 android:layout_below 参数来引用它上面的 TextView，最后分别使用 12dp 和 8dp，的 marginLeft 和 marginTop 参数设置来完美定位我们的星球图像。
现在，让我们在 Nexus S 模拟器中，通过作为 Android 应用运行工作流程，对我们的工作进行最后的预览，注意我们现在有了当前世界的视觉图像，以及主应用主屏幕上那个世界的特征和设置，如图图 8-21 所示。
图 8-21。在 Nexus S 模拟器中预览我们的 Hello_World 应用主屏幕
这些用户界面设计的改进为我们的用户提供了关于他们正在处理的当前世界的视觉反馈，并且使应用的外观 100%更加专业。
在未来的章节中，我们将使用一些其他技术和标签参数，用动画和很酷的特殊图像效果来增强这个 UI 屏幕(以及我们的其他用户界面屏幕)。所以请注意，我们将在未来的动画和视频章节中使用类似的合成概念和技术，逻辑上需要合成，所以你很快就有机会建立在你最近的合成知识上，并获得合成经验。
因为这是最后一章专门讨论图形设计和合成，我想尽快为这个应用准备好所有的主要图像，并让它与我们将在“这个世界之外”Hello World 应用中使用的所有主要用户界面元素无缝合成。
接下来我们将最终升级我们的 Hello World 应用启动图标，因为众所周知，魔鬼在细节中，它不仅显示在 Android 设备图标启动屏幕上，还显示在应用的顶部。
自定义活动屏幕标题和应用图标:细节决定成败
我们 需要做的第一件事就是使用 Windows Explorer 文件管理实用程序，将 saturn36.png、saturn48.png、saturn72.png 和 saturn96.png 文件分别复制到 LDPI、MDPI、HDPI 和 XHDPI 可绘制文件夹中，如图图 8-22 所示。将 ic_launcher 重命名为 ic_launcher_old，将 saturn36.png 文件重命名为 helloworldicon.png。稍后，我将向您展示如何使用应用的 AndroidManifest.xml 文件中的 XML 标记来实现定制的应用图标文件名。
**
图 8-22。重命名 ic_launcher_old 并添加新的 helloworldicon.png 应用图标
一旦您的新自定义应用图标图像文件位于其各自的 drawable-dpi 文件夹中，接下来我们需要做的事情是在我们的资源值 /res/values/ 文件夹中的 strings.xml 文件中创建一些自定义活动用户界面屏幕标题，在 Android 中称为标签。
在 strings.xml 文件中创建活动屏幕标题常量
点击 Eclipse central 编辑窗格右上角的数字(在图 8-23 中是 14)下拉打开文件菜单。接下来，选择 strings.xml 文件进行编辑，将 app_name 文本值改为 Hello World - Home Screen 。将那个 <字符串> 标签再复制粘贴四次，这样我们就可以为四个应用活动用户界面屏幕中的每一个添加标题(标签)。
图 8-23。在 strings.xml 中添加<字符串>标签常量，用于我们的活动用户界面屏幕作为自定义标题
用 name = " Activity _ Title _ type _ planet "参数和文本值 Hello World - Screen Title 来命名每个标记常量，例如，NewPlanet 活动的<字符串>标记应该是这样的:
<string name="activity_title_new_planet">Hello World - Create a Planet</string>
由此产生的五个 <字符串> 常量标签来标注我们的 app 活动屏幕标题可以在图 8-23 中看到。
在我们的 Hello_World AndroidManifest XML 文件中配置活动屏幕标签
一旦我们在 strings.xml 文件中定义并放置了字符串常量，我们就可以从我们的 AndroidManifest.xml 文件中引用它们，我们将在这里为每个活动屏幕设置 android:label 参数，这将在每个活动的顶部安装一个定制的屏幕标题。
点击 Eclipse central 编辑窗格右上角的数字(在图 8-23中是 14 ),下拉打开文件菜单。接下来，选择 AndroidManifest.xml 文件进行编辑，并在 <应用> 标签中更改当前的 android:icon 参数，以引用一个 @drawable/helloworldicon 引用，这是对我们新的 Saturn 图标图像 PNG 文件的引用。
接下来，在我们的每个 < activity > 标签中添加一个新的 android:label 参数，该参数引用了我们刚刚通过@string/activity_title 按名称创建的新的 < string > 标签常量，如图图 8-24 所示。
图 8-24。向我们的 AndroidManifest.xml 添加一个新的应用 android:icon filename 和 android:label 屏幕标题
对于 NewPlanet.java 活动用户界面屏幕，在应用顶部放置自定义标题的参数是android:label = " @ string/Activity _ title _ new _ planet "这相当简单，只要您知道 Android 希望您将所有内容放在哪里。因此，以 new planet Activity标记为例，带有 name 和 label 参数的整个< activity >标记如下所示:
<activity android:name="chapter.two.hello_world.NewPlanet"
android:label="string/activity_title_new_planet" />
现在让我们使用 EclipseRun As Android Application命令，启动 Nexus S 模拟器，看看新图标和屏幕标题在我们的应用顶部是什么样子。正如你在图 8-25 中看到的，结果是专业的，比之前的屏幕标题(Hello_World)和应用图标(Android Bot)有所改进，因为它们现在更具体地说明了我们的应用是什么以及它在做什么。
图 8-25。新的 Hello World 主屏幕，带有新的屏幕标题和应用图标
单击 Nexus S 模拟器右上角的菜单按钮，让我们看看使用新图标和屏幕标题后的活动 UI 屏幕。正如你在图 8-26 中看到的，我们的屏幕(我们已经完成的三个，我们将在未来实施的第四个 TravelPlanet 活动屏幕第 11 章和第 12 章涵盖数字视频)看起来很棒，并且由于对 UI 细节的关注，看起来更加定制和专业。
图 8-26。预览我们的 Hello World 应用活动屏幕，新的屏幕标题标签和图标已就位
注意，通过使用这个 android:label 参数来创建我们的活动屏幕标题，我们不必在屏幕容器的顶部使用 TextView UI 元素，因此我们只需要在两个屏幕上使用 TextView 来指示用户在到达屏幕时做什么。在 Configure Planet UI 屏幕上，我们的按钮标签要求用户采取行动，因此我们不需要在屏幕上显示任何 TextView UI 元素。
还要注意，我们的活动用户界面屏幕标题(标签)与我们的选项菜单标签非常匹配，因此在整个应用用户界面基础设施中为用户提供了出色的连续性。
现在，我们已经将基本的图形元素与应用的用户界面元素组合在一起，我们可以在接下来的几章中继续实现更高级的新媒体元素，如动画、数字音频和数字视频。
摘要
在本章中，我们仔细研究了一些更高级的用户界面元素和图像合成概念，将 Hello World 应用的用户界面设计提升到了一个新的视觉层次。我们学习了多状态用户界面元素。这些元素改变图像来表示用户界面元素的当前状态，即其默认或正常状态对其被触摸或按下状态，以及其使用中或聚焦状态。
我们学习了如何使用 GIMP 2.8.4 创建多通道图像，并学习了高级模态成像软件操作，以及数字成像颜色模式、编辑模式和工具模式。
我们使用这些模态数字成像工具和软件设置为我们的攻击星球图标创建了多状态图像按钮，并创建了 50 多个数字图像素材，用于我们 Android 应用中所有不同的图像分辨率密度级别。
我们学习了如何使用 XML <选择器> 标签及其子标签 <项目> 来定义使用 XML 标记的多态 ImageButton 用户界面元素，这样我们就不必编写任何 Java 代码来在 Android 应用中实现多态用户界面元素。
我们了解到，所有定义图像相关结构的 XML 文件，比如我们的多图像构造，都进入到根/可绘制的文件夹，然后引用位于可绘制文件夹下的可绘制的 dpi 子文件夹中通常命名的数字图像元素。
我们了解到， focus 按钮状态并不用于只有触摸屏的 Android 设备(如 Nexus S emulator)。聚焦状态用于具有轨迹球、导航键、迷你键盘或外部键盘导航硬件的 Android 设备。
我们了解到，一旦用户触摸了触摸屏(如果安卓设备有触摸屏的话)，安卓操作系统就会进入触摸模式。在这种触摸操作模式下，不会使用对焦按钮状态，但仍会安装，并将在其他不使用触摸屏的 Android 设备类型(如 ITV)上工作。这对开发人员来说意味着我们仍然需要在我们的 Android 应用开发中实现和适应焦点按钮状态。
我们在活动屏幕用户界面中添加了新的背景图像，以取代黑白背景色。接下来，我们添加了新的标签和新的参数，通过颜色匹配文本、不同的字体、文本对齐、新的图像、改进的边距和基于 alpha 通道的半透明性来升级这些屏幕，以实现更专业的视觉效果。
我们通过 android:gravity 参数了解了 Android 中 gravity 的概念，该参数允许我们使用重力将用户界面元素推到或拉到某个方向。用户界面重力是一个概念，在一个关于行星和空间的应用中，这个概念对我们来说是非常合适的。
我们了解了对比度的概念，以及在颜色亮度和饱和度以及相应的背景图像暗度之间保持高对比度的必要性，并通过为我们的主屏幕开发与背景星系图像中的颜色相匹配的文本颜色，了解了更多关于 32 位# aarggbb颜色理论的知识。我们通过两个 RR(红色)、GG(绿色)和 BB(蓝色)通道插槽调整相对的十六进制颜色通道强度来实现这一点，这使我们可以控制每个通道的 256 种颜色强度变化，总颜色控制相当于 16，777，216 种颜色变化。
最后，我们学习了如何在我们的 AndroidManifest.xml 文件的标记开始处的 <应用> 标签内使用 android:icon 参数来实现我们自己的定制应用图标、以及我们自己的定制图标命名方案。我们还学习了如何通过在 AndroidManifest.xml 文件中使用新的 android:label 参数来实现自定义活动屏幕标题，该文件位于我们的 < activity > 标记内，靠近我们的 Hello_World Manifest XML 标记应用定义逻辑的底部。
在下一章，我们将开始为我们的 Hello World Android 应用的用户界面屏幕添加位图或基于帧的动画和图像特效，同样，我们将使用 XML 标记(大部分)来定义，甚至实现这些动画和特效元素。
一个没有大量超酷特效的太空应用算什么？我猜是卖得不太好的那种。让我们确保你不会落入那个陷阱，确保你在下一章中通过利用 Android 的内置动画类来实现光栅动画和数字成像特效，这些动画类正是为了这个目的而提供给开发者的。**
版权属于：月萌API www.moonapi.com，转载请注明出处
