Android Material Design 陰影實(shí)現(xiàn)示例

本文介紹了Android Material Design 陰影實(shí)現(xiàn)示例，分享給大家，具體如下：

讓 View 產(chǎn)生陰影有以下 4 種方式：

1. 控制 elevation
2. 使用 OutlineProvider
3. 使用 9 圖
4. 使用 MD 風(fēng)格的控件，如 CardView，F(xiàn)loatingActionButton

0.Z軸的概念

Android 在 5.0 及以后采用了 Material Design 設(shè)計(jì)語(yǔ)言，引入了 Z 軸的概念，也就是垂直于屏幕的軸，Z 軸會(huì)讓 View 產(chǎn)生陰影的效果：

想象有一束斜光投向屏幕，Z 軸值越大，離光就越近，陰影的范圍就越大；Z 軸值越小，離光就越遠(yuǎn)，陰影的范圍就越小。而：

Z=elevation+ translationZ

elevation 一般是寫在 xml 文件中做靜態(tài)配置，translateZ 是用來控制動(dòng)畫效果。

是 Z 軸讓 View 產(chǎn)生了陰影，我們要控制陰影就是控制 Z 軸啦：

1.控制 elevation

控制 elevation，需要先設(shè)置 View 的 BackGround，再設(shè)置 elevation。

首先配置一個(gè) 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>

再設(shè)置 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 種方式可以滿足大多數(shù)情況，但如果 View 的 background 是 color、圖片，甚至是自定義 View 時(shí)就無法產(chǎn)生陰影效果了，這是我們需要通過代碼設(shè)置陰影。官方稱之為 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 圖

前面兩種方法涵蓋了大多數(shù)情況，實(shí)在還有意外：比如兼容 5.0 之前的 UI 樣式、UI設(shè)計(jì)的陰影居然是彩色的！那就使用最后的絕招了： 9 圖。不過使用 9 圖的靈活性實(shí)在是差，高度不同就要不同的切圖，這里有一個(gè)網(wǎng)站可以自己隨意切陰影圖：http://inloop.github.io/shadow4android/

4.使用官方 MD 組件

其實(shí)官方組件的 ActionBar、CardView，F(xiàn)loatingActionButton就自帶陰影，應(yīng)盡量使用他們，這里就不展開講了。

5.translateZ 動(dòng)畫

介紹 Z 軸時(shí)，說過 Z=elevation+ translationZ。elevation 是靜態(tài)的，而 translateZ 是動(dòng)態(tài)的。如我們點(diǎn)擊按鈕時(shí)希望它有一個(gè)彈起的效果,像這樣：

彈起

其實(shí)是給 view 配置狀態(tài)動(dòng)畫控制 translationZ：

android:stateListAnimator="@drawable/selector_elevation"

動(dòng)畫 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。