61阅读

Material Design-到底如何看待Material Design设计

发布时间:2017-10-08 所属栏目:苹果谷歌

一 : 到底如何看待Material Design设计

到底如何看待Material Design设计_material

11月份,Google推出Android 5.0Lollipop,而抢眼的Material Design设计语言也华丽登场。为此,设计师和工程师开始奔走相告,到处赞美新版设计语言 ,希望Material Design能够统一Google众多的产品线,打造一个横跨所有设备的设计语言。

Mater(www.61k.com)ial design并不是一种系统界面设计风格,而是一种设计语言,它包含了系统界面风格、交互、UI等。Material Design在基本元素的处理上,借鉴了传统的印刷设计,从字体版式、网格系统,到空间、比例、配色、图像等方面,都进行了大胆的平面化的创新。而今天,雷锋网并不与你分享更多关于Material Design的细节,比如界面的颜色如何,只是想分享更多Material Design的品牌体验,更多让你惊喜的东西。

界面即品牌

所有的体验始于第一次接触,包括物体的手感,比如塑料和金属,以及使用界面。而最重要的是使用界面的清晰度。清晰度让我们直接体验以及感知这个品牌想要传达的东西。所以,界面很重要,也是我们建立第一次体验的地方。

MaterialDesign不仅仅是在简单地执行你所要求的任务,而是拥有着目的与含义。这种感知体验对Google品牌体验有很好的帮助。如果要权衡苹果与Google,可以这样说:Material Design设计语言更像是一套界面设计标准,这种标准将会撼动苹果的垄断地位。作为果粉,笔者必须要坦白,我已经开始爱上Android。

设计无处不在

让人懒得动脑的Material Design设计语言实反映了两事实:

第一, 开发者愿意使用这套设计语言。

第二, 好设计考虑了很多细节。

一个品牌要么在细节中建立,要么在细节中灭亡。因此,设计没有一点是不应该认真考虑的。而Material Design在这一点上做得很好,考虑了很多细节。

Google设计在进化

值得一提的是,Material Design并不是无中生有而是Google设计不断进化的结果。2011年,Gmail邮箱的按钮变得更加扁平化。2012年,Google引入分层的卡片设计,使得更多的空白和精心设计的排版层次结构。而这种设计理念如今也包含在Material Design中。因此,我们看见这种设计语言是一个逐步的过程。

虽然Material Design也有改进空间,但是,令人不得不提的是Google的野心:统一所有设备。即是有这种野心,但事实是残酷的。任何一个在软件公司工作的人都能证明对保留系统更新是一种难以想象的困难,这里涉及商业利益,原代码以及固有的用户。

或许,在某一规模上,Material Design可以完成这艰难的任务。

via:wired

二 : Material Design:谷歌拿出媲美苹果的设计

过去Google的产品线,每一个都相当的独立,在产品的设计上反映得尤为明显,甚至不必看产品设计,只要看一下Google每款产品的LOGO都能发现许多不同风格的设计。(www.61k.com)这种混乱难以体现出Google的风格,如果Google的风格就是混乱和无序的话。

2011年,拉里·佩奇成为Google CEO之后,他管理公司的政策从过去的自由、放任,变为紧密、整合。根据我们此前的报道,在Google发展的早期,因为鼓励观点的碰撞,结果发展成一种不留情面的争论分为,高管之间冲突不断,甚至会拒绝合作。佩奇决心要改变公司的氛围,2013年2月,在纳帕山谷的卡内罗斯客栈酒店里,他对所有Google高管说,Google要实现10倍的发展速度,要用全新的方法来解决问题,因此高管之间要学会合作。从现在开始,Google要对争斗零容忍。

媲美tv Material Design:谷歌拿出媲美苹果的设计

除了Google不同产品线相互之间变得更加开放、合作外,佩奇还大胆改变Google“以工程师为主导”的文化。2011年,公司启动代号为“肯尼迪”的项目,召集公司里所有重要的设计师,重新设计Google里的每一项产品,寻找一种共同的设计语言。最终他们找到跨产品的设计是“卡片式设计”。不仅如此,2012年,佩奇大胆地作出一项决定,让设计师参与到早期产品的设计开发中,这项产品是现在我们看到的Google Now——一项典型采用卡片式设计的跨设备产品,从Android到Chrome,它的表现都几乎一致。

可以这么说,从Google Now上,Google的设计师们通过整合Google现有的技术和能力,再加上对跨设备界面与交互思考,结合卡片式设计,终于设计出在不同设备上界面和体验都相对统一的产品。而现在这种跨界的设计经验,经过两年的努力,复用在一致饱受割裂、碎片化困扰的Android平台上。

媲美tv Material Design:谷歌拿出媲美苹果的设计

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的下拉菜单,我们可以看到底部和右侧有着淡淡的阴影。

媲美tv Material Design:谷歌拿出媲美苹果的设计

不过,比起过去的Andorid Design来说,Material Design更有自己的目标,它不仅仅为了好看而已,它要让不同设备的屏幕上表现出一致、美观的视觉体验以及交互。根据InfoQ报道,2014年4月Accel Design大会期间,杜瓦迪接受InfoQ采访时提出,“作为一个概念,移动已死,它完蛋了。”他的意思是说,“将用于移动设备的应用程序作为单独的应用程序自行设计是一个错误的做法。”

杜瓦迪说,“不应该为不同的屏幕规格创建不同的产品,而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品:桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时,他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观,也适用于其功能集。如果一个人开发了一个打车应用程序,而它能在7英寸的屏幕上运行,但不能在2英寸的屏幕上运行,这是不行的。”

媲美tv Material Design:谷歌拿出媲美苹果的设计

为了统一跨设备间的界面和交互,让用户得到连贯的体验。Material Design不再让像素处于同一个平面,而是让它们按照规则处于空间当中,具备不同的维度。按照Wired的话来说,那就是让像素具备海拔高度,这样子的话,系统的不同层面的元素,都是有原则、可预测的,不让用户感到无所适从,也避免开发者担心因为不同的视觉风格而产生冲突。

扩展:谷歌material design / material design / material design 配色

Material Design还规范了Android的运动元素,让按钮的弹入弹出,卡片的滑入滑出以及从一个界面变化成另一个界面的方法(比如从介绍一首歌的界面到控制播放的界面),都是秩序的、深思熟虑过的。Wired总结,Material Design中只有在高亮动作以及改变交互状态时,才会使用运动元素来表示。

对于现实世界中的隐喻,Material Design更加倾向于用色彩来提示。现在我们按下屏幕当中的按钮时,可以看到按钮颜色迅速发生变化,向石头投入湖面一样,产生了一波涟漪。杜瓦迪这样设计是因为Material Design中的按钮都处于一个平面,不再突起,因此它必须采用和以往不同的表示方法,以表明自己已经被按下。

Material Design所展示的模板当中,最显眼的是它的小圆点。它的作用好像iPhone上的Home键,是快捷功能入口,又是视觉上有趣的点缀。

然而,正如Material Design名字所暗示的,为了适应多尺寸的屏幕,杜瓦迪以及他的团队,寻求一种更加抽象的表达,一种存在屏幕里的显示“材料”。根据The Verge报道,杜瓦迪团队在面对Google产品里大量采用的卡片式设计时,灵感火花一闪:何不如这些“卡片”,想像成现实当中存在的,四处滑动的物体。

媲美tv Material Design:谷歌拿出媲美苹果的设计

如果这些卡片遵循物理世界里的法则,那么它就有自己的规矩,不见得每个人都能够任意使用,对于设计师来说“限制”是有必要的。在Google设计师的想象中,这种抽象的“材料”特性很像纸张,但它又做到现实当中纸张做不到的事情,比如变大变小。这赋予这种“材料”极大的灵活性,让它足以适应不同尺寸的屏幕。然而,对于Google来说,Material Design还将扩展到Google其它产品当中去,让所有产品都烙印上浓浓的Google风格。

对于杜瓦迪来说,从Android 4.0到Material Design,体现了他身为设计师的素质和能力,而在这不同的经历当中,他的感受是,“打造Ice Cream时,我好似军舰上的一名上校,被叫去轮机舱,而这艘船即将在30分钟后转弯。创造Material Design就像指挥太平洋舰队的海军上将。我们要在一无所知的情况下作出决定,而船在48小时后启航。”

至于Material Design本身,它是一个足以媲美苹果设计的一套设计框架。

扩展:谷歌material design / material design / material design 配色

三 : 使用Material Design Tint和视图详解

视图(www.61k.com)

首先来讲Material Design 视图的概念,在新的api中,新添加了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系,z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重,这里有一个前提,所有的元素的厚度都是1dp。

tint 使用Material Design Tint和视图详解

Material Design中UI主打扁平化,但是这种扁平化是扁而不平,是对现实的拟物扁平化,所以引入z轴空间的概念,即所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。
tint 使用Material Design Tint和视图详解

既然加入z轴,那么这种空间感是怎么体现出来的呢?答案就是View的elevation(阴影高度),细心的可以发现在Android 5.0后所有控件中都多了这么两个属性:elevation、translationZ。分别表示阴影的大小和往z轴平移的大小(用作动画效果)。不过这两个属性只在api 21(5.0)以上才有效果。在z轴上有这么一个关系:

Z = elevation + translationZ<喎?http://www.2cto.com/kf/ware/vc/" target="_blank">vcD4NCjwvYmxvY2txdW90ZT4NCjxwPs7Sw8e/ydLU1NpsYXlvdXTW0Lvy1d/U2rT6wuvW0Mq508PL/MPHo7o8L3A+DQo8YmxvY2txdW90ZT4NCgk8cD5hbmRyb2lkOmVsZXZhdGlvbjxiciAvPg0KCVZpZXcuc2V0RWxldmF0aW9uKCk8L3A+DQo8L2Jsb2NrcXVvdGU+DQo8aDEgaWQ9"tint详解">Tint详解

在Android5.0后,引入了一个叫tint的属性,意思叫“着色”,有两种形式:

1、android:backgroundTint=””
2、android:tint=”“

细心的同学就会发现,在给一些控件(Button、EditText等)设置背景时候可以看到新添加了backgroundTint属性:
tint 使用Material Design Tint和视图详解
而在给ImageView设置时候,则添加了tint和backgroundTint属性:
tint 使用Material Design Tint和视图详解

同时,还分别新增了与之对应的TintMode属性,表示tint的模式:
tint 使用Material Design Tint和视图详解

那么,既然有了background可以设置背景色还加入Tint干嘛呢?Tint是用来是干什么的呢?
首先我们得了解这两个属性的用处:

了解之前我们先了解TintMode

顾名思义,TintMode是改变我们着色的模式。
Mode的取值有六种:

1、add-
2、screen-
3、src_over-
4、src_in-
5、multiply-
6、src_atop-

关于它们的特性请看传送门:PorterDuff.Mode
一般情况下默认是src_in。

1、backgroundTint - 当然是着背景色了

那么我们就来使用它试试效果,我们给Button着上红色的背景色:

效果:
tint 使用Material Design Tint和视图详解
我们发现这背景色并没有改变,为什么呢?既然tint是给背景色着色,那么肯定是需要有背景色的前提下,我们给Button随便加上一个背景颜色后:

效果:
tint 使用Material Design Tint和视图详解
可以发现,tint的作用的却是给当前控件的背景色着上一个我们指定的颜色。

每个模式不同的效果想看的自己实现,这里就不贴了,因为重点是下面对ImageView的遮罩进行着色。

2、tint - 则是给图片着上一层遮罩颜色

废话不多说,贴一张效果图自然明白了,我们给图片罩上一层红色的遮罩后,不同模式显示的效果:
tint 使用Material Design Tint和视图详解

Tint兼容性

上述效果均是在Android 5.0以上的平台上才支持,不过,如果我们想支持5.0以下的,我们可以使用support-v7包下的AppCompat**** 控件,不过我们还是不能在layout中使用它,只能通过代码

ViewCompat.setSupportBackgroundTintList(ColorStateList tint);ViewCompat.setSupportBackgroundTintMode(PorterDuff.Mode tintMode);

来设置。setSupportBackgroundTintList()方法接收的是一个ColorStateList类型的参数,我们可以通过

ColorStateList lists = getResources().getColorStateList(R.color.red);

得到对应颜色的ColorStateList对象,并设置给它。

如,下面我使用AppCompat控件并着色:

代码:

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); AppCompatButton mBtnCompat = (AppCompatButton) findViewById(R.id.btn1); ColorStateList lists = getResources().getColorStateList(R.color.red); mBtnCompat.setSupportBackgroundTintList(lists); mBtnCompat.setSupportBackgroundTintMode(PorterDuff.Mode.SRC_IN); ColorStateList lists2 = getResources().getColorStateList(R.color.bule); AppCompatEditText mEdt = (AppCompatEditText) findViewById(R.id.edt); mEdt.setSupportBackgroundTintList(lists2); }

其实AppCompatEditText中底下那根线是一张黑色的.9线条图片,AppCompatButton也是通过一张.9图片进行着色的,所以我们通过backgroundTint能让它着成不同的颜色。
效果:
tint 使用Material Design Tint和视图详解

所以,综上的效果,backgroundTint和android:tint属性可以帮我们在原图只有一张的情况下,我们利用tint可以轻松的把图片换成我们需要的颜色,这极大减小了apk因包含众多图片的大小。

让自定义控件加上对Tint支持

在5.0以下,我们对自定义的控件也加上对tint的支持:

public class AppCompatCustomView extends View implements TintableBackgroundView { private static final int[] TINT_ATTRS = { android.R.attr.background }; private TintInfo mInternalBackgroundTint; private TintInfo mBackgroundTint; private TintManager mTintManager; public AppCompatCustomView(Context context) { this(context, null); } public AppCompatCustomView(Context context, AttributeSet attributeSet) { this(context, attributeSet, 0); } public AppCompatCustomView(Context context, AttributeSet attributeSet, int defStyle) { super(context, attributeSet, defStyle); if (TintManager.SHOULD_BE_USED) { TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attributeSet, TINT_ATTRS, defStyle, 0); if (a.hasValue(0)) { ColorStateList tint = a.getTintManager().getTintList(a.getResourceId(0, -1)); if (tint != null) { setInternalBackgroundTint(tint); } } mTintManager = a.getTintManager(); a.recycle(); } } private void applySupportBackgroundTint() { if (getBackground() != null) { if (mBackgroundTint != null) { TintManager.tintViewBackground(this, mBackgroundTint); } else if (mInternalBackgroundTint != null) { TintManager.tintViewBackground(this, mInternalBackgroundTint); } } } @Override protected void drawableStateChanged() { super.drawableStateChanged(); applySupportBackgroundTint(); } private void setInternalBackgroundTint(ColorStateList tint) { if (tint != null) { if (mInternalBackgroundTint == null) { mInternalBackgroundTint = new TintInfo(); } mInternalBackgroundTint.mTintList = tint; mInternalBackgroundTint.mHasTintList = true; } else { mInternalBackgroundTint = null; } applySupportBackgroundTint(); } @Override public void setSupportBackgroundTintList(ColorStateList tint) { if (mBackgroundTint == null) { mBackgroundTint = new TintInfo(); } mBackgroundTint.mTintList = tint; mBackgroundTint.mHasTintList = true; applySupportBackgroundTint(); } @Nullable @Override public ColorStateList getSupportBackgroundTintList() { return mBackgroundTint != null ? mBackgroundTint.mTintList : null; } @Override public void setSupportBackgroundTintMode(PorterDuff.Mode tintMode) { if (mBackgroundTint == null) { mBackgroundTint = new TintInfo(); } mBackgroundTint.mTintMode = tintMode; mBackgroundTint.mHasTintMode = true; applySupportBackgroundTint(); } @Nullable @Override public PorterDuff.Mode getSupportBackgroundTintMode() { return mBackgroundTint != null ? mBackgroundTint.mTintMode : null; }}

四 : 直接拿来用!十大Material Design开源项目

来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1

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

1. MaterialDesignLibrary

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

floating material 直接拿来用!十大Material Design开源项目

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

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

<com.gc.materialdesign.views.ProgressBarCircularIndetermininate android:id="@+id/progressBarCircularIndetermininate" android:layout_width="32dp" android:layout_height="32dp" android:background="#1E88E5" />

Dialog:

Dialog dialog = new Dialog(Context context,String title, String message); dialog.show();

2. RippleEffect

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

floating material 直接拿来用!十大Material Design开源项目

用法(在XML文件中声明一个RippleView):

<com.andexert.library.RippleView  android:id="@+id/more"  android:layout_width="?android:actionBarSize"  android:layout_height="?android:actionBarSize"  android:layout_toLeftOf="@+id/more2"  android:layout_margin="5dp"  ripple:rv_centered="true">  <ImageView  android:layout_width="?android:actionBarSize"  android:layout_height="?android:actionBarSize"  android:src="@android:drawable/ic_menu_edit"  android:layout_centerInParent="true"  android:padding="10dp"  android:background="@android:color/holo_blue_dark"/> </com.andexert.library.RippleView>

3. MaterialEditText

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

floating material 直接拿来用!十大Material Design开源项目

自定义Base Color:

app:baseColor="#0056d3"

floating material 直接拿来用!十大Material Design开源项目

自定义Error Color:

app:maxCharacters="10" app:errorColor="#ddaa00"

floating material 直接拿来用!十大Material Design开源项目

4. Android-LollipopShowcase

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

floating material 直接拿来用!十大Material Design开源项目

5. MaterialList

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

floating material 直接拿来用!十大Material Design开源项目

使用过程代码,在布局中声明MaterialListView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:paddingLeft="@dimen/activity_horizontal_margin"  android:paddingRight="@dimen/activity_horizontal_margin"  android:paddingTop="@dimen/activity_vertical_margin"  android:paddingBottom="@dimen/activity_vertical_margin">  <com.dexafree.materiallistviewexample.view.MaterialListView  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:id="@+id/material_listview"/> </RelativeLayout>

6. android-floating-action-button

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

floating material 直接拿来用!十大Material Design开源项目 floating material 直接拿来用!十大Material Design开源项目

其主要特性如下:

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

7. android-ui

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

floating material 直接拿来用!十大Material Design开源项目

8. Material Menu

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

floating material 直接拿来用!十大Material Design开源项目

自定义颜色等操作:

// change color MaterialMenu.setColor(int color) // change transformation animation duration MaterialMenu.setTransformationDuration(int duration) // change pressed animation duration MaterialMenu.setPressedDuration(int duration) // change transformation interpolator MaterialMenu.setInterpolator(Interpolator interpolator) // set RTL layout support MaterialMenu.setRTLEnabled(boolean enabled)

9. Android-ObservableScrollView

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

floating material 直接拿来用!十大Material Design开源项目floating material 直接拿来用!十大Material Design开源项目floating material 直接拿来用!十大Material Design开源项目

交互代码回调:

@Override  public void onUpOrCancelMotionEvent(ScrollState scrollState) {  ActionBar ab = getSupportActionBar();  if (scrollState == ScrollState.UP) {  if (ab.isShowing()) {  ab.hide();  }  } else if (scrollState == ScrollState.DOWN) {  if (!ab.isShowing()) {  ab.show();  }  }  }

10. Material Design Icons

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

floating material 直接拿来用!十大Material Design开源项目

图标格式主要包括: 

  • SVG格式,24px和48px;
  • SVG和CSS Sprites;
  • 适用于Web平台的1x、2x PNG格式图标;
  • 适用于iOS的1x、2x、3x PNG图标;
  • 所有图标的Hi-dpi版本(hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi)。
本文标题:Material Design-到底如何看待Material Design设计
本文地址: http://www.61k.com/1066951.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1