Material Design

Posted 2022-12-10 他叫小黑

这两天看了一下Material Design的一些控件，下面总结一下，以备以后可以使用。

Material Design是谷歌的设计工程师们基于传统的设计原则，结合丰富的创意和科学技术发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。

2015年Google I/O大会上推出了一个Design Support库，这个库将Material Design中最具代表性的一些控件和效果进行了封装，使得开发者在即使不了解Material Design的情况下也能轻松地将自己的应用Material化。

1.Toolbar

就是标题栏。可以说Toolbar是ActionBar的替代品了。ActionBar就是活动最顶部的那个标题栏，现在已经官方已经不建议使用了。Toolbar不仅继承了ActionBar的所有功能，而且灵活性很高，可以配合其它控件来完成一些Material Design效果。

例子：
android：ToolBar详解（手把手教程）

---

2.滑动菜单

2.1DrawerLayout

就是滑动菜单。所谓滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果。

例子：
android官方侧滑菜单DrawerLayout详解
Android DrawerLayout

2.2NavigationView

你可以在滑动菜单页面定制任意的布局，谷歌给我们提供了一种更好的方法，就是NavigationView。可以将活动菜单页面的实现变的非常简单。

例子：
Design Support Library (I): Navigation View的使用

---

3.悬浮按钮和可交互提示

3.1FloatingActionBar

就是悬浮按钮。可以帮助我们比较轻松的实现悬浮按钮的效果。用法其实跟Button没什么两样。

3.2Snackbar

可以说是可交互提示的Toast，但并不是Toast的替代品。Snackbar用法也非常简单，与Toast是基本相似的，只不过可以额外增加一个按钮的点击事件。

3.3CoordinatorLayout

CoordinatorLayout可以说是一个加强版的FrameLayout。它在普通的情况下的作用和FrameLayout基本一致。
事实上，CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。举个简单的例子，弹出的Snackbar提示将悬浮按钮FloatingActionBar遮挡住了，虽然Snackbar提示一下子就消失，而如果我们能让CoordinatorLayout监听到Snackbar的弹出事件，那么它就会自动将内部的FloatingActionBar向上偏移，从而确保不会被Snackbar遮挡到。
CoordinatorLayout的使用也很简单，只需将原来的FrameLayout替换一下就可以了。

例子：
android CoordinatorLayout使用

---

4.卡片式布局

卡片式布局可以让页面中的元素看起来就像在卡片中一样，并且还能拥有圆角和投影。

4.1CardView

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

4.2AppBarLayout

AppBarLayout实际上是一个垂直方向的LinearLayout，它在内部做了很多滚动事件的封装。
说一种应用场景：RecycleView和Toolbar放置在CoordinatorLayout中，而前面说了CoordinatorLayout是一个加强版的FrameLayout，这样RecycleView会遮挡住Toolbar。怎么解决呢？第一，将Toolbar嵌套到AppBarLayout中，第二，给RecycleView指定一个布局行为app:layout_behavior=”@string/appbar_scrolling_view_behavior” 。另外如果在Toolbar属性中加上app:layout_scrollFlags=”scroll | enterAlways | snap”，其中，scroll表示当RecycleView向上滚动的时候，Toolbar会跟着一起向上滚动并实现隐藏；enterAlways 表示当RecycleView向下滚动的时候，Toolbar会跟着一起向下滚动并重新显示；snap表示当Toolbar还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择是隐藏还是显示。

例子：
玩转AppBarLayout，更酷炫的顶部栏

---

5.下拉刷新

SwipeRefreshLayout就是用于下拉刷新的核心类。

例子：
Android SwipeRefreshLayout

---

6.可折叠式标题栏

6.1CollapsingToolbarLayout

看名字应该可以看出CollapsingToolbarLayout是一个作用于Toolbar基础上的布局，它可以让Toolbar的效果变得更加丰富，不仅仅是展示一个标题栏，而是能够实现非常华丽的效果。
不过，CollapsingToolbarLayout是不能独立存在的，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。

例子：
CollapsingToolbarLayout用法详解（简洁易懂）

6.2背景图和状态栏融合

想让上面做的效果更好看，需要用到android:fitsSystemWindows这个属性。在CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout这种嵌套结构的布局中都将android:fitsSystemWindows属性指定为true，就表示该控件会出现在系统状态栏里。
另外还必须在程序的主题中将状态栏颜色指定为透明色才行。在主题中将android:statusBarColor属性的值指定为@android:color/transparent就可以了。但问题在于，android:statusBarColor这个属性是从API21，也就是Android5.0系统开始才有的，之前的系统无法指定这个属性。那么，系统差异性的功能实现就要从这里开始了。
右击res目录 –> New –> Directory，创建一个values-v21目录，然后右击values-v21目录 –> New –> Values resource file，创建一个styles.xml文件。接着对这个文件进行编写，代码如下：

<resources>
    <style name="MyTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

这里我们定义了一个MyTheme主题，它专门给我们的Activity使用的。MyTheme的parent主题是AppTheme，也就是说，它继承了AppTheme中的所有特性。然后我们还MyTheme中将状态栏的颜色指定为透明色，由于values-v21目录是只有Android5.0及以上的系统才会去读取的，因此这样声明是没有问题的。
但是Android5.0之前的系统却无法识别MyTheme这个主题，因此我们还需要对values/styles.xml文件进行修改，如下：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyTheme" parent="AppTheme">
    </style>
</resources>

可以看到，这里也定义了一个MyTheme主题，并且parent主题也是AppTheme，但是它内部是空的。因为Android5.0之前的系统无法指定状态栏的颜色，因此这里什么都不用做就可以了。
最后，还需要让Activity使用这个主题才可以，修改AndroidManifest.xml中的代码，如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.materialtest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...
        <activity android:name=".Activity" android:theme="@style:MyTheme">
        </activity>
    </application>

</manifest>

这里使用android:theme属性单独给Activity指定了MyTheme这个主题，这样就完成了。

例子：
Android状态栏微技巧，带你真正理解沉浸式模式

好文分享：
Material Design 技术分享