2 android design material 详解 安卓 material design

1.Material Design概述

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
简介
Material Design语言 的一些重要功能包括 系统字体Roboto的升级版本 ，同时颜色更鲜艳，动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计，包括安卓和网页端的Gmail和Calendar。大家可能还会记得，看到过有关这些变动的文章， 有些博客 已经掌握了外泄截屏，显示经过了重新设计的Gmail，界面更干净、更简约。在安卓平台上，这种新界面被称为Material，支持各种新动画效果，具有内置的实时UI阴影，以及可在不同屏幕之间切换的hero元素。
详解
Material Design：谷歌拿出媲美苹果的设计
过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不必看产品设计，只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。这种混乱难以体现出Google的风格，如果Google的风格不是混乱和无序的话。
2011年，拉里·佩奇成为Google CEO之后，他管理公司的政策从过去的自由、放任，变为紧密、整合。根据我们的报道，在Google发展的早期，因为鼓励观点的碰撞，结果发展成一种不留情面的争论氛围，高管之间冲突不断，甚至会拒绝合作。佩奇决心要改变公司的氛围，2013年2月，在纳帕山谷的卡内罗斯客栈酒店里，他对所有Google高管说，Google要实现10倍的发展速度，要用全新的方法来解决问题，因此高管之间要学会合作。从现在开始，Google要对争斗零容忍。

除了Google不同产品线相互之间变得更加开放、合作外，佩奇还大胆改变 Google“以工程师为主导”的文化。2011年，公司启动代号为“肯尼迪”的项目，召集公司里所有重要的设计师，重新设计Google里的每一项产品，寻找一种共同的设计语言。最终他们找到跨产品的设计是“卡片式设计”。不仅如此，2012年，佩奇大胆地作出一项决定，让设计师参与到早期产品的设计开发中，这项产品是我们看到的Google Now——一项典型采用卡片式设计的跨设备产品，从Android到Chrome，它的表现都几乎一致。
可以这么说，从Google Now上，Google的设计师们通过整合Google现有的技术和能力，再加上对跨设备界面与交互思考，结合卡片式设计，终于设计出在不同设备上界面和体验都相对统一的产品。而这种跨界的设计经验，经过两年的努力，复用在一致饱受割裂、碎片化困扰的Android平台上。

Android一开始充满着旧Google时代的风格：自由、放任。开发者可以任意上传自己的应用，而不必通过审核；开发者可以随意按照自己的想法设计应用，Google方面不予任何限制。可以说，Android一开始就是一片Google开辟的荒地，他允许每个人都可以随意使用，结果是所有人都各行其是，让这块荒地乱糟糟的。直到Android 4.0，从Palm跳槽到Google担任Android用户体验副总裁的马蒂亚斯·杜瓦迪（Matias Duarte）上任后，才真正提出设计指导。
而Google I/O 2014上着重展示的Material Design，以非常高调的方式，宣布了Google Design的存在：不欣赏设计，对设计毫无感觉的Google已是昨日。在发布会当时，Google还上线名为Google Design的网站。从Android到衍生的Android Wear、Auto和TV，Material Design贯穿其中，成为沟通不同平台、设备的灵魂，让用户在不同平台上也有连贯的体验。为了维护这种一致性，Google甚至不允许第三方修改Android Wear、Auto和TV的界面以及交互，十分强势。
Material Design不能简单地归纳为平面化设计（Flat Design）。实际上，Android 4.0的设计风格，也不是纯粹的平面化设计，在经过仔细观察之下，我们可以看到Android 4.0在细节上并没有反对高光、阴影、纹理，换言之它并不反对立体感。不过，它也不能归类为拟物化设计，毕竟它所使用的图案、形状并非是对现实实体的模拟，而是按照自己对数字世界的理解，以色彩、图案、形状进行视觉信息上的划分。
根据Hi-iD之前在《花样,形式,风格,氛围,主义……设计》中总结设计当中不同的层次，以Google过去各个产品而言，都充满了不同的花样和形式，但无法统一为一种风格。而Material Design则结合卡片式设计，又结合现实世界里纸张的隐喻，统一了Google在设计上的表达，从而展示出一种强烈的风格。这种风格不会因为我们使用Android Wear或Android TV等不同的设备，而感到不同。Hi-iD说得好，“风格既是自我表达也是一种记名和品牌”。
Material Design在设计上并没有完全抛弃Google过去在设计上取得的成果。Material Design和Google的标志一样，崇尚多彩，但它并不使用那种很艳丽的颜色，反而似乎是为了让图案变得沉稳，而有意令原本很晃眼的色彩混入一点点的灰色，让图案变得活泼之余，又不会因为过于艳丽而让人感觉到俗套和嬉皮。它也没有抛弃阴影，仔细观察Android 4.0的下拉菜单，我们可以看到底部和右侧有着淡淡的阴影。

不过，比起过去的Android Design来说，Material Design更有自己的目标，它不仅仅为了好看而已，它要让不同设备的屏幕上表现出一致、美观的视觉体验以及交互。根据InfoQ报道，2014年4月Accel Design大会期间，杜瓦迪接受InfoQ采访时提出，“作为一个概念，移动已死，它完蛋了。”他的意思是说，“将用于移动设备的应用程序作为单独的应用程序自行设计是一个错误的做法。”
杜瓦迪说，“不应该为不同的屏幕规格创建不同的产品，而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品：桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时，他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观，也适用于其功能集。如果一个人开发了一个打车应用程序，而它能在7英寸的屏幕上运行，但不能在2英寸的屏幕上运行，这是不行的。”

为了统一跨设备间的界面和交互，让用户得到连贯的体验。Material Design不再让像素处于同一个平面，而是让它们按照规则处于空间当中，具备不同的维度。按照Wired的话来说，那就是让像素具备海拔高度，这样子的话，系统的不同层面的元素，都是有原则、可预测的，不让用户感到无所适从，也避免开发者担心因为不同的视觉风格而产生冲突。
Material Design还规范了Android的运动元素，让按钮的弹入弹出，卡片的滑入滑出以及从一个界面变化成另一个界面的方法（比如从介绍一首歌的界面到控制播放的界面），都是秩序的、深思熟虑过的。Wired总结，Material Design中只有在高亮动作以及改变交互状态时，才会使用运动元素来表示。
对于现实世界中的隐喻，Material Design更加倾向于用色彩来提示。我们按下屏幕当中的按钮时，可以看到按钮颜色迅速发生变化，向石头投入湖面一样，产生了一波涟漪。杜瓦迪这样设计是因为Material Design中的按钮都处于一个平面，不再突起，因此它必须采用和以往不同的表示方法，以表明自己已经被按下。
Material Design所展示的模板当中，最显眼的是它的小圆点。它的作用好像iPhone上的Home键，是快捷功能入口，又是视觉上有趣的点缀。
然而，正如Material Design名字所暗示的，为了适应多尺寸的屏幕，杜瓦迪以及他的团队，寻求一种更加抽象的表达，一种存在屏幕里的显示“材料”。根据The Verge报道，杜瓦迪团队在面对Google产品里大量采用的卡片式设计时，灵感火花一闪：何不如这些“卡片”，想像成现实当中存在的，四处滑动的物体。

如果这些卡片遵循物理世界里的法则，那么它就有自己的规矩，不见得每个人都能够任意使用，对于设计师来说“限制”是有必要的。在Google设计师的想象中，这种抽象的“材料”特性很像纸张，但它又做到现实当中纸张做不到的事情，比如变大变小。这赋予这种“材料”极大的灵活性，让它足以适应不同尺寸的屏幕。然而，对于Google来说，Material Design还将扩展到Google其它产品当中去，让所有产品都烙印上浓浓的Google风格。
对于杜瓦迪来说，从Android 4.0到Material Design，体现了他身为设计师的素质和能力，而在这不同的经历当中，他的感受是，“打造Ice Cream时，我好似军舰上的一名上校，被叫去轮机舱，而这艘船即将在30分钟后转弯。创造Material Design就像指挥太平洋舰队的海军上将。我们要在一无所知的情况下作出决定，而船在48小时后启航。”
至于Material Design本身，它是一个足以媲美苹果设计的一套设计框架。
展示
曾制作了微软、T-Mobile和MTV的第三方客户端软件设计专家Five分享了部分谷歌实验中的Material Design动画，整个界面使人的感觉非常舒服，动画的过渡也非常流畅。
随着Android 5.0的发布，Material Design也必定会成为未来APP设计的趋势，这种设计理念让Android界面在体验上更加新鲜和简洁，且能够非常有效的激发应用开发者的创作热情，使其带来更加卓越的应用界面。

2、MaterialDesign的使用及开发

android support 包下的导入：

implementation 'com.android.support:design:28.0.0'

androidx 包下的导入：

implementation 'com.google.android.material:material:1.1.0'

初建项目是 app 分割属性说明：

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

colorPrimary：主色，
colorPrimaryDark：主色–深色，一般可以用于状态栏颜色、底部导航栏
colorAccent：（代表各个空间的基调颜色–CheckBox、RadioButton、ProgressBar等等）

具体使用可查看google说明链接：https://www.material.io/design

下面列几个常用的使用：

底部的App bar

<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="100dp"
        android:clipToPadding="false">

        <!-- Scrollable content -->

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        app:navigationIcon="@drawable/ic_menu_24dp"
        app:menu="@menu/bottom_app_bar"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_add_24dp"
        app:layout_anchor="@id/bottomAppBar"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

In menu/bottom_app_bar.xml:

<menu
      ...>

    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search_24dp"
        android:title="@string/search"
        android:contentDescription="@string/content_description_search"
        app:showAsAction="ifRoom"
        />

    <item
        android:id="@+id/more"
        android:title="@string/more"
        android:contentDescription="@string/content_description_more"
        app:showAsAction="never"
        />

</menu>

In menu/navigation icon drawables:

<vector
    ...
    android:tint="?attr/colorControlNormal">
    ...
</vector>

In code:

bottomAppBar.setNavigationOnClickListener {
    // Handle navigation icon press
}

bottomAppBar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.search -> {
            // Handle search icon press
            true
        }
        R.id.more -> {
            // Handle more item (inside overflow menu) press
            true
        }
        else -> false
    }
}

底部导航栏 Bottom Navigation

布局如下：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  ...
  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottom_navigation"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:menu="@menu/bottom_navigation_menu" />

</LinearLayout>

In bottom_navigation_menu.xml inside a menu resource directory:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:id="@+id/page_1"
      android:enabled="true"
      android:icon="@drawable/icon_1"
      android:title="@string/text_label_1"/>
  <item
      android:id="@+id/page_2"
      android:enabled="true"
      android:icon="@drawable/icon_2"
      android:title="@string/text_label_2"/>
</menu>

Note:BottomNavigationView does not support more than 5 menu items.
In code:

BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when(item.itemId) {
        R.id.item1 -> {
            // Respond to navigation item 1 click
            true
        }
        R.id.item2 -> {
            // Respond to navigation item 2 click
            true
        }
        else -> false
    }
}

另一种选中的设置方法：

bottomNavigation.setOnNavigationItemReselectedListener { item ->
    when(item.itemId) {
        R.id.item1 -> {
            // Respond to navigation item 1 reselection
        }
        R.id.item2 -> {
            // Respond to navigation item 2 reselection
        }
    }
}

结果如下图：

为底部的导航添加title：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      ...
      android:title="@string/text_label"/>
  ...
</menu>

labelVisibilityMode属性可用于调整每个导航项目的文本标签的行为。 共有四种可见性模式：LABEL_VISIBILITY_AUTO（默认）：当少于3个项目时，标签表现为“已标记”；如果有4个或更多项目，则标签表现为“已选择”。LABEL_VISIBILITY_SELECTED：仅在所选导航项目LABEL_VISIBILITY_LABELED上显示标签 ：标签显示在所有导航项目上LABEL_VISIBILITY_UNLABELED：标签被隐藏在所有导航项目中

添加未读红点

初始化并显示一个与menuItemId关联的BadgeDrawable，随后对该方法的调用将重用现有的BadgeDrawable：

var badge = bottomNavigation.getOrCreateBadge(menuItemId)
badge.isVisible = true
// An icon only badge will be displayed unless a number is set:
badge.number = 99

如果需要隐藏 badge：

val badgeDrawable = bottomNavigation.getBadge(menuItemId)
    if (badgeDrawable != null) {
        badgeDrawable.isVisible = false
        badgeDrawable.clearNumber()
    }

移除：

bottomNavigation.removeBadge(menuItemId)