コンテンツに移動

よくアクセスするページ

最近アクセスしたページ

navigation

シャドウとクリッピング ビューの定義

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

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

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

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

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

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

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

Z = elevation + translationZ

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

レイアウトの定義でビューのエレベーションを設定するには、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() メソッドを呼び出します。

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

このサイトでは、ユーザーが選択したサイトの言語と表示設定を保存する目的で Cookie を使用しています。

Android デベロッパー向けの最新情報やヒントを入手して、Google Play での成功を手に入れましょう。

* 必須

送信しました

WeChat で Google Developers をフォローする

このサイトをで表示しますか?

ページの表示言語としてを選択しましたが、このサイトの言語はに設定されています。

言語設定を変更してこのサイトをで表示しますか?言語設定を変更する場合は、各ページの下にある言語メニューを使用してください。

このクラスには、API レベル 以上が必要です。

API レベル が選択されているため、このドキュメントは非表示になっています。左のナビゲーションの上にあるセレクタを使って、ドキュメントの API レベルを変更できます。

アプリに必要な API レベルを指定する方法について、詳しくは異なるプラットフォーム バージョンのサポートをご覧ください。

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)