Android 5.0特征补充1

来源:互联网 发布:零基础学大数据靠谱吗 编辑:程序博客网 时间:2024/06/08 04:53

Android 5.0

Android 5.0最主要的变化就是采用了全新的Material Design界面。

Material Design就是材质化设计,材质化设计指的是物体是有质地的,2个控件之间是有实体的,不允许互相穿墙。

  • 世界观(3D世界 —— Z轴的概念)
  • 原则(符合直觉、动画、活泼)
  • 实现(主题、组件、动画)
  • 主题 —— Material Design相关主题
  • 组件 —— Android 5.0新控件,比如RecyclerView,CardView
  • 动画 —— 新动画(Activity转场动画等)

使用Material主题

使用的时候的向下兼容:
默认的style.xml还用之前的主题,但是新增一个“values-21”的文件夹,在下面的style.xml中设置主题为Material Design相关主题。
同时,V7包的新的AppCompat相关主题包含了支持Material Design的兼容代码与资源文件,如果关联了V7包,也可以直接配置Theme.AppCompat相关主题。
相关资料网站:
Metrarial Design风格配色:
www.materialpalette.com/
Metrarial Design主题介绍:
http://developer.android.com/intl/zh-cn/training/material/theme.html

Android 5.0提供了三种Metrarial Design的材质化主题:

  1. Theme.Material
  2. Theme.Material.Light
  3. Theme.Material.Light.DarkActionBar

除此之外,我们还可以自定义一些主题样式:

属性 含义
android:colorPrimary 标题栏颜色
android:colorPrimaryDark 状态栏颜色
android:textColorPrimary 主要文本颜色
android:textColorSecondary 次要文本颜色
android:navigationBarColor 底部导航栏颜色
android:windowBackground 默认背景颜色
colorAccent 控件在活动状态的颜色

如果是在自己的xml布局中,希望自己设定的颜色跟着主题的颜色发生变化,那么可以考虑直接取用系统主题的颜色值来作为背景的属性值:
这里写图片描述

主题编辑器

AndroidStudio提供了一个主题编辑器,我们可以通过主题编辑器对主题中的各种颜色统一进行设置。

打开方式:
AndroidStudio -> Tools -> Android -> Theme Editor

注意:
若是预览Android N(Android 7.x版本)的效果图,需要JDK 1.8的环境,否则会报错。

这里写图片描述

动态切换主题

如果想快速定位一个功能是在哪被实现的,可以通过全局搜索关键字来实现。
在AndroidStudio中,我们可以通过“右键选中项目 -> Find in Path…”来进行全局搜索。

我们可以通过搜索“主题选择”关键字,来看一下主题选择按钮的点击事件实现逻辑:
这里写图片描述

动态切换主题的实现逻辑:

  1. 首先,先在styles.xml文件夹下定义一堆样式
    这里写图片描述
  2. 在Activity中定义一个成员变量,来标识当前默认显示的主题:
    这里写图片描述
  3. 在Activity的onCreate方法中通过系统的“setTheme()”方法来设置当前Activity要显示的主题。
    注意:必须在“super.onCreate()” 方法执行之前调用“setTheme()”方法:
    这里写图片描述

  4. 在更改主题时,根据被更改的主题,设置mTheme的值:
    这里写图片描述

  5. 更改完mTheme的值之后,关闭当前Activity,并重新加载Activity。当重新加载Activity的时候,就会执行到Activity的onCreate方法,setTheme方法就会被调用,修改的主题生效。
    注意:关闭Activity之前,要取消Activity的动画,开启Activity之前也一样,要取消掉动画,造成一种主题颜色直接被刷新的假象,提升用户体验。
    这里写图片描述

细节处理:
- 假如应用中存在大量的Activity,应抽取一个BaseActivity,在BaseActivity中的onCreate方法中设置主题,使所有的Activity的主题一起得到更改;
- 如果想更新过一次主题后,下次再进应用的时候,主题仍旧生效,需要每次更新主题后,将其标识存到SP中。

阴影的作用

这里写图片描述

Android 5.0提供了一个Z轴的概念,Z轴的高度决定了控件的默认的阴影的大小:
Z = elevation + translationZ
其中,elevation 是相对于父控件的高度,translationZ是该组件在Z方向(垂直屏幕方向)上的位移。

translationZ允许你创建一个动画暂时的反应出View的高度值(elevation)变化。

在设置Z轴的高度时,建议层次控制在0-5(6个) 不同的层次范围内,2dp一层,选中状态可以提升3层(6dp)。

Z轴的高度决定了View的遮盖关系。

有关Z轴设计的介绍:
http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-

Google官方对不同的控件的高度的推荐值:
这里写图片描述
这里写图片描述

设置阴影的显示方式 - outlineProvider

Android提供了一个outlineProvider属性,用于设置阴影的类型。它有四个属性值:none、background、bounds、paddedBounds。
在drawable文件夹下创建一个shape资源作为背景:shape_bg_circle.xml
这里写图片描述

以上面的shape资源作为TextView的背景,修改outlineProvider属性:
这里写图片描述

outlineProvider的四种属性对应的效果为:
这里写图片描述

none : 不设置阴影
background:围绕着背景产生一圈阴影
bounds:围绕着控件的边框产生一圈阴影
paddedBounds:和bounds类似,如果有padding,根据padding值产生阴影

注意一点:带有透明通道的背景,默认不显示阴影
这里写图片描述

自定义阴影 - setOutlineProvider

API 21以上,View提供了一个setOutlineProvider的方法,用来自定义阴影的形状。
这里写图片描述
这里写图片描述

这里写图片描述

根据阴影裁剪控件 - setClipToOutline

将控件的背景按阴影的样式进行裁剪,需要进行以下几步:
1. 给控件设置OutlineProvider
2. 将控件的setClipToOutline方法设置true
注意:并不所有的形状都可以剪裁,可通过OutlineProvider.canClip()确认当前形状是否可以裁剪

原始控件的布局设置:
这里写图片描述

根据阴影进行裁剪:
这里写图片描述

裁剪的效果:
这里写图片描述

打印日志:
这里写图片描述

Tint混合图片(染色模式)

Android 5.0提供了“android:tint”属性,使用“android:tint”属性可以去调整染色色调,配合tintMode,我们可以在不添加图片资源的前提下,去实现一些图片效果。

android:tintMode:染色模式(xml 可以设置6种模式,代码可以设置16种)
android:tint:染色色彩

在drawable文件夹下定义一个bitmap资源,设置其tintMode和tint属性,类似:
这里写图片描述

分别定义6个bitmap文件,6个文件对应不同的tintMode染色模式,效果图如下:
这里写图片描述

tintMode染色模式图:
这里写图片描述

取色器的作用 - Palette

Material Design 规范了UI部件的颜色规范,很多时候,我们希望在显示一张图片和一个背景的时候,给一张背景设置一个和图片色调相近的颜色。

Android 已经提供了一个叫做调色板或者取色器的工具,来获取一个 bitmap 中的各种色调。

Palette是一个调色板,或者叫取色器,它能让你从图像中提取突出的颜色。
它能取到6种类型的颜色:2(融合or活泼) * 3(明~暗)
- Vibrant(充满活力的)
- Vibrant dark(充满活力的黑)
- Vibrant light(充满活力的亮)
- Muted(柔和的)
- Muted dark(柔和的黑)
- Muted lighr(柔和的亮)

调色板的使用场景:
动态设置色彩。根据图片来决定标题的颜色和标题栏的背景色,这样视觉上更具有冲击力和新鲜感,而不像统一色调那样呆板。

使用步骤:
1. 添加lib (注意:这里版本是21+是因为我当前环境的编译版本为21)
这里写图片描述
2. 获取Palette实例
获取Palette类实例需要使用Palette的静态方法,不能直接new出来
这里写图片描述
3. 调用API获取相应的颜色值。注意: 调用API时需要传入一个默认颜色值,如果Palette没有找到想要的颜色,那么他就会返回这个默认值。
范例代码:
这里写图片描述
这里写图片描述
效果图:
这里写图片描述

原创粉丝点击