핵심사항
- 벡터 드로어블은 XML 파일에서 점, 선 및 요소의 집합으로 정의되는 벡터 그래픽입니다. 관련 색상 정보와 함께 표시됩니다.
- 벡터 드로어블은 확장 가능합니다. 즉, 디스플레이 품질을 유지하면서 크기를 조절할 수 있습니다. Android 앱에서 사용하기에 이상적이며, 앱의 크기를 줄이는 데 도움이 되기 때문입니다. APK 파일을 확장하고 성능을 향상할 수 있습니다.
- Android 스튜디오에서 drawable 폴더를 마우스 오른쪽 버튼으로 클릭하여 벡터 드로어블을 만들 수 있습니다. 프로젝트에서 새로 만들기 > 벡터 애셋. 또한 SVG 파일을 Android 스튜디오를 벡터 드로어블로 사용합니다.
소개
VectorDrawable
는 Google Kubernetes Engine,
점, 선, 곡선과 관련 있는 요소의 모음으로 XML 파일에서
색상 정보입니다. 벡터 드로어블 사용의 가장 큰 장점은 이미지
살펴봤습니다 디스플레이 품질을 떨어뜨리지 않고 크기를 조정할 수 있으므로
같은 파일의 크기가 이미지 품질 손실 없이 다른 화면 밀도에 맞게 조정됨
따라서 APK 파일 수가 줄고 개발자 유지 관리 작업이 줄어듭니다. 그 외에
애니메이션에 벡터 이미지를 사용하려면 XML 파일을 여러 개 사용하는 대신
표시할 수 있습니다.
이 페이지와 아래 동영상에서는 XML에서 벡터 드로어블을 만드는 방법을 간략히 설명합니다. Android 스튜디오는 또한 다음에 설명된 대로 SVG 파일을 벡터 드로어블 형식으로 변환할 수 있습니다. (다중 밀도 벡터 그래픽 추가 사용)
Android 5.0 (API 수준 21)은
VectorDrawable
및 AnimatedVectorDrawable
,
Android 지원 라이브러리로 이전 버전을 지원할 수 있습니다. 이 라이브러리는
VectorDrawableCompat
및
AnimatedVectorDrawableCompat
클래스.
VectorDrawable 클래스 정보
VectorDrawable
는 정적 드로어블을 정의합니다.
객체를 지정합니다. SVG 형식과 유사하게 각 벡터 그래픽은 트리로 정의됩니다.
path
및 group
객체로 구성된 계층 구조입니다.
각 path
에는 객체 윤곽선의 도형과
group
에는 변환에 관한 세부정보가 포함되어 있습니다. 모든 경로가 그려짐
XML 파일에서 표시되는 것과 동일한 순서로 표시됩니다.
![](https://developer.android.com/static/images/guide/topics/graphics/vectorpath.png?authuser=0000&hl=ko)
그림 1. 벡터 드로어블 자산의 샘플 계층 구조
벡터 애셋 Studio 도구를 사용하면 프로젝트에 벡터 그래픽을 간단하게 추가할 수 있습니다. .
예제 XML
다음은 이미지를 렌더링하는 샘플 VectorDrawable
XML 파일입니다.
배터리의 상태를 나타냅니다.
<!-- res/drawable/battery_charging.xml --> <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>
이 XML은 다음 이미지를 렌더링합니다.
![](https://developer.android.com/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=0000&hl=ko)
AnimationVectorDrawable 클래스 정보
AnimatedVectorDrawable
는 벡터 속성에 애니메이션을 추가합니다.
있습니다. 애니메이션 벡터 그래픽을 3개의 개별 그래픽으로 정의할 수
리소스 파일일 수도 있고 전체 드로어블을 정의하는 단일 XML 파일로 간주됩니다. 자,
이해를 돕기 위해 두 가지 접근 방식인 다중 XML 파일 및 싱글
XML 파일을 참고하세요.
여러 XML 파일
이 방법을 사용하면 세 개의 개별 XML 파일을 정의할 수 있습니다.
VectorDrawable
XML 파일입니다.-
AnimatedVectorDrawable
XML 파일은 타겟VectorDrawable
를 정의합니다. 애니메이션을 적용할 타겟 경로 및 그룹, 속성, 정의된 애니메이션ObjectAnimator
객체로 표현 또는AnimatorSet
객체 - 애니메이터 XML 파일입니다.
여러 XML 파일의 예
다음 XML 파일은 벡터 그래픽의 애니메이션을 보여줍니다.
- VectorDrawable의 XML 파일:
vd.xml
-
<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>
- AnimationVectorDrawable의 XML 파일:
avd.xml
-
<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>
- AnimationVectorDrawable의 XML에 사용되는 애니메이터 XML 파일
파일:
rotation.xml
및path_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<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>
단일 XML 파일
이 방법을 사용하면 관련 XML 파일을 하나의 파일로 병합할 수 있습니다.
XML 파일을 제공합니다. 앱을 빌드할 때
aapt
태그는 별도의 리소스를 만들고
애니메이션 벡터입니다. 이 접근 방식에는 빌드 도구 24 이상이 필요하며
출력은 이전 버전과 호환됩니다.
단일 XML 파일의 예
<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>
벡터 드로어블 이전 버전과의 호환성 솔루션
더 낮은 플랫폼 버전을 실행하는 기기에서 벡터 드로어블과 애니메이션 벡터 드로어블을 지원하기 위해
Android 5.0 (API 수준 21)보다 크거나 같거나 fillColor
, fillType
,
strokeColor
기능(Android 7.0(API 수준 24),
VectorDrawableCompat
및 AnimatedVectorDrawableCompat
는 두 가지 지원 라이브러리를 통해 제공됩니다.
support-vector-drawable
님 및 animated-vector-drawable
님,
각각 1개의 값으로 사용합니다.
Android 스튜디오 1.4에서는 벡터에 대한 제한된 호환성 지원이 도입되었습니다.
드로어블을 만들 수 있습니다. 그러나 벡터 드로어블은
애니메이션 벡터 드로어블 지원 라이브러리는 유연성과
광범위한 호환성 — 지원 라이브러리이므로 모든 앱과 함께 사용할 수 있습니다.
Android 플랫폼 버전은 Android 2.1 (API 수준 7 이상)까지 지원됩니다.
앱에 벡터 지원 라이브러리를 사용하려면 vectorDrawables
요소를 앱 모듈의 build.gradle
파일에 추가합니다.
다음 코드 스니펫을 사용하여 vectorDrawables
구성
요소의 다음 속성을 사용합니다.
Groovy
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Groovy
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
Kotlin
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
VectorDrawableCompat
를 사용할 수 있습니다.
및
전체 AnimatedVectorDrawableCompat
(Android 4.0(API 수준 14) 이상을 실행하는 기기) Android
XML에서와 같이 드로어블 ID를 허용하는 모든 장소가 아닌 드로어블을 로드함
벡터 드로어블 로드를 지원합니다. 이
패키지 android.support.v7.appcompat
개가 번호를 추가했습니다.
벡터 드로어블을 쉽게 사용할 수 있습니다. 먼저
android.support.v7.appcompat
패키지
ImageView
또는 다음과 같은 서브클래스 사용
ImageButton
및
FloatingActionButton
님은 다음과 같은 작업을 할 수 있습니다.
새 app:srcCompat
속성을 사용하여 벡터 드로어블 참조
android:src
에 사용할 수 있는 다른 드로어블도 포함됩니다.
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
런타임에 드로어블을 변경하려면 다음을 사용할 수 있습니다.
setImageResource()
메서드를 사용할 수 있습니다. AppCompat
사용
그리고 app:srcCompat
는
벡터 드로어블을 앱에 추가합니다.
지원 라이브러리 25.4.0 이상에서는 다음 기능을 지원합니다.
- 경로 모핑 (PathType 평가자) 모핑에 사용 또 다른 경로로 갈 수 있습니다.
- 경로 보간: 유연한 경로 보간을 정의하는 데 보간기 (경로로 표시됨)를 사용하여 보간기를 사용할 수 있습니다.
지원 라이브러리 26.0.0-beta1 이상에서는 다음 기능을 지원합니다.
- 경로를 따라 이동: 도형 객체는 이리저리 이동할 수 있습니다. 애니메이션의 일부로 임의의 경로를 따라 표시할 수 있습니다.
지원 라이브러리를 사용하는 여러 XML 파일의 예
다음 XML 파일은 여러 XML 파일을 사용하는 방법을 보여줍니다. 벡터 그래픽에 애니메이션을 적용할 수 있습니다.
- VectorDrawable의 XML 파일:
vd.xml
-
<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>
- AnimationVectorDrawable의 XML 파일:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- AnimationVectorDrawable의 XML에 사용되는 애니메이터 XML 파일
파일:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
단일 XML 파일
다음 XML 파일은 단일 XML 파일을 사용하는 방법을 보여줍니다.
벡터 그래픽에 애니메이션을 적용할 수 있습니다. 앱을 빌드할 때
aapt
태그는 별도의 리소스를 만들고
애니메이션 벡터입니다. 이 접근 방식에는 빌드 도구 24 이상이 필요하며
출력은 이전 버전과 호환됩니다.
지원 라이브러리를 사용하는 단일 XML 파일의 예
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" 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> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>