[Android] VectorDrawable(벡터 드로어블) 사용법

1.설명

1. VectorDrawable은 XML 파일에서 연관된 색상 정보와 함께 점, 선, 곡선의 조합으로 정의되는 벡터 그래픽이다.

 

 

2. 화면 품질이 손상되지 않고 크기를 조정할 수 있따!!!!!!!!!

 

 

3. 벡터 그래픽은 path 및 group 개체로 구성되는 트리 계층 구조로 정의된다. 

( 각 path에는 객체 윤곽선의 도형이 포함되고 group에는 변환에 관한 세부 정보가 포함됩니다. 모든 경로는 XML 파일에 표시된 순서대로 그린다. )

 

 

4. 벡터 드로어블 계층 구조

 

 

1.2. 요소 정의

<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”속성과 동일한 형식을 사용하여 클립경로를 정의합니다.

 

 

 

 

 

2. 샘플 코드

2.1. 샘플 xml (배터리 이미지)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
  <group
    android:name="rotationGroup"
    android:pivotX="10.0"
    android:pivotY="10.0"
    android:rotation="15.0" >
    <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
    <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
  </group>
</vector>

 

 

3. 만들 수 있는 방식

3.1. AnimatedVectorDrawable 클래스 정보

- AnimatedVectorDrawable에서는 벡터 그래픽의 속성에 애니메이션을 추가한다.

- 애니메이션 벡터 그래픽을 세 개의 개별 리소스 파일로 정의하거나 전체 드로어블을 정의하는 단일 XML 파일로 정의할 수 있다.

두 접근 방식 -> 여러 XML 파일, 단일 XML 파일

 

 

---

 

3.2.0. 여러 XML 파일

이 방법을 사용하면 다음 세 개의 개별 XML 파일을 정의할 수 있다.

• VectorDrawable XML 파일
• 타겟 VectorDrawable, 애니메이션화할 타겟 경로 및 그룹, 속성 및 ObjectAnimator 개체 또는 AnimatorSet 개체로 정의된 애니메이션을 정의하는 AnimatedVectorDrawable XML 파일
• 애니메이터 XML 파일

3.2.1. VectorDrawable의 XML 파일: vd.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="vectorPath"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

 

 

3.2.2. AnimatedVectorDrawable XML 파일: avd.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vd" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="vectorPath"
        android:animation="@anim/path_morph" />
</animated-vector>

 

3.2.3. 애니메이터 XML 파일: rotation.xml , path_morph.xml (2개 만들어야함)

rotation.xml

rotation.xml을 animator 안에다가 만들어야하네.... (animator파일을 따로 만들 던지, 아니면 일딴 파일 만들고 작성하다가 빨간느낀표 뜨면 "move"  이동하기 클릭하면됨.

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"
    xmlns:android="http://schemas.android.com/apk/res/android" />

 

path_morph.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType"/>
</set>

 

 

 

 

---

 

 

 

 

 

3.3.0. 단일 XML 파일

이 방법을 사용하면 관련 XML 파일을 XML 번들 형식을 통해 단일 XML 파일로 병합할 수 있다.

앱을 빌드할 때 aapt 태그를 통해 별도의 리소스를 만들고 애니메이션화된 벡터에서 참조한다.

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>