Google은 흑인 공동체를 위한 인종 간 평등을 진전시키기 위해 노력하고 있습니다. Google에서 어떤 노력을 하고 있는지 확인하세요.

그림자 및 클립 뷰 만들기

머티리얼 디자인은 UI 요소에 엘리베이션을 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적인 중요성을 이해하고 현재 작업에 집중할 수 있도록 도와줍니다.

Z 속성으로 표현되는 뷰의 엘리베이션은 그림자의 시각적인 모양을 결정합니다. 예를 들어, 더 높은 Z값을 가진 뷰는 더 크고 부드러운 그림자를 표시합니다. 높은 Z값을 가진 뷰는 낮은 Z값을 가진 뷰를 가립니다. 하지만 뷰의 Z값이 뷰의 크기에 영향을 주지는 않습니다.

그림자는 엘리베이트된 뷰의 상위 요소에 의해 그려지며, 따라서 기본적으로 상위 요소에 의해 클리핑되는 표준 뷰 클리핑이 적용됩니다.

엘리베이션은 특정 작업 수행 시 위젯이 일시적으로 뷰 평면 위로 올라오는 애니메이션을 생성하는 경우에도 유용합니다.

머티리얼 디자인의 엘리베이션에 관한 자세한 내용은 3D 공간의 개체를 참조하세요.

뷰에 엘리베이션 지정

뷰의 Z값에는 다음과 같은 2개의 구성요소가 있습니다.

  • 엘리베이션: 정적 구성요소
  • 변환: 애니메이션에 사용되는 동적 구성요소

Z = elevation + translationZ

그림 1 - 서로 다른 뷰 엘리베이션의 그림자

뷰의 기본(휴면) 엘리베이션을 설정하려면 XML 레이아웃에 android:elevation 속성을 사용하세요. 활동의 코드에서 뷰 엘리베이션을 설정하려면 View.setElevation() 메서드를 사용합니다.

뷰의 변환을 설정하려면 View.setTranslationZ() 메서드를 사용하세요.

ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ() 메서드를 사용하면 쉽게 뷰의 엘리베이션에 애니메이션을 적용할 수 있습니다. 자세한 내용은 ViewPropertyAnimator의 API 참조와 속성 애니메이션 개발자 가이드를 참조하세요.

StateListAnimator를 사용해서 이러한 애니메이션을 선언적 방식으로 지정할 수도 있습니다. 이는 사용자가 버튼을 누를 때와 같이 상태 변경이 애니메이션을 트리거하는 경우에 특히 유용합니다. 자세한 내용은 뷰 상태 변경에 애니메이션 적용을 참조하세요.

Z값은 dp(밀도 독립형 픽셀)로 측정됩니다.

뷰 그림자 및 윤곽선 맞춤설정

뷰의 배경 드로어블 경계는 그림자의 기본 모양을 결정합니다. 윤곽선은 그래픽 개체의 바깥쪽 모양을 나타내고 터치 피드백의 물결 영역을 정의합니다.

다음과 같이 배경 드로어블을 사용하여 정의된 뷰를 살펴보겠습니다.

    <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() 메서드를 사용하여 뷰에 새로운 윤곽선 공급자를 할당합니다.

Outline 클래스의 메서드를 사용하여 모서리가 둥근 타원형 및 직사각형 윤곽선을 생성할 수 있습니다. 뷰의 기본 윤곽선 공급자는 뷰의 배경에서 윤곽선을 가져옵니다. 뷰에 그림자가 표시되지 않도록 하려면 뷰의 윤곽선 공급자를 null로 설정하세요.

뷰 클리핑

뷰를 클리핑하면 쉽게 뷰의 모양을 바꿀 수 있습니다. 다른 디자인 요소와의 일관성을 위해, 또는 사용자 입력에 응답하여 뷰의 모양을 변경하기 위해 뷰를 클리핑할 수 있습니다. View.setClipToOutline() 메서드 또는 android:clipToOutline 속성을 사용하여 윤곽선 영역으로 뷰를 클리핑할 수 있습니다. Outline.canClip() 메서드에서 결정한 대로 사각형, 원형 및 둥근 사각형의 윤곽선만 클리핑을 지원합니다.

드로어블 모양으로 뷰를 클리핑하려면 위와 같이 드로어블을 뷰의 배경으로 설정하고 View.setClipToOutline() 메서드를 호출합니다.

뷰 클리핑은 비용이 많이 드는 작업이므로 뷰를 클리핑하는 데 사용하는 모양에 애니메이션을 적용하지 마세요. 이 효과를 얻으려면 표시 효과 애니메이션을 사용하세요.