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

マテリアル デザインでは、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>
    

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

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

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

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

ビューをクリップする

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

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

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