深入了解Material Design(一)

dangai00 2015-06-30

Material design

    Material Design大家并不陌生,Google为了保证Android平台上交互及视觉规范化提出了Material Design这个设计理念,它包括视觉、交互等多个方面。本文,在初步介绍Material Design的基础上,以一个开发者的视角来带大家来深入了解Material Design的开发及实现。

一、什么是Material Design

    官方解释见链接http://www.google.com/design/spec/material-design/introduction.html#

    个人理解Material Design是Google设计的一套视觉语言,将优先的经典的设计原理与科技创新相结合,为开发者提供一套完成视觉和交互设计规范。移动设备是这套设计语言的基础对象,让用户在不同的平台、不同尺寸的设备上能保持一致的体验。

     Material Design强调交互上的即时反馈,即对于用户的触控等行为app需要给出即时的反应。同时Material Design要求应用给用户带入感,让用户在使用时是沉浸在当前的应用当中。例如Google给出了沉浸式状态栏等“工具”,希望通过改变StatusBar和NavigationBar来给用户更强的融入感,专注于应用本身提供的内容。

    Google从动画、颜色、样式、触控反馈、布局等多个方面给出了Material Design的设计要求。无论是单一的控件还是图文布局,Google都给出了明确的设计说明,有兴趣的同学可以去上方提到的官方链接处做进一步了解,因为更多的涉及到UI和UE上的内容,这里就不做过多的介绍了。

二、Material Design的兼容性

    Material Design是在Android5.0的基础上提出的全新的设计语言,因此有很多控件特性都只在5.0及以上的版本才支持。为了更好的向下兼容老的平台版本,Google提供了v4、v7、v13包,同时在今年又提供了Support Design包。通过在项目中引入这些包的最新版本,可以很快的完成相关界面的开发工作。

    值得注意的是,Theme是无法直接向下兼容的,因此需要去实现两套不同的styles.xml来保持在不同平台上的Theme的一致性,具体的实现方式,会在后面的代码实践中为大家讲解。

三、Material Design的实践初体验

     我们初次体验和实践需要完成的是一个带有全新ActionBar的Activity,并为其设置沉浸式状态栏。保证在Android4.4和Android5.0两个平台上的体验和视觉一致性。ActionBar在新版本的Android中已经被废弃,取而代之的是使用更为简便的Toolbar,而在android.support.design包中Google引入了全新的AppBarLayout,它可以配合Toolbar等其他的控件,来实现ActionBar的诸多效果。本文只做沉浸式状态栏的讲解,在后面的文章中,会进一步的介绍AppBarLayout的作用及用法。

     首先为了兼容5.0以下的Android平台,我们需要引入v7的support jar包。在Gradle中加入如下的依赖包。写法如下:

dependencies{
  //appcompat支持,在低版本上引入Material Design支持的Activity和对应的Theme
  compile 'com.android.support:appcompat-v7:22.2.0' 
 //Google今年刚刚推出的全新的support包,用于完善Material Design的开发包,本次我们只需要用到其中的AppBarLayout
  compile 'com.android.support:design:22.2.0'
}
    然后,我们来编辑应用对应的Material Design的Theme。如果你的应用不需要支持Android5.0以下的平台,可以按照如下的方式定义Style:
<style name="Base.Theme.DesignDemo" parent="android:Theme.Material.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
</style>
     而本次我们需要兼容5.0以下的版本,因此需要建立两份styles文件,同时对应的Activity需要继承自AppCompatActivity。先来看两份styles怎么写及每个item的意义是什么。

     在vaules文件夹下创建styles.xml文件,定义如下的style:

相关推荐