マテリアル デザインでは、UI 要素にエレベーション（高度）が導入されています。エレベーションによって、ユーザーは 1 つの要素が他の要素と比べて重要であることを理解でき、目の前の作業に集中できるようになります。
ビューのエレベーションは Z プロパティで表され、シャドウビューの見た目を決定します。Z 値が高いビューほどシャドウが大きく、滑らかになり、Z 値が低いビューを覆い隠します。ただし、ビューの Z 値がビューのサイズに影響することはありません。
シャドウは、エレベーションが設定されたビューの親ビューによって描画されます。標準的なビュー クリッピングの対象になり、デフォルトでは親ビューによってクリップされます。
エレベーションは、アクションの実行時にビューの平面上にウィジェットが一時的に浮き上がるようなアニメーションを作成する際にも役立ちます。
詳しくは、マテリアル デザインのエレベーションをご覧ください。
ビューにエレベーションを割り当てる
ビューの Z 値には次の 2 つのコンポーネントがあります。
- Elevation（エレベーション）: 静的コンポーネント
- Translation（トランスレーション）: アニメーションに使用される動的なコンポーネント
Z = elevation + translationZ
Z 値は dp（密度非依存ピクセル）で測られます。
ビューのデフォルト（休止中）のエレベーションを設定するには、XML レイアウトで android:elevation 属性を使用します。アクティビティのコードでビューのエレベーションを設定するには、View.setElevation() メソッドを使用します。
ビューのトランスレーションを設定するには、View.setTranslationZ() メソッドを使用します。
ViewPropertyAnimator.z() メソッドと ViewPropertyAnimator.translationZ() メソッドを使用すると、ビューのエレベーションにアニメーションを付けることができます。詳細については、API リファレンスの ViewPropertyAnimator と、デベロッパー ガイドのプロパティ アニメーションをご覧ください。
また、StateListAnimator を使用してアニメーションを宣言的に指定することも可能です。これは、ユーザーがボタンをタップしたときなど、状態の変化によってアニメーションを動作する場合に特に役立ちます。詳細については、StateListAnimator を使用してビューの状態遷移にアニメーションを付けるをご覧ください。
ビューシャドウとアウトラインをカスタマイズする
ビューの背景ドローアブルの境界によって、シャドウのデフォルトの形状が決まります。アウトラインはグラフィック オブジェクトの外形を表し、タッチ フィードバックのリップル（波紋）の領域を定義します。
背景ドローアブルで定義された次のビューについて考えてみます。
<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() メソッドを使用すると、ビューをそのアウトラインの範囲にクリップできます。Outline.canClip() メソッドで指定されているように、クリップがサポートされるのは長方形、円形、角が丸い長方形のみです。
ドローアブルの形状に合わせてビューをクリップするには、前の例に示すように、ドローアブルをビューの背景として設定し、View.setClipToOutline() メソッドを呼び出します。
ビューのクリップは負荷の高い操作であるため、ビューのクリップに使用する形状にはアニメーションを付けないでください。この効果を実現するには、出現アニメーションを使用します。