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 요소에 엘리베이션을 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적 중요성을 이해하고 현재 직면한 작업에 집중할 수 있도록 도와줍니다. 22</p> 23 24<p>Z 속성으로 표현되는 뷰의 엘리베이션은 그림자의 시각적인 모양을 결정합니다. 예를 들어, 더 높은 Z값을 가진 뷰는 더 크고 부드러운 그림자를 드리웁니다. 25 높은 Z값을 가진 뷰는 낮은 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>엘리베이션: 정적 구성요소.</li> 45<li>변환: 애니메이션에 사용되는 동적 구성요소.</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 자세한 내용은 63{@link android.view.ViewPropertyAnimator}의 API 레퍼런스와 <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>윤곽선</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()} 메서드를 사용하여 새로운 윤곽선 공급자를 뷰에 할당합니다.</li> 111</ol> 112 113<p>{@link android.graphics.Outline} 클래스의 메서드를 사용하여 둥근 모서리를 가진 타원형 및 직사각형 윤곽선을 생성할 수 있습니다. 114 뷰의 기본 윤곽선 공급자는 뷰의 배경에서 윤곽선을 가져옵니다. 115 뷰에 그림자가 드리우는 것을 원치 않으면 뷰의 윤곽선 공급자를 <code>null</code>로 설정하세요. 116</p> 117 118 119<h2 id="Clip">뷰 클리핑</h2> 120 121<p>뷰를 클리핑하면 뷰의 모양을 손쉽게 바꿀 수 있습니다. 다른 디자인 요소와의 일관성을 위해, 또는 사용자 입력에 응답하여 뷰의 모양을 바꾸기 위해 뷰를 클리핑할 수 있습니다. {@link android.view.View#setClipToOutline 122View.setClipToOutline()} 메서드나 <code>android:clipToOutline</code> 특성을 사용하여 뷰를 해당 윤곽선 영역까지 클리핑할 수 있습니다. 123 124 125{@link android.graphics.Outline#canClip Outline.canClip()} 메서드에서 결정된 대로 사각형, 원형 및 둥근 사각형의 윤곽선만 클리핑을 지원합니다. 126</p> 127 128<p>드로어블 모양으로 뷰를 클리핑하려면 위와 같이 드로어블을 뷰의 배경으로 129설정하고 {@link android.view.View#setClipToOutline View.setClipToOutline()} 130메서드를 호출합니다.</p> 131 132<p>뷰 클리핑은 리소스 소모가 많은 작업이므로,뷰를 클리핑하는 데 사용하는 모양을 애니메이트하지 마세요. 133 이 효과를 얻으려면 <a href="{@docRoot}training/material/animations.html#Reveal">표시 효과</a> 애니메이션을 사용하세요.</p> 134
