1page.title=シャドウとクリッピング ビューの定義 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>このレッスンでの学習内容</h2> 8<ol> 9 <li><a href="#Elevation">ビューにエレベーションを割り当てる</a></li> 10 <li><a href="#Shadows">ビューシャドウとアウトラインをカスタマイズする</a></li> 11 <li><a href="#Clip">ビューをクリップする</a></li> 12</ol> 13<h2>関連ドキュメント</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li> 17</ul> 18</div> 19</div> 20 21<p>マテリアル デザインでは、UI 要素に Elevation（エレベーション、高度）を導入しています。エレベーションによって、ユーザーは 1 つの要素が他の要素と比べて重要であることを理解でき、目前の作業に集中できるようになります。 22</p> 23 24<p>ビューのエレベーションは Z プロパティで表され、シャドウビューの見た目を決定します。Z 値が高くなればシャドウも大きく、滑らかになります。 25Z 値が高いビューは Z 値が低いビューを覆い隠しますが、Z 値がビューのサイズに影響することはありません。 26</p> 27 28<p>シャドウは、エレベーションが設定された親ビューによって描かれ、標準的なビュー クリッピングの対象になります。デフォルトでは親ビューによってクリップされます。 29</p> 30 31<p>エレベーションは、何らかのアクションでビューの平面上にウィジェットが浮き上がるようなアニメーションを作成する際にも役立ちます。 32</p> 33 34<p>マテリアル デザインのエレベーションの詳細については、 35<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D スペースのオブジェクト</a>をご覧ください。 36</p> 37 38 39<h2 id="Elevation">ビューにエレベーションを割り当てる</h2> 40 41<p>ビューの Z 値には次の 2 つのコンポーネントがあります。 42 43<ul> 44<li>Elevation （エレベーション）: 静的なコンポーネントです。</li> 45<li>Translation （トランスレーション）: アニメーションに使われる動的なコンポーネントです。</li> 46</ul> 47 48<p><code>Z = elevation + translationZ</code></p> 49 50<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" /> 51<p class="img-caption"><strong>図 1</strong> - 異なるビュー エレベーションのシャドウ。</p> 52 53<p>レイアウトの定義でビューのエレベーションを設定するには、<code>android:elevation</code> 54 属性を使用します。アクティビティのコードでビューのエレベーションを設定するには、 55{@link android.view.View#setElevation View.setElevation()} メソッドを使用します。</p> 56 57<p>ビューのトランスレーションを設定するには、{@link android.view.View#setTranslationZ 58View.setTranslationZ()} メソッドを使用します。</p> 59 60<p>新しい {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} メソッドや {@link 61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} メソッドを使用すると、ビューのエレベーションに簡単にアニメーションを付けられます。 62詳細については、API リファレンスの 63{@link android.view.ViewPropertyAnimator} と、デベロッパー ガイドの<a href="{@docRoot}guide/topics/graphics/prop-animation.html">プロパティ アニメーション</a>をご覧ください。 64</p> 65 66<p>また、{@link android.animation.StateListAnimator} を使用してアニメーションを宣言的に指定することも可能です。 67これは、ユーザーがボタンを押したときなど、状態の変化によってアニメーションを動作する場合に特に役立ちます。 68詳細については、 69<a href="{@docRoot}training/material/animations.html#ViewState">ビューの状態遷移にアニメーションを付ける</a>をご覧ください。</p> 70 71<p>Z 値は dp（密度非依存ピクセル）で測られます。</p> 72 73 74<h2 id="Shadows">ビューシャドウとアウトラインをカスタマイズする</h2> 75 76<p>ビュー背景のドローアブルの範囲によってシャドウのデフォルトの形状が決まります。 77<strong>Outlines</strong> はグラフィック オブジェクトの外形を表し、タッチ フィードバックのリップル（波紋）の領域を定義します。 78</p> 79 80<p>背景ドローアブルで定義されたビューについて考えてみます。</p> 81 82<pre> 83<TextView 84 android:id="@+id/myview" 85 ... 86 android:elevation="2dp" 87 android:background="@drawable/myrect" /> 88</pre> 89 90<p>背景ドローアブルが角が丸い長方形として定義されます。</p> 91 92<pre> 93<!-- res/drawable/myrect.xml --> 94<shape xmlns:android="http://schemas.android.com/apk/res/android" 95 android:shape="rectangle"> 96 <solid android:color="#42000000" /> 97 <corners android:radius="5dp" /> 98</shape> 99</pre> 100 101<p>背景ドローアブルによってビューの外形が定義されるため、このビューは角が丸いシャドウを付与します。 102カスタム アウトラインを使えば、ビューシャドウのデフォルトの形状を更新できます。</p> 103 104<p>コードでビューのカスタム アウトラインを定義するには: <p> 105 106<ol> 107<li>{@link android.view.ViewOutlineProvider} クラスを拡張します。</li> 108<li>{@link android.view.ViewOutlineProvider#getOutline getOutline()} メソッドを上書きします。</li> 109<li>{@link 110android.view.View#setOutlineProvider View.setOutlineProvider()} メソッドで、ビューに新しい OutlineProvider を割り当てます。</li> 111</ol> 112 113<p> 114{@link android.graphics.Outline} クラスのメソッドを使用して、楕円形や角が丸い長方形のアウトラインを作成できます。ビューのデフォルトの OutlineProvider は、ビューの背景から外形を決定します。 115ビューがシャドウを付与しないようにするには、OutlineProvider を <code>null</code> に設定します。 116</p> 117 118 119<h2 id="Clip">ビューをクリップする</h2> 120 121<p>ビューをクリップすると、ビューの形を簡単に変更できます。ビューをクリップすることで、他のデザイン要素との統一性を保ったり、ユーザーのインプットに応じてビューの形を変えたりできます。 122 123{@link android.view.View#setClipToOutline 124View.setClipToOutline()} メソッドか <code>android:clipToOutline</code> 属性を使用すると、ビューをそのアウトラインの範囲にクリップできます。 125{@link android.graphics.Outline#canClip Outline.canClip()} メソッドで指定されているように、クリップがサポートされるのは長方形、円形、角が丸い長方形のみです。 126</p> 127 128<p>上述のように、ドローアブルの範囲でビューをクリップするには、ドローアブルをビューの背景として設定し、{@link android.view.View#setClipToOutline View.setClipToOutline()} 129メソッドを呼び出します。 130</p> 131 132<p>ビューのクリップは負荷の高い操作であるため、ビューのクリップに使用する形状にはアニメーションを付けないでください。 133この効果を発揮させるには、<a href="{@docRoot}training/material/animations.html#Reveal">出現エフェクト</a>アニメーションを使用します。</p> 134
