Android5.0新特性-Material Design

概述

2014年,Google携Android5.X重装归来。全新的UI设计和更加优化的性能,令开发人员眼前一亮css

安装和配置Android5.0开发环境

开发Android还得靠AS。下载地址
http://developer.android.com/intl/zh-cn/sdk/index.html
这里写图片描写叙述html

材料设计概述

材料的形态模拟

Google经过模拟天然界纸墨的形态变化、光线与阴影、纸与纸之间的控件层级关系,带来一种真实的空间感java

更加真实的动画

Android5.x大量添加了各类新的动画效果,让整个设计风格更加天然和谐。android

大色块的使用

Material Desigin中运用了大量高度饱和、适中亮度的大色块来突出界面的主次,并一扫Android4.X系列Holo主题的沉重感。让界面更加富有时尚感和视觉冲击力windows

此外还有很是多新的设计风格,如悬浮button,聚焦大图、无框button、波纹效果等新特性
详细可參考
http://www.google.com/design/#resourcesbash

材料设计能作哪些工做

  • 保证向后的兼容性
  • 使用材料设计的主题
  • 让视图产生阴影
  • 使用RecyclerView和CardView
  • 定制动画

intel x86模拟器

下载和安装intel x86模拟器加速器

以前的ARM模拟器,是以软件的形式模拟,因此很是慢~x86可以选这使用宿主机器的GPU等,和真机的速度相差无几~markdown

如下更新SDK使用了国内的代理。需要的童鞋可以看下
这里写图片描写叙述app

下载

打开SDK Manager
这里写图片描写叙述svg

install 以后
这里写图片描写叙述布局

安装

找到SDK例如如下文件夹,因为这个加速器是跨平台的,windows操做系统相应的是exe执行文件,安装就能够
这里写图片描写叙述

这里写图片描写叙述

固然你也可以使用genymotion~有真机最好了~

从官方下载x86模拟器加速器

除了从SDK中下载,还可以从Intel官方站点上下载加速器

官网例如如下:
https://software.intel.com/zh-cn/android

https://software.intel.com/zh-cn/android/articles/intel-hardware-accelerated-execution-manager/

这里写图片描写叙述

检測 Intel X86模拟器加速器是否成功安装

这里写图片描写叙述

cmd命令行窗体:

这里写图片描写叙述

安装x86模拟器镜像

尽管咱们上面安装了加速器。但是仅仅是模拟器而已,镜像才是关键!

!!

从SDK中直接安装

官方推荐的安装方法

因为个人电脑操做系统是64位。咱们打算在5.0的模拟器中使用,因此选择例如如下:
这里写图片描写叙述

从Intel官方下载安装

https://software.intel.com/zh-cn/android/articles/android-44-kitkat-x86-emulator-system-image

这里写图片描写叙述

指导文档

下载后放到相应的文件夹就能够~

体验以x86模式执行Android模拟器

这里写图片描写叙述

都是默认选项,选择使用宿主机器的GPU~
这里写图片描写叙述

哈哈 速度那是必须的快~

Material主题

Material Design现在有三种默认的主题可以设置:

  1. @android:style/Theme.Material (dark version)
  2. @android:style/Theme.Material.Ligh (ligth version)
  3. @android:style/Theme.Material.Ligh.DarkActionBar

同一时候 Android5.x提出了Color Palette (颜色调色板)的概念。让开发人员可以本身设定系统区域的颜色。使整个APP的颜色风格和系统的颜色风格保持一致。

经过例如如下代码,可以经过使用本身定义Style的方式来建立本身的Color Palette 颜色主题,从而实现不一样的颜色风格。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material"> <!--appBar的颜色--> <item name="android:colorPrimary">#BEBEBE</item> <!--状态栏的颜色--> <item name="android:colorPrimaryDark">#FF5AEBFF</item> <item name="android:navigationBarColor">#FFFF4130</item> <item name="android:colorAccent">#BF3EFF</item> </style>
</resources>

这里写图片描写叙述
这里写图片描写叙述

RecyclerView

详见本人还有一篇博客 RecyclerView全然解读


立体卡片CardView

详情请查看鄙人CradView的使用


视图和阴影

Material Design的一个很是重要的特性就是拟物扁平化。


这里写图片描写叙述

影响视图阴影的因素

以往的Android View一般有2个属性——X和Y,而在Android5.X中,Google为其添加了一个新的属性 —Z,相应垂直方向上的高度变化。

在Android5.x中,View的Z值由 elevation + translationZ(这两个都是5.x引入的新特性)组成。

当中 elevation是静态的成员,translationZ可以在代码中使用来实现动画的效果。

Z = elevation + translationZ

经过布局文件和Java代码设置视图的阴影

经过布局文件设置

在xml中设置View的视图高度

android:elevation="Xxdp"

比方:

<TextView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/cardview_contents" android:elevation="10dp" />

经过Java代码设置

view.setTranslationZ(XXX)

一般也会使用属性动画来为视图高度改变的时候添加一个动画效果

if(flag){
    view.animate().translationZ(100);
    flag=false;
}else{
    view.animate().translationZ(0);
    flag=true;
}

阴影拖动


视图裁剪

着色

ripple_drawable资源

矢量drawable资源

在Android中使用SVG矢量图

SVG设计器

实现SVG矢量动画

APP的兼容性

相关文章
相关标签/搜索