マテリアル デザインでは、UI 要素にエレベーションを導入しています。エレベーションにより、ユーザーは各要素の相対的な重要度を理解し、現在のタスクに集中できるようになります。
Z プロパティで表されるビューのエレベーションによって、シャドウの外観が決まります。Z 値が高いビューほど影が小さくなり、シャドウが柔らかくなり、Z 値が小さいビューが隠れます。ただし、ビューの Z 値はビューのサイズに影響しません。
![ビューのエレベーションによってどのように影が生成されるのかを示す画像。](https://developer.android.com/static/images/ui/material-design/cast-shadows_2x.png?authuser=9&hl=ja)
シャドウは、昇格したビューの親によって描画されます。標準ビューのクリッピングが適用され、デフォルトで親によってクリップされます。
高度は、アクションの実行時にウィジェットがビュープレーン上に一時的に上昇するアニメーションの作成にも便利です。
詳しくは、マテリアル デザインの高度をご覧ください。
ビューに高度を割り当てる
ビューの Z 値には次の 2 つのコンポーネントがあります。
- 高度: 静的コンポーネント
- Translation: アニメーションに使用される動的コンポーネント
Z = elevation + translationZ
Z 値は dp(密度非依存ピクセル)で測定されます。
![エレベーションごとに異なる影を dp 単位で表した画像](https://developer.android.com/static/training/material/images/shadows-depth.png?authuser=9&hl=ja)
ビューのデフォルト(静止)エレベーションを設定するには、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()
メソッドを使用して、ビューに新しい Outline プロバイダを割り当てます。
角の丸い楕円形や長方形のアウトラインを作成するには、Outline
クラスのメソッドを使用します。ビューのデフォルトのアウトライン プロバイダは、ビューの背景からアウトラインを取得します。ビューがシャドウを付与されないようにするには、Outline プロバイダを null
に設定します。
クリップの視聴回数
ビューをクリップすると、ビューの形状を変更できます。ビューをクリップして、他のデザイン要素との整合性を確保したり、ユーザー入力に応じてビューの形状を変更したりできます。View.setClipToOutline()
メソッドを使用して、ビューをそのアウトライン領域にクリップできます。クリッピングをサポートしているのは、Outline.canClip()
メソッドで判断される長方形、円、円形の長方形の枠線のみです。
ビューをドローアブルの形状にクリップするには、上記の例のようにドローアブルをビューの背景として設定し、View.setClipToOutline()
メソッドを呼び出します。
ビューのクリップは負荷の高いオペレーションであるため、ビューのクリップに使用する形状にはアニメーションを付けないでください。この効果を実現するには、出現アニメーションを使用します。