直接拿来用！十大Material Design开源项目

** **本文详细介绍了十个Material Design开源项目，从示例、FAB、菜单、动画、Ripple到Dialog，看被誉为“Google第一次在设计语言和规范上超越了Apple”的Material Design是如何逐渐成为App的一种全新设计标准。
介于拟物和扁平之间的Material Design自面世以来，便引起了很多人的关注与思考，就此产生的讨论也不绝于耳。本文详细介绍了在Android开发者圈子里颇受青睐的十个Material Design开源项目，从示例、FAB、菜单、动画、Ripple到Dialog，看被称为“Google第一次在设计语言和规范上超越了Apple”的Material Design是如何逐渐成为App的一种全新设计标准。
1. MaterialDesignLibrary

在众多新晋库中，MaterialDesignLibrary可以说是颇受开发者瞩目的一个控件效果库，能够让开发者在Android 2.2系统上使用Android 5.0才支持的控件效果，比如扁平、矩形、浮动按钮，复选框以及各式各样的进度指示器等。

![](http://dl2.iteye.com/upload/attachment/0103/5584/80416adf-b40f-31f9-b2e0-3986c8ab7790.jpg)

除上述之外，MaterialDesignLibrary还拥有SnackBar、Dialog、Color selector组件，可非常便捷地对应用界面进行设置。

进度指示器样式效果设置：

Xml代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="tag"><</span><span class="tag-name">com.gc.materialdesign.views.ProgressBarCircularIndetermininate</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/progressBarCircularIndetermininate&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;32dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;32dp&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;#1E88E5&#8221;</span> <span class="tag">/></span>

Dialog：

Java代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- Dialog dialog = <span class="keyword">new</span> Dialog(Context context,String title, String message);

- dialog.show();

2. RippleEffect

由来自法兰西的Robin Chutaux开发的RippleEffect基于MIT许可协议开源，能够在Android API 9+上实现Material Design，为开发者提供了一种极为简易的方式来创建带有可扩展视图的header视图，并且允许最大程度上的自定制。

![](http://dl2.iteye.com/upload/attachment/0103/5586/f48bad92-5fd0-3a3a-8864-72c2581337d1.jpg)

Xml代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="tag"><</span><span class="tag-name">com.andexert.library.RippleView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/more&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;?android:actionBarSize&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;?android:actionBarSize&#8221;</span>

- <span class="attribute">android:layout_toLeftOf</span>=<span class="attribute-value">&#8220;@+id/more2&#8221;</span>

- <span class="attribute">android:layout_margin</span>=<span class="attribute-value">&#8220;5dp&#8221;</span>

- <span class="attribute">ripple:rv_centered</span>=<span class="attribute-value">&#8220;true&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;?android:actionBarSize&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;?android:actionBarSize&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@android:drawable/ic_menu_edit&#8221;</span>

- <span class="attribute">android:layout_centerInParent</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:padding</span>=<span class="attribute-value">&#8220;10dp&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@android:color/holo_blue_dark&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">com.andexert.library.RippleView</span><span class="tag">></span>

3. MaterialEditText

随着Material Design的到来，AppCompat v21也为开发者提供了Material Design的控件外观支持，其中就包括EditText，但却并不好用，没有设置颜色的API，也没有任何Google Material Design Spec中提到的特性。于是，来自国内的开发者“扔物线”开发了MaterialEditText库，直接继承EditText，无需修改Java文件即能实现自定义控件颜色。

![](http://dl2.iteye.com/upload/attachment/0103/5588/36b38f8f-bb26-3601-a5f0-1f0d539aeae5.jpg)

自定义Base Color：

Xml代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="attribute">app:baseColor</span>=<span class="attribute-value">&#8220;#0056d3&#8221;</span>

自定义Error Color：

Xml代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="attribute">app:maxCharacters</span>=<span class="attribute-value">&#8220;10&#8221;</span>

- <span class="attribute">app:errorColor</span>=<span class="attribute-value">&#8220;#ddaa00&#8221;</span>

![](http://dl2.iteye.com/upload/attachment/0103/5590/19b8efe3-976d-33e0-ad92-ac5d3ed97ade.jpg)

4. Android-LollipopShowcase

Android-LollipopShowcase是由来自奥地利的移动、后端及Web开发者Mike Penz所开发的演示应用，集中演示了新Material Design中所有的UI效果，以及Android Lollipop中其他非常酷炫的特性元素，比如Toolbar、RecyclerView、ActionBarDrawerToggle、Floating Action Button（FAB）、Android Compat Theme等。

![](http://dl2.iteye.com/upload/attachment/0103/5594/9a803370-9135-31a6-8a35-300b8c467ccb.jpg)

5. MaterialList

MaterialList是一个能够帮助所有Android开发者获取谷歌UI设计规范中新增的CardView（卡片视图）的开源库，支持Android 2.3+系统。作为ListView的扩展，MaterialList可以接收、存储卡片列表，并根据它们的Android风格和设计模式进行展示。此外，开发者还可以创建专属于自己的卡片布局，并轻松将其添加到CardList中。

![](http://dl2.iteye.com/upload/attachment/0103/5596/b878adaf-ce4a-393c-871e-9a2961036f92.jpg)

使用过程代码，在布局中声明MaterialListView：

Xml代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="tag"><</span><span class="tag-name">RelativeLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:paddingLeft</span>=<span class="attribute-value">&#8220;@dimen/activity_horizontal_margin&#8221;</span>

- <span class="attribute">android:paddingRight</span>=<span class="attribute-value">&#8220;@dimen/activity_horizontal_margin&#8221;</span>

- <span class="attribute">android:paddingTop</span>=<span class="attribute-value">&#8220;@dimen/activity_vertical_margin&#8221;</span>

- <span class="attribute">android:paddingBottom</span>=<span class="attribute-value">&#8220;@dimen/activity_vertical_margin&#8221;</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">com.dexafree.materiallistviewexample.view.MaterialListView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/material_listview&#8221;</span><span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

6. android-floating-action-button

Floating Action Button（FAB）是众多专家大牛针对Material Design讨论比较细化的一个点，通过圆形元素与分割线、卡片、各种Bar的直线形成鲜明对比，并使用色彩设定中鲜艳的辅色，带来更具突破性的视觉效果。也正因如此，在Github上，有着许多与FAB相关的开源项目，基于Material Design规范的开源Android浮动Action Button控件android-floating-action-button便是其中之一。

![](http://dl2.iteye.com/upload/attachment/0103/5598/8e27c078-651c-3144-ae17-d1f4d50189b8.jpg)

其主要特性如下：

支持常规56dp和最小40dp的按钮；
支持自定义正常、Press状态以及可拖拽图标的按钮背景颜色；
AddFloatingActionButton类能够让开发者非常方便地直接在代码中写入加号图标；
FloatingActionsMenu类支持展开/折叠显示动作。

7. android-ui

android-ui是Android UI组件类库，支持Android API 14+，包含了ActionView、RevealColorView等UI组件。其中，ActionView可使Action动作显示动画效果，而RevealColorView则带来了Android 5.0中的圆形显示/隐藏动画体验。

![](http://dl2.iteye.com/upload/attachment/0103/5600/2f4e3b74-0df7-3495-802d-1217ef3c76f9.jpg)

8. Material Menu

Material Menu为开发者带来了非常酷炫的Android菜单、返回、删除以及检查按钮变形，完全控制动画，并为开发者提供了两种MaterialMenuDrawable包装。

![](http://dl2.iteye.com/upload/attachment/0103/5602/d17b8ee9-7c50-313d-af88-40f327255f96.jpg)

自定义颜色等操作：

Java代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="comment">// change color  </span>

- MaterialMenu.setColor(<span class="keyword">int</span> color)

- 
- <span class="comment">// change transformation animation duration  </span>

- MaterialMenu.setTransformationDuration(<span class="keyword">int</span> duration)

- 
- <span class="comment">// change pressed animation duration  </span>

- MaterialMenu.setPressedDuration(<span class="keyword">int</span> duration)

- 
- <span class="comment">// change transformation interpolator  </span>

- MaterialMenu.setInterpolator(Interpolator interpolator)

- 
- <span class="comment">// set RTL layout support  </span>

- MaterialMenu.setRTLEnabled(<span class="keyword">boolean</span> enabled)

9. Android-ObservableScrollView

Android-ObservableScrollView是一款用于在滚动视图中观测滚动事件的Android库。它能够轻而易举地与Android 5.0 Lollipop引进的工具栏（Toolbar）进行交互，还可以帮助开发者实现拥有Material Design应用视觉体验的界面外观，支持ListView、ScrollView、WebView、RecyclerView、GridView组件。

![](http://dl2.iteye.com/upload/attachment/0103/5604/5b551bd0-86ce-35dd-a5e8-f82e67495008.jpg)

交互代码回调：

Java代码

  <embed src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" type="application/x-shockwave-flash" width="14" height="15">
  </embed>
</div>

- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onUpOrCancelMotionEvent(ScrollState scrollState) {

- ActionBar ab = getSupportActionBar();

- <span class="keyword">if</span> (scrollState == ScrollState.UP) {

- <span class="keyword">if</span> (ab.isShowing()) {

- ab.hide();

- }

- } <span class="keyword">else</span> <span class="keyword">if</span> (scrollState == ScrollState.DOWN) {

- <span class="keyword">if</span> (!ab.isShowing()) {

- ab.show();

- }

- }

- }

10. Material Design Icons

最后，再来介绍一下Google Material Design规范的官方开源图标集Material Design Icons。良心Google开源了包括Material Design系统图标包在内的750个字形，涵盖动作、音视频、通信、内容、编辑器、文件、硬件、图像、地图、导航、通知、社交等各个方面，适用于Web、Android和iOS应用开发，绝对是开发者及设计师必备的资源。

![](http://dl2.iteye.com/upload/attachment/0103/5608/934b7436-05e3-3a42-9887-ce96b150c472.jpg)

图标格式主要包括：

SVG格式，24px和48px；
SVG和CSS Sprites；
适用于Web平台的1x、2x PNG格式图标；
适用于iOS的1x、2x、3x PNG图标；
所有图标的Hi-dpi版本（hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi）。

💬 评论