安卓学习日志 Day08 — 外观改善

最新推荐文章于 2021-04-13 16:29:09 发布

HEY-BLOOD

最新推荐文章于 2021-04-13 16:29:09 发布

阅读量2.2k

点赞数 1

分类专栏：安卓学习日志

本文链接：https://blog.csdn.net/weixin_45075891/article/details/112717068

版权

本文详细记录了安卓学习过程中的改进，包括在Miwok应用中添加音频图标以增强用户体验，实现类别视图和列表项的触摸反馈效果，探讨了导航模式，以及设置“向上”按钮的正确使用。通过对布局和交互的调整，提升了应用的视觉反馈和导航体验。

摘要由CSDN通过智能技术生成

文章目录

概述

完善 Miwok 应用的用户体验，向列表项布局中添加音频图标，添加触摸反馈的效果，向上按钮等。

目标

向列表项布局中添加音频图标
点击类别标签时的点按反馈
点击列表项时的点按反馈
Android 中的导航模式
词汇列表页向上按钮

实现步骤

添加音频图片

在列表项的右侧添加一个播放音频图标，以表明该列表项是可点击播放的。

更改列表项布局前后的对比如下：

在这里插入图片描述

首先从材料设计网站下载播放箭头图标 white 36dp 版本请注意向应用中添加所有密度版本的图标（从 mdpi 到 xxxhdpi）。

从列表项更改前后的对比图中我们可以看出音频图片与列表项右边的文本部分右对齐，因此采用相对布局 RelativeLayout 来控制位置是一个不错的选择，所以将列表项右边部分的 LineanerLayout 嵌套到一个 RelativeLayout 当中，添加一个 ImageView 视图用于显示音频图标，并更改部分属性：

在这里插入图片描述

类别视图按下状态

触摸反馈在屏幕上用户与 UI 元素互动的接触点为用户提供了即时外观确认。你在 Android 中开发的应用一定要具有触摸反馈。这样可以让你的应用看起来响应速度很快，即时尚未发生任何其他行为。

自从在 Lollipop 中推出材料设计后，当你与 UI 元素互动的时候，都会出现圆形涟漪动画效果。

在这里插入图片描述

在更早版本的 Android 设备上，出现的是静态彩色按下状态。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kw5Auvhk-1610803246741)(https://video.udacity-data.com/topher/2019/August/5d479f48_02o-jhql2up3dxb5w08e2k4xiwrbupo4iwxlgf5wtkiivhlawz5qxiyuxafpsoi3foy2us4nzap42i-nwti-s0w-284-h-122/02o-jhql2up3dxb5w08e2k4xiwrbupo4iwxlgf5wtkiivhlawz5qxiyuxafpsoi3foy2us4nzap42i-nwti-s0w-284-h-122)]

在 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"