谷歌釋出了一套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