Android Material Design学习笔记

Material Design控件学习记录

Toolbar

新建一个工程后，在res/values/themes.xml文件里

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MaterialTest" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_200</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

    </style>
</resources>

在页面里有详细的说明

Attribute Name	Description	Default Value
colorPrimary	The color displayed most frequently across your app’s screens and components. This color should pass accessibilty guidelines for text / iconography when drawn on top of the surface or background color.	#6200EE
colorPrimaryVariant	A tonal variation of the primary color.	#3700B3
colorOnPrimary	A color that passes accessibility guidelines for text/iconography when drawn on top of the primary color.	#FFFFFF
colorSecondary	The secondary branding color for the app, usually an accented complement to the primary branding color.	#03DAC6
colorSecondaryVariant	A tonal variation of the secondary color.	#018786
colorOnSecondary	A color that passes accessibility guidelines for text/iconography when drawn on top of the secondary color.	#000000

我浅显的理解
这个colorPrimary：就是顶部深色的颜色
这个colorPrimaryVariant ：就是MaterialTest的背景色
在这里插入图片描述

修改ActionBar成ToolBar
https://github.com/TeaAndCoffeeParty/android_practice/commit/e9698a219cf3fd88c2fbeffedf1c441bb64def2f

增加Label显示标题
https://github.com/TeaAndCoffeeParty/android_practice/commit/4bce5102e813eb7026276211a83fb2bfa45c45e8

然后给Toolbar增加Action按钮
https://github.com/TeaAndCoffeeParty/android_practice/commit/d51241dde601677227d93c1c1a65c69f33e72fb0

showAsAction主要有以下几种值可选：
always表示永远显示在Toolbar中，如果屏幕空间不够则不显示；
ifRoom表示屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单当中；
never则表示永远显示在菜单当中。

滑动菜单

在这里插入图片描述

Drawer Layout

在主屏幕左边可以滑出一个菜单，这样既节省了空间，也实现了非常好的效果。这是Material Design推荐的做法。
如果自己去实现，难度很大。google直接写好了控件，只需要使用它就行了。

Drawer layout是一个布局，在布局中允许放入两个直接子控件：
一个用于显示主程序中的内容
一个用于显示滑动菜单中的内容

https://github.com/TeaAndCoffeeParty/android_practice/commit/81aee6c6675904d4f9ccb01898c01f3df5d03a2a

这里最外层使用了supportv4提供的drawerlayout，放置了两个控件，一个时framelayout用于显示主程序，另一个时TextView用于显示滑动菜单中的内容。这只是简单的示例，其实换成其他的都可以。
但是第二个控件的layout_gravity属性必须是指定的，因为需要告诉drawer layout从哪里划出菜单。start在不同的语系里会表示左边或者右边。

只是稍微改动了一下，就有不错的效果了。
接下来在toolbar的左边新增一个按钮，让他能显示滑动菜单，防止用户不知道左边可以拖出菜单

https://github.com/TeaAndCoffeeParty/android_practice/commit/df2107e6c32c312dc7adfa3c5ddcf2444e17a3d5

使用supportActionBar获取toobar，然后调用setDisplayHomeAsUpEnabled开启最左侧的按钮。最左侧的按钮就是home。
并且在toolbar的click信号中添加触发滑动菜单的按钮。注意openDrawer需要传入一个layout_grivity的参数。为了保证和xml一致，我们传入GravityCompat.START

Navgation View

滑动菜单的内容有点丑陋，使用NavgationView可以优化它。

首先需要在app/build.gradle里引入需要的苦
创建nav_menu.xml文件，并添加一系列的控件内容
创建nav_header.xml，来显示menu菜单和个人信息
在main_activity.xml里替换textView
https://github.com/TeaAndCoffeeParty/android_practice/commit/73caf17906158abc14262edc0dd8541a5a63354a
添加点击时间触发动作
https://github.com/TeaAndCoffeeParty/android_practice/commit/45c56d9c8fd219c9379f676ab69a2ea9f5dfed39

悬浮按钮和可交互提示

FloatingActionButton

在Framelayout里添加一个floatingActionButton并放在屏幕的最右下角
https://github.com/TeaAndCoffeeParty/android_practice/commit/e1bd140309b2a14a5ba2a59455ac33192d72a9f9

使用app:elevation="8dp"来添加阴影，数字越大光照越高，阴影也就越大，颜色深度也越深。
https://github.com/TeaAndCoffeeParty/android_practice/commit/a04298930a83c3577bb73425e1ea8287bc4c84e0

给floatingActionButton添加触发事件
https://github.com/TeaAndCoffeeParty/android_practice/commit/456d1b938a2830a89f595473784572bf445f61b0

Snackbar

相比于Toast可以使用SnackBar扩展它，相比于Toast只能告诉用户发生了什么。SnakBar可以有一个交互按钮，当用户点击交互按钮的时候，可以触发某些动作。比如如果误删了某个文件，可以按下Undo来撤销这个操作。

用法也非常简单，使用时需要传入view，只要是当前布局的view就行。Snackbar会自动找到当前最外层的布局，第二个参数是显示的内容，第三个参数是显示的时长。
https://github.com/TeaAndCoffeeParty/android_practice/commit/12d602bf2089c07eb15fee288963262d55b565dd

目前有一个bug，就是悬浮的按钮被提示挡住了，使用coordinate layout可以避免这个问题

coordinate layout

coordinate layout是加强版的framelayout，这个布局也是desig support库提供的。
在普通情况下，它和Frame Layout是一样的，不过它可以监听所有子控件的事件，自动帮我们作出最优的响应
当coordinate layout监听到snackbar的弹出消息时，它会自动把floating action bar上移从而确保不会被遮挡，改动也很简单
https://github.com/TeaAndCoffeeParty/android_practice/commit/833737d35eccf54996f93019df9d92e6a17f45f7

卡片式布局

MaterialCardView

MaterialCardView是用于实现卡片式布局效果的重要空间，由Material库提供。
MaterialCardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果，看上去会有立体的感觉。

在app/build.gradle文件中声明库的依赖，是添加了Glide库的依赖
https://github.com/TeaAndCoffeeParty/android_practice/commit/a9c5a97c57e5b9cee9659bfa6815a9ad1f5ed7c3
修改activity_main.xml中的代码，在CoordinatorLayout中添加了一个RecyclerView，给它指定一个id，然后将宽度和高度都设置为match_parent，这样RecyclerView就占满了整个布局的空间。
https://github.com/TeaAndCoffeeParty/android_practice/commit/3b0061c666a8a55e63626b970062b87dbf535a04
定义一个实体类Fruit，name表示水果的名字，imageId表示水果对应图片的资源id
为RecyclerView的子项指定一个我们自定义的布局，在layout目录下新建fruit_item.xml
为RecyclerView准备一个适配器，新建FruitAdapter类，让这个适配器继承自RecyclerView.Adapter，并将泛型指定为FruitAdapter.ViewHolder
修改MainActivity中的代码，定义了一个水果集合，集合里面存放了很多个Fruit的实例，每个实例都代表一种水果。然后在initFruits()方法中，先是清空了一下fruitList中的数据，接着使用一个随机函数，从刚才定义的Fruit数组中随机挑选一个水果放入fruitList当中，这样每次打开程序看到的水果数据都会是不同的。另外，为了让界面上的数据多一些，这里使用了repeat()函数，随机挑选50个水果
https://github.com/TeaAndCoffeeParty/android_practice/commit/99769bedc2364bae758bd2a32058d90f2a4efdd9

AppBarLayout
我们的Toolbar被RecyclerView给挡住了，需要借助另外一个工具——AppBarLayout
CoordinatorLayout就是一个加强版的FrameLayout，那么FrameLayout中的所有控件在不进行明确定位的情况下，默认都会摆放在布局的左上角，从而产生了遮挡的现象。

使用Material库中提供的另外一个工具——AppBarLayout。AppBarLayout实际上是一个垂直方向的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些Material Design的设计理念。

怎样使用AppBarLayout才能解决前面的遮挡问题呢？其实只需要两步就可以了

第一步将Toolbar嵌套到AppBarLayout中
https://github.com/TeaAndCoffeeParty/android_practice/commit/c0aca1b570fae7c34a2b594997ae3359c9ece0df
第二步给RecyclerView指定一个布局行为。
https://github.com/TeaAndCoffeeParty/android_practice/commit/812c7632f67d881f1cdc156c008a90d59feddfd2

下拉刷新

SwipeRefreshLayout就是用于实现下拉刷新功能的核心类，我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中，就可以迅速让这个控件支持下拉刷新。

使用SwipeRefreshLayout之前首先需要在app/build.gradle文件中添加依赖
修改activity_main.xml中的代码，在RecyclerView的外面又嵌套了一层SwipeRefreshLayout，这样RecyclerView就自动拥有下拉刷新功能了。
修改MainActivity中的代码，在代码中处理具体的刷新逻辑才行。
https://github.com/TeaAndCoffeeParty/android_practice/commit/2d883dec1a5342169514c66a4f0cc59c7bd6b0cd

可折叠式标题栏

实现一个可折叠式标题栏的效果，这需要借助CollapsingToolbarLayout这个工具

CollapsingToolbarLayout
CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，它也是由Material库提供的。

首先我们需要一个额外的Activity作为水果的详情展示界面，右击com.example.materialtest包→New→Activity→Empty Activity，创建一个FruitActivity，并将布局名指定成activity_fruit.xml，然后我们开始编写水果详情展示界面的布局。
activity_fruit.xml中的内容主要分为两部分，一个是水果标题栏，一个是水果内容详情

首先实现标题栏部分，这里使用CoordinatorLayout作为最外层布局
接着我在CoordinatorLayout中嵌套一个AppBarLayout
接下来在AppBarLayout中再嵌套一个CollapsingToolbarLayout
接下来在CollapsingToolbarLayout中定义标题栏的具体内容
继续修改activity_fruit.xml中的代码，水果内容详情的最外层布局使用了一个NestedScrollView。不管是ScrollView还是NestedScrollView，它们的内部都只允许存在一个直接子布局。
通常会先嵌套一个LinearLayout，然后再在LinearLayout中放入具体的内容就可以了
接下来在LinearLayout中放入具体的内容，这里我准备使用一个TextView来显示水果的内容详情，并将TextView放在一个卡片式布局当中
还可以在界面上再添加一个悬浮按钮。
界面完成了之后，接下来我们开始编写功能逻辑，修改FruitActivity中的代码。在onCreate()方法中，我们通过Intent获取了传入的水果名和水果图片的资源id。接着使用了Toolbar的标准用法，将它作为ActionBar显示，并启用Home按钮。由于Home按钮的默认图标就是一个返回箭头，这正是我们所期望的，因此就不用额外设置别的图标了。
接下来开始填充界面上的内容，调用CollapsingToolbarLayout的setTitle()方法，将水果名设置成当前界面的标题，然后使用Glide加载传入的水果图片，并设置到标题栏的ImageView上面。接着需要填充水果的内容详情，由于这只是一个示例程序，并不需要什么真实的数据，所以我使用了一个generateFruitContent()方法将水果名循环拼接500次，从而生成了一个比较长的字符串，将它设置到了TextView上面。
最后，我们在onOptionsItemSelected()方法中处理了Home按钮的点击事件，当点击这个按钮时，就调用finish()方法关闭当前的Activity，从而返回上一个Activity
处理RecyclerView的点击事件，不然的话，我们根本就无法打开FruitActivity。修改FruitAdapter中的代码
https://github.com/TeaAndCoffeeParty/android_practice/commit/11d7507f2671a8bca6c28240685a24ed05a4c77e

充分利用系统状态栏空间

需要借助android:fitsSystemWindows这个属性来实现。在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的
布局中，将控件的android:fitsSystemWindows属性指定成true，就表示该控件会出现在系统状态栏里。对应到我们的程序，那就是水果标题栏中的ImageView应该设置这个属性了。
不过只给ImageView设置这个属性是没有用的，我们必须将ImageView布局结构中的所有父布局都设置上这个属性才可以，修改activity_fruit.xml中的代码。
即使我们将android:fitsSystemWindows属性都设置好了也没有用，因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单，在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了。
打开res/values/styles.xml文件，对主题的内容进行修改
https://github.com/TeaAndCoffeeParty/android_practice/commit/0856abf7dac525c13b72703ef3d97fbc702e99e2