(转) Material Designer的低版本兼容实现——View & Animation

很长一段时间没写东西了,其实是因为最近在研究Material Designer这个东西,这回开的这个系列文章是讲如何将Material Designer在程序中实现。作为一个程序员我们不需要关心太多的设计,我们只需要知道设计师给出的要求我们能否实现就行了。但,作为开头,我们还是得来讲讲这个设计重点是什么。
Material Designer
宗旨:让不同大小不同用途的设备上拥有同一种设计风格

1.纸张

这种设计模式大量参考了纸墨的模式,将空间变得像纸张一样,而用户的手指就是毛笔。用户按到控件上就会产生墨晕效果。这样的好处是明确的告诉用户是否点击了控件,而且还能让用户一下子明白控件的布局思路。毕竟一张一张的纸叠加起来的控件是很容易让人接受的。这里还有一个词“引喻”,虽然控件像纸张,但是它具有变大变小,改变颜色等能力,所以完全可以不用拘泥于现实纸张。

2.深度
新的设计中希望所有的控件都是现实世界中的隐喻,比如你按下按钮,按钮就应该有被按下的状态,这里就要用到了涟漪(Ripple)效果了。其实涟漪效果是来表示你手指按上去后墨晕扩散的效果的,下面的图能很明白的说明这点。

3.动画
动画贯穿于Material Designer之中,官方文档中用了很大的篇幅来讲解动画效果,希望让设计的动画效果很美观。但我个人认为为了动画而动画是完全不可取的,比如下面的例子


这里的动画看起来十分自然和美观,但是在实际中用户切换activity是很常见的,如果经常出现这个动画用户会觉得“很腻”,十分不友好。动画其实是一个画龙点睛的东西,万不可变为画蛇添足。那么,上图的这个动画应该在什么时候使用呢?用在第一次用户进入一个新的界面的时候,我们为了凸显这个界面的某种特定功能,就可以让这个功能的图标动起来,表现出一个点我试试的效果。

4.排版
新的设计里面很在意排版,里面列出了很多详细的数据来支持我们的设计。对于留白也有了详细的说明。优秀的排班会让你的应用看起来干净,优雅,这点十分重要。在之后的文章中我也会多少说到这方面的知识。

设计文档(不用FQ)
http://design.1sters.com/
http://www.ui.cn/Material/

目录
Material Designer的低版本兼容实现(二)—— Theme

Material Designer的低版本兼容实现(三)——Color

Material Designer的低版本兼容实现(四)—— ToolBar

Material Designer的低版本兼容实现(五)—— ActivityOptionsCompat

Material Designer的低版本兼容实现(六)—— Ripple Layout

Material Designer的低版本兼容实现(七)—— Rectange Button

Material Designer的低版本兼容实现(八)—— Flat Button

Material Designer的低版本兼容实现(九)—— Float Button & Small Float Button

Material Designer的低版本兼容实现(十)—— CheckBox & RadioButton

Material Designer的低版本兼容实现(十一)—— Switch

Material Designer的低版本兼容实现(十二)—— Slider or SeekBar

Material Designer的低版本兼容实现(十三)—— ProgressBar

Material Designer的低版本兼容实现(十四)—— CardView

留着以后真正用到了再写的东东
没写真的不是因为我懒,主要是东西太多了,还是请大家参考下面的项目MaterailCenter来看开源库吧。自己真正用到的时候就可以拿来用了。
Material Designer的低版本兼容实现(XX)—— EditText & Typography
MaterialEditText:https://github.com/rengwuxian/MaterialEditText(一中国大神做的,感觉很棒)
Android 5.0更新了Roboto样式,不论多大的text,展示起来都会美观和简洁。
添加了一种新的中等高度属性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance样式为了平衡内容密度和阅读的舒适感,实现了推荐的打印式缩放的。比如你可以简单的通过 android:textAppearance=”@android:style/TextAppearance.Material.Title” 设置 “Title"风格。在旧的版本中可以使用AppCompat support library的样式: “@style/TextAppearance.AppCompat.Title”.

Material Designer的低版本兼容实现(XX)—— Dialog
MaterialDialog:https://github.com/drakeet/MaterialDialog(国人做的)
L—Dialog:https://github.com/lewisjdeane/L-Dialogs

Material Designer的低版本兼容实现(XX)—— Drawer
L-Drawer:https://github.com/ikimuhendis/LDrawer
MaterialNavigationDrawer:https://github.com/neokree/MaterialNavigationDrawer

Material Designer的低版本兼容实现(XX)—— Animation
Transitions-Everywhere:https://github.com/andkulikov/transitions-everywhere
Android-UI:https://github.com/markushi/android-ui
CircularReveal:https://github.com/ozodrukh/CircularReveal

参考项目:https://github.com/lightSky/MaterialDesignCenter(这个项目就是下面文章作者做的)
参考文章:http://blog.csdn.net/xushuaic/article/details/40627389
http://blog.csdn.net/xushuaic/article/details/40627389

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,512评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,401评论 2 45
  • “我知道大家觉得我个子很矮,年纪又小,不配当市长。”面对质疑,市长轻轻一笑,“就像所有的人类都觉得,我们老鼠太小,...
    唐路小镇阅读 178评论 3 9
  • 问题 本地使用maven编译和运行时一切都正常,但是通过ci的方式,编译、打包、发布到部署环境,运行时抛出了一条显...
    lambeta阅读 11,131评论 0 8
  • (本故事純屬虛構如有雷同純屬巧合) 好像圣埃克苏佩里遇到小王子,我遇到丸子小朋友的時候是我最傷心的時候。 丸子小朋...
    馨馨阅读 381评论 0 1