변형은 패널의 특정 시각적 상태를 정의하므로 단일 패널이 열림 또는 닫힘 상태와 같은 여러 개의 개별 시각적 표현을 가질 수 있습니다. XML을 사용하여 변형을 구성합니다. <Panel> 요소 내에서 하위 태그를 사용합니다.
각 <Variant> 태그에는 이를 고유하게 식별하는 필수 id 속성이 있습니다.
태그는 속성을 상속하기 위해 상위 변형을 참조할 수도 있습니다. 이 상속 메커니즘을 사용하면 여러 변형에서 공통 속성을 효율적으로 정의할 수 있습니다.
XML 속성
상태와 전환을 정의하려면 <TaskPanel> 또는 <DecorPanel> 태그와 함께 이러한 속성을 사용하세요.
| 속성 | 상태 | 설명 |
|---|---|---|
id |
필수 | 변형의 고유 식별자입니다. 이 ID는 전환에서 변형을 참조하거나 패널의 defaultVariant로 사용됩니다.
|
parent |
선택사항 | 현재 변형이 속성을 상속해야 하는 다른 변형의 ID를 지정합니다. 속성이 현재 변형에 명시적으로 정의되지 않은 경우 상위 변형에 정의된 값으로 대체됩니다. |
XML 하위 요소
이 선택사항 요소를 사용하여 이 변형의 상태에 있을 때 패널의 시각적 특성을 지정합니다.
| 하위 요소 | 설명 |
|---|---|
<Visibility> |
패널이 표시되는지 숨겨지는지 지정하고 isVisible 속성 (불리언)을 포함합니다. |
<Alpha> |
패널의 투명도 수준을 지정합니다. alpha 속성 (부동 소수점, 0.0~1.0)을 포함합니다. |
<Layer> |
다른 패널을 기준으로 패널의 Z 순서를 설정합니다. layer 속성 (정수)을 포함합니다. 값이 높을수록 위에 그려집니다. |
<Focus> |
전환 중에 패널이 포커스를 얻을 수 있는지 지정합니다. onTransition 속성 (불리언)을 포함합니다.
|
<Bounds> |
화면에서 패널의 직사각형 영역 (위치 및 크기)을 정의합니다. 이 영역은 left, top, bottom, width, height와 같은 속성으로 제어됩니다.
백분율을 사용하는 경우 오프셋 속성을 사용하여 백분율 기반 경계( 예를 들어 패널이 화면 높이의 100% 를 차지하면서 하단의 고정 높이 탐색 메뉴는 제외하도록 지정하려면 높이를 100% 로 설정하고 |
<SafeBounds> |
패널 경계 내에서 디스플레이 컷아웃이나 인셋과 겹치지 않는 안전한 영역을 지정하여 이 영역 내에 그려진 앱의 호환성을 강조합니다. 속성은 <Bounds>와 유사합니다.
|
<Corner> |
패널 모서리의 반지름을 정의하여 둥근 모서리를 허용하고 반지름 속성 (정수)을 포함합니다. 날카로운 모서리가 기본값이므로 정의하지 않아도 됩니다. |
<Insets> |
패널의 인셋 (패딩)을 지정합니다. 여기에는 left, top, right, bottom 속성이 포함됩니다. 이러한 인셋은 패널 내에서 실행된 앱에 보고됩니다.
|
<Background> |
앱을 전환할 때 투명 효과를 방지하기 위해 선택적 배경 장식 패널을 도입합니다. 이 장식 레이어의 색상 및 알파와 같은 속성을 정의합니다. 이미 설정되지 않은 경우 테두리 및 레이어와 같은 장식 레이어의 속성은 기본적으로 변형의 속성으로 설정됩니다. |
샘플 코드
<Variant id="@id/opened">
<Visibility isVisible="true"/>
<Bounds left="0dp"
top="0dp"
right="100%"
bottom="100%"
bottomOffset="100dp"/>
<Alpha value="1.0"/>
<Layer value="10"/>
<Focus onTransition="true"/>
<Corner radius="24dp"/>
<Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
<Background color="@color/app_background" alpha="0.9"/>
</Variant>
시각적 속성 보간
KeyFrameVariant를 사용하여 시각적 속성을 보간합니다. variant의 이 특수 확장 프로그램은 연속 입력(예: 패널의 상태가 드래그 양에 따라 동적으로 변경될 때 드래그 작업)에 의해 부드럽고 동적인 전환을 허용하는 연속 분수 값(0~1)을 기반으로 합니다.
XML 속성
KeyFrameVariant에는 속성이 없습니다. <KeyFrameVariant> 태그에는 KeyFrameVariant를 정의하는 데 필요한 정보가 포함되어 있습니다.
XML 하위 요소
KeyFrameVariant에는 하나 이상의 <KeyFrame> 하위 태그가 포함됩니다. 각 <KeyFrame>에는 framePosition 속성 (0~100)이 있으며 변형 속성 (다른 변형의 ID)을 참조합니다. 이러한 keyframes는 연속 전환의 특정 지점에서 패널의 상태를 정의합니다.
샘플 코드
<KeyFrameVariant id="@id/panel_resizing">
<KeyFrame framePosition="0" variant="@id/minimized"/>
<KeyFrame framePosition="75" variant="@id/opened"/>
<KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>