安卓學習日志 Day08

概述

完善 Miwok 應用的用戶體驗，向串列項布局中添加音頻圖示，添加觸摸反饋的效果，向上按鈕等，

目標

• 向串列項布局中添加音頻圖示

• 點擊 類別標簽時的 點按反饋

• 點擊串列項時的 點按反饋

• Android 中的導航模式

• 詞匯串列頁向上按鈕

實作步驟

添加音頻圖片

在串列項的右側添加一個 播放音頻圖示，以表明該串列項是可點擊播放的，

更改串列項布局前后的對比如下：

首先從材料設計網站下載 播放箭頭圖示 white 36dp 版本請注意向應用中添加所有密度版本的圖示（從 mdpi 到 xxxhdpi），

從串列項更改前后的對比圖中我們可以看出 音頻圖片與串列項 右邊 的文本部分右對齊，因此 采用 相對布局 RelativeLayout 來控制位置是 一個不錯的選擇，所以 將 串列項右邊部分的 LineanerLayout 嵌套到 一個 RelativeLayout 當中，添加一個 ImageView 視圖用于顯示 音頻圖示，并更改部分屬性：

類別視圖按下狀態

觸摸反饋在螢屏上用戶與 UI 元素互動的接觸點為用戶提供了即時外觀確認， 你在 Android 中開發的應用一定要具有觸摸反饋，這樣可以讓你的應用 看起來回應速度很快，即時尚未發生任何其他行為，

自從在 Lollipop 中推出材料設計后，當你與 UI 元素互動的時候， 都會出現圓形漣漪影片效果，

在更早版本的 Android 設備上，出現的是靜態彩色按下狀態，

在 Miwok 應用中，我們創建了自己的可點擊視圖——MainActivity 中的類別視圖 以及類別 Activity 中的串列項，我們需要自己處理按下狀態，

將試圖設為 ?android:attr/selectableItemBackground 背景后， 該視圖默認地將具有一個透明背景，當你觸摸或按下該視圖時，它將顯示一個 按下狀態（即圓形漣漪影片效果），這是 Android 框架中定義的默認觸摸反饋行為，

修改 Miwok 應用

請將 activity_main.xml 中的內容替換為下面的 XML，每個 TextView 都位于一個 FrameLayout 中，并具有背景顏色，請將 TextView 的背景顏色設為 ?android:attr/selectableItemBackground ，

這樣，每個類別視圖都能保留背景顏色，以及觸摸反饋， 順便提下，FrameLayout是一種 ViewGroup，通常包含 1 個子視圖，

在 activity_numbers.xml 檔案中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/tan_background"
  android:orientation="vertical"
  tools:context="com.example.android.miwok.MainActivity">

<!-- Numbers category -->
<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/category_numbers">
   <TextView
       android:id="@+id/numbers"
       style="@style/CategoryStyle"
       android:background="?android:attr/selectableItemBackground"
       android:text="@string/category_numbers" />
</FrameLayout>

<!-- Family category -->
<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/category_family">
   <TextView
       android:id="@+id/family"
       style="@style/CategoryStyle"
       android:background="?android:attr/selectableItemBackground"
       android:text="@string/category_family" />
</FrameLayout>

<!-- Colors category -->
<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/category_colors">
   <TextView
       android:id="@+id/colors"
       style="@style/CategoryStyle"
       android:background="?android:attr/selectableItemBackground"
       android:text="@string/category_colors" />
</FrameLayout>

<!-- Phrases category -->
<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/category_phrases">
   <TextView
       android:id="@+id/phrases"
       style="@style/CategoryStyle"
       android:background="?android:attr/selectableItemBackground"
       android:text="@string/category_phrases" />
</FrameLayout>
</LinearLayout>

然后在設備上運行應用，測驗并確保 MainActivity 中的每個按鈕 都具有觸摸反饋，

注意： 也可以將背景屬性移到 styles.xml 中的 CategoryStyle 定義中，

串列項視圖按下狀態

現在，需要對所有的類別 Activity（NumbersActivity、FamilyActivity 等等） 進行最后的更改，當串列項被點擊時能夠顯示按下狀態（漣漪影片效果），

第 1 個選項

在串列項布局中，可以添加一個新的視圖并覆寫串列項最外層 LineanerLayout 中的所有其他視圖， 并與該 LineanerLayout 的寬度和高度相匹配，該視圖的背景為 "?android:attr/selectableItemBackground”，這樣默認情況下，該視圖將為透明的 使你能夠看到串列項中的內容，當串列項被點擊時，它將顯示按下狀態（在 Lollipop 及更改版本的設備上顯示灰色漣漪影片效果），

第 2 個選項

這次，不再向布局中添加新的視圖，而是在單詞串列布局中，對 ListView XML 元素添加 android:drawSelectorOnTop="true"屬性，做出這行代碼更改后，每個串列項都將顯示按下狀態（觸摸反饋），

在 word_list.xml 中：

<?xml version="1.0" encoding="utf-8"?>
<ListView 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/list"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:drawSelectorOnTop="true"/>

兩個選項都是可行的，在做出這一更改后，測驗下應用（順便 把 安卓學習日志 — Day07 中的幾個更改也一起測驗了） ，

測驗環境為 物理機 華為 P10， 測驗視頻鏈接：https://www.bilibili.com/video/BV1qh411277s/

導航模式

導航模式指導用戶在應用的不同部分之間切換，

應用內的導航有很多種模式，每種模式都應該與正在展示給用戶的資料型別相匹配，使用過許多應用后， 你將注意到一些常見的導航模式，

“主詳情布局”由主資料串列構成，當你點按某個資料項時，系統會顯示該項的詳情視圖，

查看資料的另一種方式是使用“抽屜式導航欄”，如果應用包含多個螢屏，相互之間是“兄弟姐妹”關系， 那么不同的螢屏可以列在“抽屜”中，并從螢屏左側彈出來，在 Notepad（華為筆記應用） 中，抽屜式導航欄提供了不同筆記類別的可點擊視圖，

另一種模式是“可滑動標簽頁”，可以在不同的螢屏之間向左或向右滑動，或者可以 在螢屏頂部點按某個標簽頁，設計規范中提供了關于標簽頁的部分，下面是個 掘金 應用 示例，該應用在每個標簽頁中都使用了圖示：

還有其他多種型別的瀏覽方式，例如，日歷應用具有一個滾動日程視圖，但是可以 通過日歷月份視圖跳到特定的天，或者可以查看不同時長的時間，例如周視圖，這些互動方式是 日歷應用特有的，

“向上”按鈕

以下是 Miwok 應用中不同螢屏之間關系的示例圖表，主螢屏（具有四個類別按鈕）是“父” Activity，它會轉到詞匯串列，即“子”Activity，這種父子關系非常重要，因為有時候， 用戶可能想要導航到父 Activity 或子 Activity，這是另一種導航應用的方式，如果 用戶進入應用中的非主螢屏位置，則很有用，

在查看 Android 應用時，你可能注意到了應用欄中指向左側的水平箭頭，稱為“向上”按鈕，

用戶可以通過此按鈕導航到父 Activity，而 Miwok 應用中的 父 Activity 其實就是 MainActivity，

“向上”按鈕與“回傳”按鈕

有一個疑問，“向上”按鈕和“回傳”按鈕的作用不是一樣的嗎？

實際上不完全一樣，“回傳”按鈕位于 Android 上的系統導航欄上（最左側的三角 形按鈕），無論位于哪個應用中，當你點按“回傳”按鈕時，都會回傳到之前的位置，

但是，在某些情況下，“回傳”按鈕和“向上”按鈕產生的行為卻不同，“向上”按鈕始侄訓使你 轉到父 Activity，“回傳”按鈕可以使你轉到父 Activity、主螢屏或其他應用，取決于你 是如何到達當前螢屏的，

在 Miwok 應用中，用戶 需要經過主螢屏，所以“回傳”按鈕和“向上”按鈕的效果是一樣的，但是，最佳做法是讓用戶能夠通過“向上”，明確跳轉到 MainActivity，

將 AndroidManifest.xml 中每個類別的 Activity 更改如下：

<activity
        android:name=".NumbersActivity"
        android:label="@string/category_numbers"
        android:parentActivityName=".MainActivity">

        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value=".MainActivity"/>
</activity>

運行，查看結果，測驗向上按鈕：

總結

當我們在構建一個 應用時應該站在用戶的角度多考慮，應用中一些微小的改動都會影響到用戶的體驗，

參考

導航

抽屜式導航

Set up the app bar