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

ลองใช้วิธีเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีแสดงกราฟิกใน Compose
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 กำหนดออบเจ็กต์แบบวาดได้แบบคงที่ กราฟิกเวกเตอร์แต่ละรายการจะระบุเป็นต้นไม้ ซึ่งคล้ายกับรูปแบบ SVG ลำดับชั้นที่ประกอบด้วยออบเจ็กต์ path และ group path แต่ละรายการมีเรขาคณิตของขอบของวัตถุ และ group มีรายละเอียดสำหรับการเปลี่ยนรูปแบบ ระบบจะวาดเส้นทางทั้งหมดในลําดับเดียวกับที่ปรากฏในไฟล์ XML

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

เนื้อหาเวกเตอร์ เครื่องมือ 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 นี้จะแสดงรูปภาพต่อไปนี้

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

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

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

การใช้แนวทางนี้จะช่วยให้คุณกำหนดไฟล์ XML แยกต่างหากได้ 3 ไฟล์ ดังนี้

  • ไฟล์ VectorDrawable XML
  • ไฟล์ AnimatedVectorDrawable XML ที่กําหนด VectorDrawable เป้าหมาย เส้นทางและกลุ่มเป้าหมายที่จะเคลื่อนไหว พร็อพเพอร์ตี้ และภาพเคลื่อนไหวที่กําหนดเป็นออบเจ็กต์ ObjectAnimator หรือออบเจ็กต์ AnimatorSet
  • ไฟล์ 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" />
     <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 Bundle ต่างๆ ในขณะที่สร้างแอป แท็ก 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 พร้อมให้บริการผ่านไลบรารีการสนับสนุน 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>