벡터 드로어블 개요

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 그래픽을 표시하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> 이미지 벡터 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

핵심사항

  • 벡터 드로어블은 XML 파일에서 점, 선 및 요소의 집합으로 정의되는 벡터 그래픽입니다. 관련 색상 정보와 함께 표시됩니다.
  • 벡터 드로어블은 확장 가능합니다. 즉, 디스플레이 품질을 유지하면서 크기를 조절할 수 있습니다. Android 앱에서 사용하기에 이상적이며, 앱의 크기를 줄이는 데 도움이 되기 때문입니다. APK 파일을 확장하고 성능을 향상할 수 있습니다.
  • Android 스튜디오에서 drawable 폴더를 마우스 오른쪽 버튼으로 클릭하여 벡터 드로어블을 만들 수 있습니다. 프로젝트에서 새로 만들기 > 벡터 애셋. 또한 SVG 파일을 Android 스튜디오를 벡터 드로어블로 사용합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. 2023년 7월 24일에 Google Bard에서 생성된 요약

소개

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 파일에서 표시되는 것과 동일한 순서로 표시됩니다.

그림 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은 다음 이미지를 렌더링합니다.

AnimationVectorDrawable 클래스 정보

AnimatedVectorDrawable는 벡터 속성에 애니메이션을 추가합니다. 있습니다. 애니메이션 벡터 그래픽을 3개의 개별 그래픽으로 정의할 수 리소스 파일일 수도 있고 전체 드로어블을 정의하는 단일 XML 파일로 간주됩니다. 자, 이해를 돕기 위해 두 가지 접근 방식인 다중 XML 파일 및 싱글 XML 파일을 참고하세요.

여러 XML 파일

이 방법을 사용하면 세 개의 개별 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>