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

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

ข้อมูลสำคัญ

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

ต่อไปนี้คือตัวอย่างไฟล์ XML VectorDrawable ที่แสดงรูปภาพ ของแบตเตอรี่ในโหมดการชาร์จ 

<!-- 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 เดียวที่กำหนดไฟล์ที่ถอนออกได้ทั้งหมด มาเริ่มกันเลย จะพิจารณาทั้ง 2 วิธีการนี้ เพื่อให้เข้าใจมากขึ้น เช่น ไฟล์ XML หลายไฟล์และไฟล์เดียว ไฟล์ XML

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

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

  • ไฟล์ XML VectorDrawable
  • ไฟล์ XML AnimatedVectorDrawable ที่ ระบุ 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 ในเวลาบิลด์ อย่างไรก็ตาม 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 โหลดไฟล์ที่ถอนออกได้ ไม่ใช่ทุกตำแหน่งที่ยอมรับรหัสที่ถอนออกได้ เช่น ใน 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" />

หากต้องการเปลี่ยนเนื้อหาที่ถอนออกได้ขณะรันไทม์ คุณสามารถใช้ 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>