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

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でテーマ設定を操作する方法を学習します。
Modifier.shadow() →

マテリアル デザインでは、UI 要素にエレベーションを導入しています。エレベーションにより、ユーザーは各要素の相対的な重要度を理解し、現在のタスクに集中できるようになります。

Z プロパティで表されるビューのエレベーションによって、シャドウの外観が決まります。Z 値が高いビューほど影が小さくなり、シャドウが柔らかくなり、Z 値が小さいビューが隠れます。ただし、ビューの Z 値はビューのサイズに影響しません。

ビューのエレベーションによってどのように影が生成されるのかを示す画像。
図 1. Z 軸上の高度と影。

シャドウは、昇格したビューの親によって描画されます。標準ビューのクリッピングが適用され、デフォルトで親によってクリップされます。

高度は、アクションの実行時にウィジェットがビュープレーン上に一時的に上昇するアニメーションの作成にも便利です。

詳しくは、マテリアル デザインの高度をご覧ください。

ビューに高度を割り当てる

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

  • 高度: 静的コンポーネント
  • Translation: アニメーションに使用される動的コンポーネント

Z = elevation + translationZ

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

エレベーションごとに異なる影を dp 単位で表した画像
図 2. エレベーションごとに異なるシャドウ（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>

背景ドローアブルによってビューの輪郭が定義されるため、ビューは角の丸いシャドウを投影します。カスタム アウトラインを指定すると、ビュー シャドウのデフォルトの形状がオーバーライドされます。

コードでビューのカスタム アウトラインを定義する手順は次のとおりです。

  1. ViewOutlineProvider クラスを拡張します。
  2. getOutline() メソッドをオーバーライドします。
  3. View.setOutlineProvider() メソッドを使用して、ビューに新しい Outline プロバイダを割り当てます。

角の丸い楕円形や長方形のアウトラインを作成するには、Outline クラスのメソッドを使用します。ビューのデフォルトのアウトライン プロバイダは、ビューの背景からアウトラインを取得します。ビューがシャドウを付与されないようにするには、Outline プロバイダを null に設定します。

クリップの視聴回数

ビューをクリップすると、ビューの形状を変更できます。ビューをクリップして、他のデザイン要素との整合性を確保したり、ユーザー入力に応じてビューの形状を変更したりできます。View.setClipToOutline() メソッドを使用して、ビューをそのアウトライン領域にクリップできます。クリッピングをサポートしているのは、Outline.canClip() メソッドで判断される長方形、円、円形の長方形の枠線のみです。

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

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