安卓学习日志 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