Skip to content

Most visited

Recently visited

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() メソッドを呼び出します。

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

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

WeChat で Google Developers をフォローする

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)