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给出的图解:
该图说明了colorPrimary以及colorPrimaryDark分别指向的部位,而colorAccent是用来表现checkboxes等UI控件的。通过上面的styles文件我们可以看到,针对5.0的机器我们增加两个item,它们是5.0新增的属性。
windowDrawsSystemBarBackgrounds
,将它设置为true,系统将在你的window里面绘制status bar,默认为TRUE,之所以要写出来是因为你的theme有可能是继承过来的,确保为true。
statusBarColor
设置为透明是因为我们不再需要系统的status bar,因为我们无法控制它的位置。
为什么我们要注释掉statusBarColor的设置呢?因为当我们把statusBarColor设置为透明时,会导致样式中定义的colorPrimaryDark会失效。那我们什么时候需要用到这条设置呢?当我们使用DrawerLayout这个抽屉布局的时候,DrawerLayout会帮助我们来完成对statusBar的控制。DrawerLayout的用法,我们会在后面讲到。
接下来,我们新建一个Activity并编写它的布局。
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的机器上会是什么样的效果呢?
这就是我们希望看到的沉浸式状态了。那同样的代码,在4.4的机器上又会是如何的表现呢?
可见在4.4上,并没有达到我们期望中的沉浸式状态栏效果。要如何解决这个问题呢?我们在下一篇文章中,会详细讲解。
- 大小: 28.8 KB
- 大小: 49.1 KB
分享到:
相关推荐
Material Design中部分控件相关使用(RecycleView TabLayout等)
原质化设计(Material Design)中文版 完整版 Google I/O 2014 发布的 Material Design 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范,对从业人员意义重大
material design libaray 符合google material design 的开源控件库demo,几乎涵盖了现有的所有控件,androidstudio 工程
android material design实现demo,项目源码下载即用,多个demo,赶快下载学习吧。低版本实现material design风格
Material Design控件的使用,集合了最新的一些官方控件,实现一些功能。
WPF =>MaterialDesign工具
Material Design 动画原则
jquery-accordion-menu-multilevel是一款非常酷的Material Design风格多级下拉列表菜单jQuery插件。该下拉列表在菜单项点击时采用漂亮的点击波特效,并提供了三种预设的颜色主题样式。
android material design 设计风格,包括多个自定义控件
Material Design之toolbar实现策划菜单
materialdesign动画示例
google 官方关于新的设计Material Design的说明描述.
GOOGLE Material Design规范,android界面设计必备手册
Material Design风格登录界面(采用 MVP + Data-Binding + Material Design )。
Material Design 简体中文版-完整版 pdf Android UI
Material Design是一个很好用的WPF样式库和控件集,对于稍微有点WPF基础的开发者非常友好。简单好用是我的第一感:直接使用NuGet就可以获取到资源包,通过其官方的DemoApp(MaterialDesignDemo)很容易使用控件和样式...
一个具有Material Design设计风格的代码示例,拷贝即可用。
material design android模板-PSD文件
一份超全面的Material Design 暗色主题设计指南。 最近,Material Design 中新增了关于暗色主题的设计规范。暗色主题(Dark theme)是指在 UI 界面中使用大面积的深色来构成界面的一种设计,它是产品默认主题的一种...