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

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

ข้อมูลสำคัญ

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

ข้อมูลเบื้องต้น

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

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

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

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

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

รูปที่ 1 ตัวอย่างลําดับชั้นของชิ้นงานที่วาดได้แบบเวกเตอร์

เครื่องมือสตูดิโอชิ้นงานเวกเตอร์มีวิธีง่ายๆ ในการเพิ่มกราฟิกเวกเตอร์ลงในโปรเจ็กต์เป็นไฟล์ 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 ไฟล์ ดังนี้

  • ไฟล์ VectorDrawable XML
  • ไฟล์ AnimatedVectorDrawable XML ที่กําหนด 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 จะสร้างทรัพยากรแยกต่างหากและอ้างอิงทรัพยากรเหล่านั้นในเวกเตอร์ภาพเคลื่อนไหว แนวทางนี้ต้องใช้เครื่องมือสร้าง 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

หากต้องการรองรับภาพวาดเวกเตอร์และภาพวาดเวกเตอร์แบบเคลื่อนไหวในอุปกรณ์ที่ใช้แพลตฟอร์มเวอร์ชันต่ำกว่า 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 รองรับการแสดงผลแบบจำกัดสำหรับภาพวาดเวกเตอร์โดยการสร้างไฟล์ PNG ณ เวลาสร้างบิวด์ อย่างไรก็ตาม ไลบรารีสนับสนุนภาพวาดเวกเตอร์และภาพวาดเวกเตอร์แบบเคลื่อนไหวมีความยืดหยุ่นและเข้ากันได้ในวงกว้าง เนื่องจากเป็นไลบรารีสนับสนุน คุณจึงนำไปใช้กับแพลตฟอร์ม 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 แพ็กเกจ 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" />

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

ไลบรารีการสนับสนุน 25.4.0 ขึ้นไปรองรับฟีเจอร์ต่อไปนี้

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

ไลบรารีการสนับสนุน 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 จะสร้างทรัพยากรแยกต่างหากและอ้างอิงทรัพยากรเหล่านั้นในเวกเตอร์ภาพเคลื่อนไหว แนวทางนี้ต้องใช้เครื่องมือสร้าง 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>