Material-Design

Material Design真的很好看，动画效果真的很实用。前面也写了一些文章介绍如何编写Material风格的程序，但是很多都是一些新的api，低版本上面没有这些api，我们没办法使用。但是不用气馁，google官方，以及一些大牛，给我们提供了一些程序，让我们在低版本上面可以实现Material风格的程序，这里就给大家介绍一下。 妹子图截屏 使用support library 使用support library最新的版本，appcomt21，可以在较低版本上面实现部分风格，在之前的文章我已经说过了，这里在系统的说一下。 应用主题 这部分的话之前的文章说过，链接在这里: http://blog.isming.me/2014/10/18/creating-android-app-with-material-design-one-theme/ 使用gralde进行构建的话，在依赖中添加v7包： [?](http://www.open-open.com/lib/view/open1416277425289.html#) <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="gutter"> <div class="line number1 index0 alt2"> 1 </div> <div class="line number2 index1 alt1"> 2 </div> <div class="line number3 index2 alt2"> 3 </div> <div class="line number4 index3 alt1"> 4 </div> <div class="line number5 index4 alt2"> 5 </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> `dependencies {` </div> <div class="line number2 index1 alt1"> `compile ``'com.android.support:appcompat-v7:21.0.+'` </div> <div class="line number3 index2 alt2"> `compile ``'com.android.support:cardview-v7:21.0.+'` </div> <div class="line number4 index3 alt1"> `compile ``'com.android.support:recyclerview-v7:21.0.+'` </div> <div class="line number5 index4 alt2"> `}` </div> </div> </td> </tr> </table> 使用eclipse构建的话，加入最新的appcompat包即可。 ...

Material Designer 宗旨：让不同大小不同用途的设备上拥有同一种设计风格 1.纸张 这种设计模式大量参考了纸墨的模式，将空间变得像纸张一样，而用户的手指就是毛笔。用户按到控件上就会产生墨晕效果。这样的好处是明确的告诉用户是否点击了控件，而且还能让用户一下子明白控件的布局思路。毕竟一张一张的纸叠加起来的控件是很容易让人接受的。这里还有一个词“引喻”，虽然控件像纸张，但是它具有变大变小，改变颜色等能力，所以完全可以不用拘泥于现实纸张。 2.深度 新的设计中希望所有的控件都是现实世界中的隐喻，比如你按下按钮，按钮就应该有被按下的状态，这里就要用到了涟漪（Ripple）效果了。其实涟漪效果是来表示你手指按上去后墨晕扩散的效果的，下面的图能很明白的说明这点。 3.动画 动画贯穿于Material Designer之中，官方文档中用了很大的篇幅来讲解动画效果，希望让设计的动画效果很美观。但我个人认为为了动画而动画是完全不可取的，比如下面的例子 这里的动画看起来十分自然和美观，但是在实际中用户切换activity是很常见的，如果经常出现这个动画用户会觉得“很腻”，十分不友好。动画其实是一个画龙点睛的东西，万不可变为画蛇添足。那么，上图的这个动画应该在什么时候使用呢？用在第一次用户进入一个新的界面的时候，我们为了凸显这个界面的某种特定功能，就可以让这个功能的图标动起来，表现出一个点我试试的效果。 4.排版 新的设计里面很在意排版，里面列出了很多详细的数据来支持我们的设计。对于留白也有了详细的说明。优秀的排班会让你的应用看起来干净，优雅，这点十分重要。在之后的文章中我也会多少说到这方面的知识。 设计文档（不用FQ） http://design.1sters.com/ http://www.ui.cn/Material/ 目录 Material Designer的低版本兼容实现（二）—— Theme{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（三）——Color{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（四）—— ToolBar{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（五）—— ActivityOptionsCompat{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（六）—— Ripple Layout{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（七）—— Rectange Button{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（八）—— Flat Button{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（九）—— Float Button & Small Float Button{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（十）—— CheckBox & RadioButton{#cb_post_title_url.postTitle2} Material Designer的低版本兼容实现（十一）—— Switch{#cb_post_title_url.postTitle2} ...

** **本文详细介绍了十个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才支持的控件效果，比如扁平、矩形、浮动按钮，复选框以及各式各样的进度指示器等。  除上述之外，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 ...

Android 5.0 Lollipop 是迄今为止最重大的一次发布，很大程度上是因为 material design —— 这是一门新的设计语言，它刷新了整个 Android 的用户体验。但是对于开发者来说，要设计出完全符合 material design 哲学的应用，是一个很大的挑战。Android Design Support Library 对此提供了很好的支持，里面汇集了很多重要的 material design 控件，支持所有 Android 2.1 及后续版本。里面你可以看到 navigation drawer view、floating labels、floating action button、snackbar、tabs，以及一套将它们紧密结合在一起的动作与滚动框架。 Navigation View（导航视图） 无论从应用标识、内容导航，还是设计一致性来讲，navigation drawer 都是首当其冲的焦点。现在，NavigationView 让导航栏变得更简单，它提供了 navigation drawer 需要的框架，以及通过资源文件来自定义更多菜单项的能力。  你只需要将 NavigationView 作为 DrawerLayout 的内容视图来使用即可，例如：  这里你会注意到两个属性：app:heanderLaytout 用来控制 header 部分的布局；app:menu 指定了菜单资源。NavigationView 自动处理了状态栏的变化，保证可以在 API 21+ 的设备上正确运行。 最简单的 drawer 菜单就是一个允许选择的菜单项集合，例如：  选中的菜单会高亮显示，以提醒用户当前选择的是哪个菜单项。 你也可以在菜单中使用 subheader 来实现独立的分组：  调用 setNavigationItemSelectedListener() 后，在菜单项被选中的时候，你会通过OnNavigationItemSelectedListener 得到回调。在处理回调时，你会知道是哪个菜单项被点击，此时你可以处理选择事件，修改选中状态，加载新的内容，以及通过代码来关闭 drawer，或者其他任何你想执行的操作。 文字输入时的悬浮标签 尽管 EditText 已经为 material design 做了一些改善，但是还不够，譬如它在我们输入第一个字符的时候，就会自动隐藏掉提示标签。现在你该使用 TextInputLayout 了，它会在用户开始输入之后，自动将提示标签悬浮到 EditText 上方，这样用户就永远都能知道输入内容的上下文。 ...