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:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"> </style> <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#673AB7</item> <item name="colorPrimaryDark">#512DA8</item> <item name="colorAccent">#FF4081</item> <item name="android:windowNoTitle">true</item> </style> </resources>创建按values-v21文件夹,并再其下创建styles.xml文件
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"> <item name="android:windowDrawsSystemBarBackgrounds">true</item> <!--<item name="android:statusBarColor">@android:color/transparent</item>--> </style> </resources>先来解释下,Base.Theme.DesignDemo中几个Item的意义。我们来看张Google给出的图解:
windowDrawsSystemBarBackgrounds
,将它设置为true,系统将在你的window里面绘制status bar,默认为TRUE,之所以要写出来是因为你的theme有可能是继承过来的,确保为true。
statusBarColor
设置为透明是因为我们不再需要系统的status bar,因为我们无法控制它的位置。
public class ImmerseActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_immerse);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.user_icon_default);
ab.setDisplayHomeAsUpEnabled(true);
}
}
布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.river.newfeaturestudy.ImmerseActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="@dimen/appbarlayout_height" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> </RelativeLayout>我们将前文写好的样式引入到app里,编辑AndroidManifest.xml
<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/Theme.DesignDemo" > <activity android:name=".ImmerseActivity" android:label="@string/title_activity_immerse" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application>让我们把代码运行起来,看看在5.0的机器上会是什么样的效果呢?