シャドウを作成してビューをクリップする

マテリアルデザインでは、UI 要素にエレベーション（高度）が導入されています。エレベーションによって、ユーザーは 1 つの要素が他の要素と比べて重要であることを理解でき、目の前の作業に集中できるようになります。

ビューのエレベーションは Z プロパティで表され、シャドウビューの見た目を決定します。Z 値が高くなればシャドウも大きく、滑らかになります。Z 値が高いビューは Z 値が低いビューを覆い隠しますが、Z 値がビューのサイズに影響することはありません。

シャドウは、エレベーションが設定されたビューの親ビューによって描画され、標準的なビュークリッピングの対象になります（デフォルトでは親ビューによってクリップされます）。

エレベーションは、なんらかのアクションでビューの平面上にウィジェットが一時的に浮き上がるようなアニメーションを作成する際にも役立ちます。

マテリアルデザインのエレベーションの詳細については、3D スペースのオブジェクトをご覧ください。

ビューにエレベーションを割り当てる

ビューの Z 値には次の 2 つのコンポーネントがあります。

Elevation（エレベーション）: 静的コンポーネント。
Translation（トランスレーション）: アニメーションに使用される動的なコンポーネント。

Z = elevation + translationZ

図 1 - 異なるビューエレベーションのシャドウ。

ビューのデフォルト（休止中）のエレベーションを設定するには、XML レイアウトで android:elevation 属性を使用します。アクティビティのコードでビューのエレベーションを設定するには、View.setElevation() メソッドを使用します。

ビューのトランスレーションを設定するには、View.setTranslationZ() メソッドを使用します。

新しい ViewPropertyAnimator.z() メソッドと ViewPropertyAnimator.translationZ() メソッドを使用すると、ビューのエレベーションに簡単にアニメーションを付けられます。詳細については、API リファレンスの ViewPropertyAnimator と、デベロッパーガイドのプロパティアニメーションをご覧ください。

また、StateListAnimator を使用してアニメーションを宣言的に指定することも可能です。これは、ユーザーがボタンを押したときなど、状態の変化によってアニメーションを動作する場合に特に役立ちます。詳細については、ビューの状態遷移にアニメーションを付けるをご覧ください。

Z 値は dp（密度非依存ピクセル）で測られます。

ビューシャドウとアウトラインをカスタマイズする

ビュー背景のドローアブルの範囲によってシャドウのデフォルトの形状が決まります。Outlines はグラフィックオブジェクトの外形を表し、タッチフィードバックのリップル（波紋）の領域を定義します。

背景ドローアブルで定義されたビューについて考えてみます。

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

背景ドローアブルが角が丸い長方形として定義されます。

    <!-- 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>

背景ドローアブルによってビューの外形が定義されるため、このビューは角が丸いシャドウを付与します。カスタムアウトラインを使えば、ビューシャドウのデフォルトの形状を更新できます。

コードでビューのカスタムアウトラインを定義するには:

ViewOutlineProvider クラスを拡張します。
getOutline() メソッドをオーバーライドします。
View.setOutlineProvider() メソッドで、ビューに新しい OutlineProvider を割り当てます。

Outline クラスのメソッドを使用して、楕円形と角が丸い長方形のアウトラインを作成できます。ビューのデフォルトの OutlineProvider は、ビューの背景から外形を決定します。ビューがシャドウを付与しないようにするには、OutlineProvider を null に設定します。

ビューをクリップする

ビューをクリップすると、ビューの形を簡単に変更できます。ビューをクリップすることで、他のデザイン要素との統一性を保ったり、ユーザーのインプットに応じてビューの形を変えたりできます。View.setClipToOutline() メソッドか android:clipToOutline 属性を使用すると、ビューをそのアウトラインの範囲にクリップできます。Outline.canClip() メソッドで指定されているように、クリップがサポートされるのは長方形、円形、角が丸い長方形のみです。

ドローアブルの形状に合わせてビューをクリップするには、（上記のように）ドローアブルをビューの背景として設定し、View.setClipToOutline() メソッドを呼び出します。

ビューのクリップは負荷の高い操作であるため、ビューのクリップに使用する形状にはアニメーションを付けないでください。この効果を実現するには、出現エフェクトアニメーションを使用します。