VectorDrawable
이전 포스트에서 Vector 이미지 포맷을 이용했을때의 장단점에 대해서 알아보았습니다.
이번 시간은 안드로이드 리소스인 VectorDrawable에 대해서 알아보도록 하겠습니다.
xml 파일에서 <vector> 요소를 정의하는것을 통해 벡터 그래픽 방식의 drawable 파일을 생성 할 수 있습니다.
Notice: 다시 그리는 퍼포먼스의 최적화를 위해 각 VectorDrawable에 대해 하나의 비트맵 캐시가 생성됩니다. 따라서 동일한 VectorDrawable을 참조한다는 것은 동일한 비트맵 캐시를 공유하게 된다는 뜻입니다.
Vector Drawable은 다음과 같은 요소들을 가집니다.
| <vector> | |
| android:name | vector drwable의 이름을 정의 |
| android:width | drawable의 본래 너비를 정의합니다. |
| android:height | drawable의 본래 높이를 정의합니다. |
| android:viewportWidth | 뷰포트 공간의 너비를 정의. 뷰포트는 기본적으로 path가 그려지는 가상 캔버스입니다. |
| android:viewportHeight | 뷰포트 공간의 높이를 정의. 뷰포트는 기본적으로 path가 그려지는 가상 캔버스입니다. |
| android:tint | drawable에 적용 할 색조입니다. 기본적으로 색조는 적용되지 않습니다. |
| android:tintMode | 색조 색상의 Porter-Duff 혼합 모드입니다. 기본값은 src_in입니다. |
| android:autoMirrored | 레이아웃 방향이 RTL (오른쪽에서 왼쪽) 일 때 drawable을 미러해야하는지 나타냅니다. 기본값은 false입니다. |
| android:alpha | 이 drawable의 불투명도. 기본값은 1.0입니다. |
| <group> | |
| android:name | 이 그룹의 이름을 정의합니다. |
| android:rotation | 이 그룹의 회전각, 기본값은 0입니다. |
| android:pivotX | 그룹의 확대, 회전을 위한 피봇의 X좌표. 뷰포트 공간내에서 정의 되며, 기본값은 0입니다. |
| android:pivotY | 그룹의 확대, 회전을 위한 피봇의 Y좌표. 뷰포트 공간내에서 정의 되며, 기본값은 0입니다. |
| android:scaleX | x좌표의 크기, 기본값은 1입니다. |
| android:scaleY | y좌표의 크기, 기본값은 1입니다. |
| android:translateX | x좌표에서의 이동량. 뷰포트 공간내에서 정의되며, 기본값은 0입니다. |
| android:translateY | y좌표에서의 이동량. 뷰포트 공간내에서 정의되며, 기본값은 0입니다. |
| <path> | |
| android:name | 경로의 이름을 정의합니다 |
| android:pathData | SVG 경로 데이터의 “d”속성과 정확히 같은 형식을 사용하여 경로 데이터를 정의합니다. |
| android:fillColor | 경로를 채우는데 사용되는 색상을 지정합니다. 색상 또는 SDK 24+의 경우 색상 상태 목록 또는 그라디언트 색상이 될 수 있습니다. 이 속성이 애니메이션이면 애니메이션에 설정된 값이 원래 값보다 우선 적용됩니다. 이 속성을 지정하지 않으면 경로 채우기가 표시되지 않습니다. |
| android:strokeColor | 경로의 외곽선을 그리는 데 사용되는 색상을 지정합니다. 색상 또는 SDK 24+의 경우 색상 상태 목록 또는 그라디언트 색상이 될 수 있습니다. 이 속성이 애니메이션이면 애니메이션에 설정된 값이 원래 값보다 우선 적용됩니다. 이 속성을 지정하지 않으면 외곽선이 그려지지 않습니다. |
| android:strokeWidth | 경로의 외각선의 넓이. 기본값은 0 |
| android:strokeAlpha | 경로의 외각선의 높이. 기본값은 0 |
| android:fillAlpha | 경로의 불투명도. 불투명도는 1입니다. |
| android:trimPathStart | 시작지점으로부터 경로의 일부를 trim 합니다. 범위 0부터 1. 기본값 0 |
| android:trimPathEnd | 끝나는 지점으로부터 경로의 일부를 trim 합니다. 범위 0부터 1. 기본값 1 |
| android:PathOffset | 자르기 영역을 이동합니다 (표시된 영역에 시작 및 끝을 포함시킬 수 있음). 범위는 0에서 1까지입니다. 기본값은 0입니다. |
| android:strokeLineCap | 라인의 끝모양을 설정합니다 : butt, round, square. 기본값은 butt입니다.
|
| android:strokeLineJoin | 꼭짓점의 모양을 설정합니다 : miter, round, bevel로 설정합니다. 기본값은 miter입니다.
|
| android:strokeMiterLimit | 획이있는 패스에 대한 제한선을 설정합니다. 기본값은 4입니다.
|
| android:fillType | SDK 24+에서는 경로의 fillType을 설정합니다. 유형은 “evenOdd”또는 “nonZero”일 수 있습니다. SVG의 “fill-rule”속성과 동일하게 작동합니다. 기본값은 0이 아닙니다. 자세한 내용은 FillRuleProperty를 참조하십시오. |
| <clip-path> 경로를 현재 클립으로 정의합니다. 클립 경로는 현재 그룹과 하위 그룹에만 적용됩니다. |
|
| android:name | 클립 경로의 이름을 정의합니다. |
| android:pathData | SVG경로 데이터에서 “d”속성과 동일한 형식을 사용하여 클립경로를 정의합니다. |
Path 그리기
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">
<!-- This path draws an orange triangular play icon. -->
<path
android:fillColor="#FF9800"
android:pathData="M 4,2.5 L 4,9.5 L 9.5,6 Z"/>
<!-- This path draws two green stroked vertical pause bars. -->
<path
android:pathData="M 4,2.5 L 4,9.5 M 8,2.5 L 8,9.5"
android:strokeColor="#0F9D58"
android:strokeWidth="2"/>
<!-- This path draws a red circle. -->
<path
android:fillColor="#DB4437"
android:pathData="M 2,6 C 2,3.8 3.8,2 6,2 C 8.2,2 10,3.8 10,6 C 10,8.2 8.2,10 6,10 C 3.8,10 2,8.2 2,6"/>
</vector>
| 명령어 | 설명 |
| M x,y | (x,y)로 이동하여서 새로운 경로를 시작합니다. |
| L x,y | (x,y)까지 라인을 그립니다. |
| C x1,y1 x2,y2 x,y | (x,y) 까지 제어점 (x1,y1) 과 (x2,y2)를 이용하여 3차 베지어 곡선을 그립니다. |
| Z | 시작 경로지점으로 선을 그려서 경로를 닫습니다. |
12 * 12 가상의 그리드가 존재한다고 할때 위의 path 코드는 각각 다음과 같이 표현됩니다.
2개의 댓글
hello · 2023년 1월 4일 1:38 오후
최하단 이미지가 안보입니다!
Charlezz · 2023년 2월 9일 8:13 오후
제보 감사합니다. 수정했습니다.