开启Material Design之旅——资源收集总结

Material Design初识

Goole I/O 2014 发布了Material Design设计思想。

Material Design是视觉设计语言，当然它不是 a+b或者c+d,它是设计理念设计规范。

Material Design 模拟真实世界的物理体验，通过光效、表面感、运动感等体现物体运动规律、交互方式、空间关系,使之UI具有实体感，似乎真实存在的物体一般。

精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，设置更有意义和合理的动画效果，呈现给用户

官网 http://www.google.com/design/spec/material-design/introduction.html

翻译 http://wiki.jikexueyuan.com/project/material-design/

Awesome-MaterialDesign项目 https://github.com/lightSky/Awesome-MaterialDesign

nice blog

http://blog.csdn.net/xushuaic/article/details/40627389

http://www.uisdc.com/comprehensive-material-design-note#

http://www.open-open.com/lib/view/open1416664325648.html

http://blog.csdn.net/jjwwmlp456/article/details/40614919

Material Design应用

Android 5.0 Lollipop和已经更新的support libraries可以帮助开发者构建Material UI，使应用具备Material Design风格。

官方提供了包含AppCompat的support libraries用于向下兼容。AppCompat (aka ActionBarCompat)是为了Android 4.0中的ActionBar的向后兼容到 Gingerbread（2.3） 系统，在兼容性实现和Framework实现的上层提供了一个通用的API层。

最新的 21Version appcompat 提供一些5.0的API和特性设置。

Android 5.0 Lollipop之Material

Android5.0 Lollipop系统的Material Design支持

1 视图具有Z高度(elevation,translationZ)、阴影，可设置轮廓（outline）属性

2 图片着色tint，裁剪图片

2 矢量图

3 动画反馈：Activity Transition过渡切换动画；触摸反馈动画譬如波纹效果（Ripple）；揭露动画（Reveal）；曲线运动（PathInterpolator）

4 视图状态改变动画（StateListAnimator|AnimatedStateListDrawable）；矢量图状态改变动画（AnimatedVectorDrawable）

调色板Color Palette

Android 5.0 Lollipop需要配置Material Theme主题，才可以使应用具备Material特性

注意：minsdk为21

<style name="AppTheme" parent="android:Theme.Material.Light">
<item name="android:colorPrimary">#673AB7</item>
<item name="android:colorPrimaryDark">#173AB0</item>
<item name="android:colorAccent">#FF4081</item>
<item name="android:windowBackground">@color/window_background</item>
<item name="android:statusBarColor">#512DA8</item>
<item name="android:navigationBarColor">#512DA8</item>
<item name="android:colorControlHighlight">#673AB7</item>
</style>

我们视app为color palette调色板，设置统一基本色调，如下图所示



注意：android:colorPrimaryDark、android:statusBarColor、android:navigationBarColor等其他只有在 Android 5.0 Lollipop上才起作用

相关blog

android:tint 着色

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0801/3248.html

http://www.open-open.com/lib/view/open1438438952410.html

VectorDrawable

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2396.html

Trandition

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html

向下兼容

设置依赖库

dependencies {
...
compile "com.android.support:appcompat-v7:21.0.0"
}

主题配置color palette

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/my_awesome_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">@color/my_awesome_darker_color</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">@color/accent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
</style>

OK !使用AppTheme，当前的App就具有统一的基本色调

接着配合使用Design Support Library材料设计兼容库，来搭建个具有Material Design风格的App吧！

Design Support Library 依赖库为 com.android.support:design:23.0.1

Design Support Library

Design Support Library是Google提供的MD材料设计兼容库

依赖库com.android.support:design:23.0.1

具备MD风格的组件如下：

TextInputLayout 强大提示功能的MD风格的EditText

FloatingActionButton MD风格的圆形按钮

Snackbar 可交互的Toast

TabLayout 选项卡

NavigationView DrawerLayout的SlideMenu

CoordinatorLayout 超级FrameLayout

AppBarLayout MD风格的滑动AppBar

CollapsingToolbarLayout 可折叠MD风格ToolbarLayout

官网：http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

codePath

https://guides.codepath.com/android/Floating-Action-Buttons

https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

翻译文

FloatingActionButton:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html

coordinatorLayout: http://www.open-open.com/lib/view/open1437312265428.html

nice blog

http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group

http://blog.csdn.net/feiduclear_up/article/details/46514791

CoordinatorLayout

“CoordinatorLayout is a super-powered FrameLayout.CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views”

CoordingatorLayout是加强版的FrameLayout，有两个重要用法

1 根布局或者chrome布局

2 协调一个或者多个子视图间的特殊交互的容器

“By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the DefaultBehavior annotation.
Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.
Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.”

CoordinatorLayout的 child view通过Behavior进行通信，使得一个子view的变化可以通知到另一个子view。CoordinatorLayout所做的事情就是当成一个通信的桥梁，连接不同的view。

CoordinatorLayout的 child view 可以有个锚点（anchor）

CoordinatorLayout.Behavior

Behavior初探：http://segmentfault.com/a/1190000002888109

Behavior知乎UI：http://www.jianshu.com/p/d372d37e8640

(1)CoordinatorLayout&FloatingActionButton&SnackBar

CoordinatorLayout为主容器

FloatingActionButton默认有个DefaultBehavior来检测Snackbar的添加，为SnackBar腾出空间上移动画

(2)CoordinatorLayout&FloatingActionButton&RecyclerView

CoordinatorLayout为主容器

FloatingActionButton通过自定义Behavior来检测RecyclerView滚动事件，实现交互

ScrollAwareFABBehavior：https://github.com/ianhanniballake/cheesesquare/commit/aefa8b57e61266e4ad51bef36e669d69f7fd749c

FloatingActionButton配置如下

app:layout_anchor="@id/recyclerview"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="com.lseven.demo_design.ScrollAwareFABBehavior"

(3)CoordinatorLayout&AppBarLayout&ToolBar&RecyclerView

扩展或者缩小Toolbar（头部），让主内容区域有更多的空间

CoordinatorLayout为主容器

AppBarLayout有个ScrollingViewBehavior检测滚动事件，AppBarLayout作为容器包含Toolbar，则Toolbar可响应滚动事件进行扩展或者缩小。

Design support library包含了一个特殊的字符串资源@string/appbar_scrolling_view_behavior，

它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的view之上（譬如RecyclerView|NestedScrollView|ViewPager等）

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

AppBarLayout里的child view可以设置app:layout_scrollFlags=”scroll|enterAlways” 来设置滚动动画效果，属性必须包含scroll,

其他属性有enterAlways、enterAlwaysCollapsed、exitUntilCollapsed（没体会出来差别，可以自己试试）

(4)CoordinatorLayout&AppBarLayout&CollapsingToolbarLayout&Toolbar

视差滚动效果动画，头部缩小或者扩展（可按比例显示大小）

CoordinatorLayout为主容器，CollapsingToolbarLayout作为容器包含ToolBar,AppBarLayout包含CollapsingToolBarLayout

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">

<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/cheese_5"
app:layout_collapseMode="parallax"
android:minHeight="100dp"/>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

app:layout_collapseMode属性目录

属性	属性值	描述
none	1	The view will act as normal with no collapsing behavior.
pin	2	The view will pin in place.
parallax	3	The view will scroll in a parallax fashion. See the layout_collapseParallaxMultiplier attribute to change the multiplier.

layout_collapseParallaxMultiplier属性

The multiplier used when layout_collapseMode is set to ‘parallax’. The value should be between 0.0 and 1.0.

Must be a floating point value, such as “1.2”.

FloatingActionButton

部分属性

app:backgroundTint - 设置FAB的背景颜色。

app:rippleColor - 设置FAB点击时的背景颜色。

app:borderWidth - 该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth=”0dp”。

app:elevation - 默认状态下FAB的阴影大小。

app:pressedTranslationZ - 点击时候FAB的阴影大小。

app:fabSize - 设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。

src - 设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。

app:layout_anchor - 设置FAB的锚点，即以哪个控件为参照点设置位置。

app:layout_anchorGravity - 设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

相关blog

http://blog.csdn.net/lmj623565791/article/details/46678867

http://www.07net01.com/2015/07/875911.html

TabLayout

https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout

可以添加icon或者自定义Tab的view

(目前自定义Tab高度以及横向等分布局，选中状态不清楚如何更改和设置，望知者告知，O(∩_∩)O谢谢)

NavigationView

NavigationView使用：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0608/3011.html

自定义NavigationView：http://blog.csdn.net/lmj623565791/article/details/46405409

保持itemIcon原本的颜色：

http://stackoverflow.com/questions/31394265/navigation-drawer-item-icon-not-showing-original-colour

navigationView.setItemIconTintList(null);

NavigationView如何添加Button等控件目前未查到

Demo传送门

http://download.csdn.net/detail/u013211506/9180393

本文到此为止，如有出入请指明，O(∩_∩)O谢谢