谷歌发布了一套UI方法指南; 它被称为material design，和您可以在他们的网站https://material.io上阅读更多相关信息。 这是一个很重要的话题，我们不打算在这里介绍它。 但在本课中，我们将讨论三件事来助你进一步研究方向。 这是 the themes and
colors, the AppBar, and Fragments.
一、Themes and Colors
当AS3创建一个空活动的项目时，它会为你做很多事情，并且我们在过去的几个示例应用程序中看到了一些。 本课我们将重点介绍美学。 我们不会深入研究进入UI设计，因为它是一个很大的领域，留待以后有时间再学; 我们目前还是应用目前现有的UI，让我们创建一个带有空活动的新项目，并将其命名为StylesAndThemes;不用 "Phone and Tablets".的默认外形。
注意：A style is a collection of attributes that specify the look and format for an individual view object; a style refers to height, color, font, and so on. A theme, on the other hand, is a style applied to entire Activity or application
如果你想做一些品牌推广并给你的应用一些标识，我们可以从定制颜色和主题开始。
1、Colors
虽然可以为应用程序的每个部分指定颜色，但可以证明这一点既乏味又费时。 一种更简单的方法是使用主题。 整体而言
应用程序的主题由AndroidManifest控制（您可以打开清单文件从项目工具窗口，应用程序➤清单➤AndroidManifest）。
正如您现在可能已经知道的那样，Android大量使用XML。 还有，做法引用值，无论是字符串，颜色，样式还是别的东西，都非常普遍 - 你会的到处都找到它。 让我们看一下清单文件中的两个条目。
（1）@string表示法意味着我们从app / res / values / strings.xml引用此值。这是在应用中定义字符串的首选方式。 在资源中编写字符串可以提供我们能够从中心位置管理字符串资源; 它有助于改变和本地化也是如此。 可以从项目工具打开字符串和样式资源
窗口。
app / res / values / strings.xml
（2）@style表示法意味着我们从app / res / values / styles.xml引用此条目文件。 在该文件中，应该有AppTheme的定义
在上图中，定义了从清单文件引用的AppTheme值。 首先，它不是从头开始建造的; 它继承自DarkActionBar主题，但它允许我们
自定义几种颜色。 样式中定义了三种颜色，但如果你想，您可以添加更多。
注意：在以前版本的Android Studio中，您可能需要创建/res/styles.xml文件。在AS3中，当我们创建空活动时，会自动生成样式资源文件。
colorPrimary，colorPrimaryDark和colorAccent在styles.xml中没有（真的）定义;相反，我们发现另一个间接引用我们另一个资源文件。
如果打开colors.xml，我们终于可以看到颜色的十六进制值。 AS3向您展示编辑颜色（颜色定义前的颜色小方块）; 更改十六进制值时，颜色会立即更改。 如果要更改应用程序的色调，可以先对此文件进行更改。
如果你需要帮助，使用颜色的十六进制值，有足够的网络资源那; colorhexa.com是一个这样的网站（https://www.colorhexa.com/），向您展示相关的颜色和特定颜色的渐变，因此当您想要使用颜色十六进制值时，最好使用它。
然而，颜色策划是一个很大的领域，并且有很多原则和指导方针参与其中。 另一个很好的颜色资源是Materialpalette（https://www.materialpalette.com/，如下图）。
Materialpalette面向Android设计，特别是材料设计。 基本的想法是选择两种颜色，网站为您构建一个调色板。 现在我们可以简单地复制主要，深色主要，重音和浅色原色的十六进制值。
下载后得到colors_teal_pink.xml
<!-- Palette generated by Material Palette - materialpalette.com/pink/deep-purple -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#E91E63</color>
<color name="primary_dark">#C2185B</color>
<color name="primary_light">#F8BBD0</color>
<color name="accent">#7C4DFF</color>
<color name="primary_text">#212121</color>
<color name="secondary_text">#757575</color>
<color name="icons">#FFFFFF</color>
<color name="divider">#BDBDBD</color>
</resources>
把该内容替换上，将主编辑器切换到activity_main选项卡以查看我们的应用程序的新外观
2、Themes
Android的外观和感觉多年来不断发展。随着Android版本的推出，这也为应用带来了全新的外观和感觉。下图显示了多年来主题的发展。
| Theme | Description |
| Theme.Light | This was used by Androidversions 2 and below (API 10 and below); e.g., Gingerbread |
| Theme.Holo.Light | Android 3 (API 11 and above) |
| Theme.Holo.DarkActionBar | API 14 onward |
| Theme.AppCompat | API 7 |
| android:Theme.Material | API 21 (Lollipop) onward |
我们创建的过去几个项目的默认主题是Theme.AppCompat.Light.DarkActionBar。 这是一个不错的主题，如果你的需求很简单，可能就没有需要在这个主题上做进一步的工作。 但如果你想调整你的外观和感觉应用程序，你可以开始尝试各种主题。 您可以通过编辑父主题来完成此操作styles.xml
尝试多次更改主题，然后返回activity_main（设计模式）所以你可以测试各种Android主题。
3、AppBar
菜单在UI设计中非常重要，它们是程序员不可或缺的工具兵工厂。菜单系统允许用户获得应用程序的功能。传统上，菜单系统按层次结构和介绍组进行组织。一些Android的菜单系统时间点，表现完全像分组和分层。但那是在过去。 Android的菜单方法在其生命周期中发生了巨大变化。
在API 11（Honeycomb）之前，Android菜单依赖于硬件按钮（就像你的那些）见下图。开发人员可以依赖主页按钮（以及其他一些按钮，例如选项按钮）总是在那里。我们根据这些假设构建了我们的应用程序，因为那些假设在当时是合理的。当然，时代已经改变。屏幕分辨率急剧增加，硬件按钮消失了。幸运的是，Android的菜单方法也发生了变化，并保持了状态硬件功能。
从API 11开始，Android中添加了一种新的菜单系统使用11的最小SDK构建可以使用ActionBar（参见下图）。
ActionBar是一个位于屏幕顶部的专用区域，并且贯穿整个区域应用程序。 如果您考虑它，它就像AS3的主菜单栏。 你一般可以使用ActionBar显示应用程序的最重要功能并使其可访问一种可预测的方式; 例如，将永久性搜索小部件置于顶部，依此类推。 它
通过消除菜单中的混乱来创建更整洁的外观; 如果不是菜单中的所有项目都可以在屏幕上，ActionBar将显示一个溢出图标 - 这就是垂直省略号，垂直排列的三个点，总是位于最右边。 它还显示应用程序的名称，因此它强化了应用程序的品牌标识。
如今，ActionBar已经有些过时了，而且已经被Toolbar取代。Toolbar有很多功能，因为它不是永久地夹在屏幕顶部，你可以把它放在你想要的任何地方，它有一个更多功能。 然而，ActionBar仍然是简单菜单的可行解决方案系统。 事实上，没有什么可以阻止你同时使用ActionBar和Toolbar。
二、测试
1、先建一个名为ActionBar的项目
创建项目后，请确保将主题设置为“AppTheme”。 之后，创建翻译文件夹下的菜单文件夹。 在项目工具窗口中，右键单击res文件夹 new➤Android Resource Directory
在新创建的菜单目录下创建一个菜单文件。 右键单击menu文件夹, New ➤ Menu Resource File
名称为main_menu
双击项目工具窗口中的main_menu资源文件。 我们来添加一些菜单项目如下图所示。 main_menu.xml文件将在/app/res/values/menu/main_menu.xml文件夹中创建。
（1）@id+ 表示法意味着我们要为此项创建ID; 这是个ID我们稍后会在使用findViewById方法从程序中引用它时使用
（2）title属性是将在菜单上显示的属性。 我们可以写一个简单的这里的字符串，但这相当于在该文件中对该值进行硬编码。 这是一般不是一个好主意。 @string表示法意味着我们引用/app/res/values/strings.xml文件中的标题。 第一次键入标题时，AS3会将其显示为错误，因为尚未在strings.xml中创建字符串资源。 选择title属性的值（@ string / menuFile）并使用快速修复（Alt + Enterin Windows / Linux | Option + Enterin macOS），以便创建资源文件。 请参见下图
切换到MainActivity，我们可以将新创建的main_menu添加到AppBar。 为此，我们需要覆盖MainActivity的onCreateOptions方法。 您可以使用AS3的覆盖方法工具，从主菜单栏，Code→Override执行此操作方法。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}运行ok
我们在菜单上使用一些图像。 AS3附带了许多可以用于的图像广泛的应用。 在我们可以使用任何图像之前，我们应该将它添加到我们的资源中夹。 您可以为图像使用栅格化（位图）或矢量资源。
On the project tool window, right-click /app/res ➤ New ➤ Vectorasset
单击图标，以便找到符合您需求的图像
要在应用程序中使用图像，我们需要将它们与main_menu上的每个项目相关联资源文件。
（1）The vector assets we added were saved in /app/res/drawable
（2）如果showAsAction属性是ifRoom，则仅当有足够的空间时才会显示图标动作条; 否则，用户只有在单击动作溢出按钮时才会看到它
（3）如果showAsAction属性设置为always，则该图标将始终对用户可见。 小心谨慎使用; 如果所有图标都指定为“始终”，则运行时决定您的哪个将显示图标，并且它们可能并非全部可见。
运行ok
要处理每个菜单项的事件，我们可以使用android：onClick属性在每个项目上或覆盖MainActivity中的onOptionsItemSelected方法。如果你想使用onClick route，请将onClick属性添加到main_menu中的项目，例如
<item android:id="@+id/menuEdit"
android:title="@string/menuEdit"
android:icon="@drawable/ic_edit_black_24dp"
app:showAsAction="always"
android:onClick="mnuEdit"/>然后，在MainActivity中，实现mnuEdit方法：
public void mnuEdit(MenuItem item) {
Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();
}处理菜单项事件的另一种方法是在MainActivity覆盖onOptionsItemSelected。
package com.example.administrator.actionbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
//return super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}
public void mnuEdit(MenuItem item) {
Toast.makeText(this, "Edit11", Toast.LENGTH_SHORT).show();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
//return super.onOptionsItemSelected(item);
/*
getItemId returns which among the menu item was clicked. We will use this to route program
logic inside the switch structure
*/
switch(item.getItemId()){
//We’re comparing the value of getItemIdwith each menu item
case R.id.menuFile:
showMessage("File");
break;
// case R.id.menuEdit:
// showMessage("Edit");
// break;
case R.id.menuHelp:
showMessage("Help");
break;
case R.id.menuExit:
showMessage("Exit");
break;
default:
showMessage("Default");
}
return true;
}
private void showMessage(String msg) {
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}
}
运行ok
