ภาพรวมเวกเตอร์ที่ถอนออกได้

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีแสดงกราฟิกใน Compose
ImageVector →

ข้อมูลสำคัญ

  • Vector Drawable คือภาพกราฟิกเวกเตอร์ที่กำหนดไว้ในไฟล์ XML เป็นชุดจุด เส้น และเส้นโค้ง พร้อมกับข้อมูลสีที่เกี่ยวข้อง
  • Vector Drawable สามารถปรับขนาดได้ ซึ่งหมายความว่าคุณสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพการแสดงผล ซึ่งทำให้เหมาะสำหรับการใช้งานในแอป Android เนื่องจากช่วยลดขนาดไฟล์ APK และปรับปรุงประสิทธิภาพได้
  • คุณสร้าง Vector Drawable ใน Android Studio ได้โดยคลิกขวาที่โฟลเดอร์ที่ถอนออกได้ในโปรเจ็กต์ แล้วเลือกใหม่ > ชิ้นงานเวกเตอร์ นอกจากนี้ คุณยังนำเข้าไฟล์ SVG ไปยัง Android Studio เป็น Vector Drawable ได้ด้วย
สรุปที่สร้างโดย Google Bard เมื่อวันที่ 24 กรกฎาคม 2023

บทนำ

VectorDrawable คือภาพกราฟิกเวกเตอร์ที่กำหนดไว้ในไฟล์ XML เป็นชุดจุด เส้น และเส้นโค้ง พร้อมด้วยข้อมูลสีที่เกี่ยวข้อง ข้อดีหลักของการใช้ Vector Drawable คือความสามารถในการปรับขนาดรูปภาพ โดยสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพการแสดงผล ซึ่งหมายความว่าไฟล์เดียวกันจะปรับขนาดตามความหนาแน่นของหน้าจอที่แตกต่างกันได้โดยไม่สูญเสียคุณภาพของรูปภาพ ซึ่งจะส่งผลให้ไฟล์ APK มีขนาดเล็กลงและนักพัฒนาแอปไม่ต้องบำรุงรักษามากนัก นอกจากนี้ คุณยังใช้รูปภาพเวกเตอร์สำหรับภาพเคลื่อนไหวได้โดยใช้ไฟล์ XML หลายไฟล์แทนรูปภาพหลายรูปสำหรับความละเอียดในการแสดงผลแต่ละรายการ

หน้านี้และวิดีโอด้านล่างแสดงภาพรวมของวิธีสร้าง Vector Drawable ใน XML นอกจากนี้ Android Studio ยังแปลงไฟล์ SVG เป็นรูปแบบ Vector Drawable ได้ด้วย ตามที่อธิบายไว้ในเพิ่มภาพกราฟิกเวกเตอร์แบบหลายความหนาแน่น

Android 5.0 (ระดับ API 21) เป็นเวอร์ชันแรกที่รองรับ Vector Drawable อย่างเป็นทางการด้วย VectorDrawable และ AnimatedVectorDrawable แต่คุณสามารถรองรับเวอร์ชันที่เก่ากว่าได้ด้วยไลบรารีการสนับสนุนของ Android ซึ่งมีคลาส VectorDrawableCompat และ AnimatedVectorDrawableCompat

เกี่ยวกับคลาส VectorDrawable

VectorDrawable กำหนดออบเจ็กต์ที่วาดได้แบบคงที่ ภาพกราฟิกเวกเตอร์แต่ละภาพจะกำหนดเป็นลำดับชั้นแบบต้นไม้ ซึ่งประกอบด้วยออบเจ็กต์ path และ group คล้ายกับรูปแบบ SVG path แต่ละรายการจะมีเรขาคณิตของโครงร่างของออบเจ็กต์ และ group จะมีรายละเอียดสำหรับการเปลี่ยนรูปแบบ ระบบจะวาดเส้นทางทั้งหมดตามลำดับเดียวกับที่ปรากฏในไฟล์ XML

รูปที่ 1 ตัวอย่างลำดับชั้นของชิ้นงาน Vector Drawable

เครื่องมือ Vector Asset Studio เป็นวิธีง่ายๆ ในการเพิ่มภาพกราฟิกเวกเตอร์ลงในโปรเจ็กต์เป็นไฟล์ XML

ตัวอย่าง 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 นี้จะแสดงผลรูปภาพต่อไปนี้

เกี่ยวกับคลาส AnimatedVectorDrawable

AnimatedVectorDrawable เพิ่มภาพเคลื่อนไหวลงในพร็อพเพอร์ตี้ของภาพกราฟิกเวกเตอร์ คุณสามารถกำหนดภาพกราฟิกเวกเตอร์แบบเคลื่อนไหวเป็นไฟล์ทรัพยากร 3 ไฟล์แยกกันหรือเป็นไฟล์ XML ไฟล์เดียวที่กำหนดออบเจ็กต์ที่ถอนออกได้ทั้งหมด มาดูทั้ง 2 วิธีเพื่อทำความเข้าใจให้ดียิ่งขึ้น ได้แก่ ไฟล์ XML หลายไฟล์และไฟล์ XML ไฟล์เดียว

ไฟล์ XML หลายไฟล์

เมื่อใช้วิธีนี้ คุณจะกำหนดไฟล์ XML แยกกันได้ 3 ไฟล์ ดังนี้

  • ไฟล์ XML VectorDrawable
  • ไฟล์ XML AnimatedVectorDrawable ที่กำหนดเป้าหมาย VectorDrawable, เส้นทางเป้าหมายและกลุ่มที่จะทำให้เคลื่อนไหว, พร็อพเพอร์ตี้ และภาพเคลื่อนไหวที่กำหนดเป็นออบเจ็กต์ ObjectAnimator หรือออบเจ็กต์ AnimatorSet
  • ไฟล์ XML ของ Animator

ตัวอย่างไฟล์ XML หลายไฟล์

ไฟล์ XML ต่อไปนี้แสดงภาพเคลื่อนไหวของภาพกราฟิกเวกเตอร์

  • ไฟล์ XML ของ VectorDrawable: 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>
  • ไฟล์ XML ของ AnimatedVectorDrawable: 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>
  • ไฟล์ XML ของ Animator ที่ใช้ในไฟล์ XML ของ AnimatedVectorDrawable: 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 ไฟล์เดียวได้ผ่านรูปแบบแพ็กเกจ XML เมื่อสร้างแอป แท็ก aapt จะสร้างทรัพยากรแยกต่างหากและอ้างอิงทรัพยากรเหล่านั้นในเวกเตอร์แบบเคลื่อนไหว วิธีนี้ต้องใช้ Build Tools 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>

โซลูชันความเข้ากันได้แบบย้อนหลังของ Vector Drawable

หากต้องการรองรับ Vector Drawable และ Animated Vector Drawable ในอุปกรณ์ที่ใช้แพลตฟอร์มเวอร์ชันต่ำกว่า Android 5.0 (ระดับ API 21) หรือใช้ฟังก์ชัน fillColor, fillType และ strokeColor ที่ต่ำกว่า Android 7.0 (ระดับ API 24) คุณสามารถใช้ VectorDrawableCompat และ AnimatedVectorDrawableCompat ผ่านไลบรารีการสนับสนุน 2 รายการ ได้แก่ support-vector-drawable และ animated-vector-drawable ตามลำดับ

Android Studio 1.4 เปิดตัวการรองรับความเข้ากันได้แบบจำกัดสำหรับ Vector Drawable โดยการสร้างไฟล์ PNG ณ เวลาบิลด์ อย่างไรก็ตาม ไลบรารีการสนับสนุน Vector Drawable และ Animated Vector Drawable มีทั้งความยืดหยุ่นและความเข้ากันได้ที่กว้างขวาง เนื่องจากเป็นไลบรารีการสนับสนุน คุณจึงใช้กับแพลตฟอร์ม Android ทุกเวอร์ชันได้ตั้งแต่ Android 2.1 (ระดับ API 7 ขึ้นไป) หากต้องการกำหนดค่าแอปให้ใช้ไลบรารีการสนับสนุนเวกเตอร์ ให้เพิ่มองค์ประกอบ vectorDrawables ลงในไฟล์ build.gradle ในโมดูลแอป

ใช้ข้อมูลโค้ดต่อไปนี้เพื่อกำหนดค่าองค์ประกอบ vectorDrawables

ดึงดูด

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

ดึงดูด

// 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 โหลด Drawable ไม่ใช่ทุกที่ที่ยอมรับรหัส Drawable เช่น ในไฟล์ XML จะรองรับการโหลด Vector Drawable แพ็กเกจ android.support.v7.appcompat ได้เพิ่มฟีเจอร์จำนวนหนึ่งเพื่อให้ใช้ Vector Drawable ได้ง่าย ประการแรก เมื่อคุณใช้แพ็กเกจ android.support.v7.appcompat กับ ImageView หรือกับคลาสย่อย เช่น ImageButton และ FloatingActionButton คุณสามารถใช้แอตทริบิวต์ app:srcCompat ใหม่เพื่ออ้างอิง Vector Drawable รวมถึง Drawable อื่นๆ ที่ใช้ได้กับ android:src ดังนี้ 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

หากต้องการเปลี่ยน Drawable ขณะรันไทม์ คุณสามารถใช้เมธอด setImageResource() ได้เหมือนเดิม การใช้ AppCompat และ app:srcCompat เป็นวิธีที่ปลอดภัยที่สุดในการผสานรวม Vector Drawable เข้ากับแอป

Support Library 25.4.0 ขึ้นไปรองรับฟีเจอร์ต่อไปนี้

  • Path Morphing (PathType evaluator) ใช้เพื่อเปลี่ยนรูปแบบเส้นทางหนึ่งเป็นอีกเส้นทางหนึ่ง
  • Path Interpolation ใช้เพื่อกำหนดตัวกำหนดอัตราการเปลี่ยนแปลงที่ยืดหยุ่น (แสดงเป็นเส้นทาง) แทนตัวกำหนดอัตราการเปลี่ยนแปลงที่ระบบกำหนด เช่น LinearInterpolator

Support Library 26.0.0-beta1 ขึ้นไปรองรับฟีเจอร์ต่อไปนี้

  • เคลื่อนที่ไปตามเส้นทาง ออบเจ็กต์เรขาคณิตสามารถเคลื่อนที่ไปรอบๆ ตามเส้นทางที่กำหนดเอง โดยเป็นส่วนหนึ่งของภาพเคลื่อนไหว

ตัวอย่างไฟล์ XML หลายไฟล์ที่ใช้ไลบรารีสนับสนุน

ไฟล์ XML ต่อไปนี้แสดงแนวทางการใช้ไฟล์ XML หลายไฟล์เพื่อทำให้ภาพกราฟิกเวกเตอร์เคลื่อนไหว

  • ไฟล์ XML ของ VectorDrawable: 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>
  • ไฟล์ XML ของ AnimatedVectorDrawable: 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>
  • ไฟล์ XML ของ Animator ที่ใช้ในไฟล์ XML ของ AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

ไฟล์ XML ไฟล์เดียว

ไฟล์ XML ต่อไปนี้แสดงแนวทางการใช้ไฟล์ XML ไฟล์เดียวเพื่อสร้างภาพเคลื่อนไหวของภาพกราฟิกเวกเตอร์ เมื่อสร้างแอป แท็ก aapt จะสร้างทรัพยากรแยกต่างหากและอ้างอิงทรัพยากรเหล่านั้นในเวกเตอร์แบบเคลื่อนไหว วิธีนี้ต้องใช้ Build Tools 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>