ข้อมูลสำคัญ
- Vector Drawable คือกราฟิกเวกเตอร์ที่กำหนดในไฟล์ XML เป็นชุดจุด เส้น และ เส้นโค้งพร้อมด้วยข้อมูลสีที่เกี่ยวข้อง
- เวกเตอร์ที่ถอนออกได้สามารถปรับขนาดได้ ซึ่งหมายความว่าสามารถปรับขนาดได้โดยไม่ต้องสูญเสียคุณภาพการแสดงผล จึงทำให้เหมาะสำหรับใช้ในแอป Android เนื่องจากจะช่วยลดขนาด ไฟล์ APK และปรับปรุงประสิทธิภาพ
- คุณสร้างเวกเตอร์ที่ถอนออกได้ใน Android Studio ได้โดยคลิกขวาที่โฟลเดอร์ที่ถอนออกได้ ในโปรเจ็กต์ของคุณและเลือก ใหม่ > เนื้อหาเวกเตอร์ และยังนำเข้าไฟล์ SVG ไปยัง Android Studio เป็นเวกเตอร์ที่ถอนออกได้
ข้อมูลเบื้องต้น
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
![](https://developer.android.com/static/images/guide/topics/graphics/vectorpath.png?authuser=5&hl=th)
รูปที่ 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 นี้จะแสดงรูปภาพต่อไปนี้
![](https://developer.android.com/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=5&hl=th)
เกี่ยวกับคลาส 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>