Android Material Design 阴影实现示例

本文介绍了Android Material Design 阴影实现示例,分享给大家,具体如下:

让 View 产生阴影有以下 4 种方式:

  1. 控制 elevation
  2. 使用 OutlineProvider
  3. 使用 9 图
  4. 使用 MD 风格的控件,如 CardView,FloatingActionButton

0.Z轴的概念

Android 在 5.0 及以后采用了 Material Design 设计语言,引入了 Z 轴的概念,也就是垂直于屏幕的轴,Z 轴会让 View 产生阴影的效果:

想象有一束斜光投向屏幕,Z 轴值越大,离光就越近,阴影的范围就越大;Z 轴值越小,离光就越远,阴影的范围就越小。而:

Z=elevation+ translationZ

elevation 一般是写在 xml 文件中做静态配置,translateZ 是用来控制动画效果。

是 Z 轴让 View 产生了阴影,我们要控制阴影就是控制 Z 轴啦:

1.控制 elevation

控制 elevation,需要先设置 View 的 BackGround,再设置 elevation。

首先配置一个 drawable:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>

再设置 background 和 elevation:

<TextView
android:id="@+id/myview"
android:layout_width="100dp"
android:layout_height="100dp"
android:elevation="2dp"
android:background="@drawable/myrect" />

2.使用 OutlineProvider

第 1 种方式可以满足大多数情况,但如果 View 的 background 是 color、图片,甚至是自定义 View 时就无法产生阴影效果了,这是我们需要通过代码设置阴影。官方称之为 outline。

view.setOutlineProvider(new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRect(0,0,view.getWidth(),view.getHeight());
}
});

outline 就是绘制的外部阴影样式,样式可以是任意的:矩形、园、圆角矩形、甚至是路径:

outline的方法

3.使用 9 图

前面两种方法涵盖了大多数情况,实在还有意外:比如兼容 5.0 之前的 UI 样式、UI设计的阴影居然是彩色的!那就使用最后的绝招了: 9 图。不过使用 9 图的灵活性实在是差,高度不同就要不同的切图,这里有一个网站可以自己随意切阴影图:http://inloop.github.io/shadow4android/

4.使用官方 MD 组件

其实官方组件的 ActionBar、CardView,FloatingActionButton就自带阴影,应尽量使用他们,这里就不展开讲了。

5.translateZ 动画

介绍 Z 轴时,说过 Z=elevation+ translationZ。elevation 是静态的,而 translateZ 是动态的。如我们点击按钮时希望它有一个弹起的效果,像这样:

弹起

其实是给 view 配置状态动画控制 translationZ:

android:stateListAnimator="@drawable/selector_elevation"

动画 xml 如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="8dp"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android App仿QQ制作Material Design风格沉浸式状态栏

    一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图: 恩,接下来正题. 首先只有大于等于4.4版本支持这个半透明状态栏的效果,但是4.4和5.0的显示效果有一定的差异,所有本文内容为: 1.如何实现半透明状态栏效果在大于4.4版本之上. 2.如何让4.4的效果与5.0的效果尽可能一致. 先贴下模拟器效果图,以便和实现过程中做下对比 4.4 模拟器 5.x 真机 二.实现半透明状态栏 因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛

  • 学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

    本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: 控件介绍 这次需要用到得新控件比较多,主要有以下几个: CoordinatorLayout 组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果. AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件,在响应colla

  • Material Design系列之Behavior实现Android知乎首页

    本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

  • 详解Android Material Design自定义动画的编写

    新的动画Api,让你在UI控件里能创建触摸反馈,改变View的状态,切换activity的一系列自定义动画 具体有: 响应View的touch事件的触摸反馈动画 隐藏和显示View的循环展示动画 两个Activity间的切换动画 更自然的曲线运动的动画 使用View的状态更改动画,能改变一个或多个View的属性 在View的状态更改时显示状态列表动画 这些new animations Api,已内置在标准Widget中,如Button.在自定义view时也可使用这些api 动画在Material

  • Android5.0中Material Design的新特性

     Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,

  • 学习Android Material Design(RecyclerView代替ListView)

    本文实例实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 复习 ListView 可以查看这篇文章深入浅出学习Android ListView基础,了解关于ListView 的基础知识. 实现过程中需要复写BaseAdapter,主要是这4个方法 public int getCount() :适配器中数据集中 数据的个数,即ListView需要显示的数据个数 public Object getItem(int position) : 获取数据集中与指定索引对应的

  • Android构建Material Design应用详解

    长久以来.Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验.为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言--Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看

  • Android Material Design 阴影实现示例

    本文介绍了Android Material Design 阴影实现示例,分享给大家,具体如下: 让 View 产生阴影有以下 4 种方式: 控制 elevation 使用 OutlineProvider 使用 9 图 使用 MD 风格的控件,如 CardView,FloatingActionButton 0.Z轴的概念 Android 在 5.0 及以后采用了 Material Design 设计语言,引入了 Z 轴的概念,也就是垂直于屏幕的轴,Z 轴会让 View 产生阴影的效果: 想象有一束

  • Android Material设计中列表和卡片的创建方法解析

    5.0提供了两个新的Widget,它们使用了Material Design 的style和animation: RecyclerView 一个更可插拔式的ListView,它支持不同的布局类型,并且性能有了改进.(列表式) CardView 一个能让你在其内显示重要信息,并保持连贯的视觉和感觉的卡片.(卡片式) 它两位于 sdk/extras/android/support/v7/cardview 和 sdk/extras/android/support/v7/RecyclerView 创建列表

  • Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果

    今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下单时选择商品属性时,从下面浮动上来一个PopupWindow,那么今天就带大家用Behavior来实现这两个效果,结果你会发现简直只需要一行代码. 总结下现在用的APP: 1. 仿支付宝弹出的输入支付密码窗口. 2. 仿淘宝/天猫弹出商品属性选择框. 3. 知乎首页上下滑动隐藏ToolBar和NavigationBar. 4. - 系列博客: 1. Material Design系列,Behavior之Bottom

随机推荐