그림자 및 클립 뷰 만들기

Compose 방법 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 테마 설정을 사용하는 방법을 알아보세요.

Material Design에서는 UI 요소에 고도를 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적 중요도를 이해하고 현재 작업에 집중할 수 있도록 도와줍니다.

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

뷰 엘리베이션에 따라 그림자가 생성되는 방식을 보여주는 이미지입니다.
그림 1. Z축의 고도 및 결과 그림자입니다.

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

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

자세한 내용은 Material Design의 고도를 참고하세요.

뷰에 엘리베이션 지정

뷰의 Z 값에는 두 가지 구성요소가 있습니다.

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

Z = elevation + translationZ

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

고도마다 다른 그림자를 dp 단위로 보여주는 이미지
그림 2. dp 단위로 고도마다 다른 그림자

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

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

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

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

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

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

백그라운드 드로어블로 정의된 다음 뷰를 생각해 보세요.

<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() 메서드를 사용하여 윤곽선 영역으로 뷰를 클리핑할 수 있습니다. Outline.canClip() 메서드에 의해 결정된 대로 직사각형, 원, 둥근 직사각형인 윤곽선만 클리핑을 지원합니다.

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

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