安卓學習日誌 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