Vector Drawable: คืออะไร, รูปแบบ XML และทำงานอย่างไร

Vector Drawable คืออะไร?

Vector Drawable คือทรัพยากร Android ที่แสดงภาพเวกเตอร์ในรูปแบบ XML โดยอิงตามข้อกำหนด SVG (Scalable Vector Graphics) Google เปิดตัวรูปแบบนี้ใน Android 5.0 (API 21) เพื่อเป็นทางเลือกแทนภาพแรสเตอร์สำหรับไอคอน ภาพประกอบ และองค์ประกอบกราฟิกอื่นๆ ของอินเทอร์เฟซ

ต่างจาก PNG ที่ภาพถูกเก็บเป็นอาร์เรย์พิกเซลขนาดคงที่ Vector Drawable อธิบายรูปร่างทางคณิตศาสตร์ — ผ่านพิกัดจุด เส้นโค้งเบซิเยร์ การเติม และเส้นขอบ ซึ่งหมายความว่าภาพเวกเตอร์เดี่ยวสามารถแทนที่ได้ถึง หกไฟล์ PNG สำหรับความหนาแน่นหน้าจอต่างๆ (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) ซึ่งช่วยลดความซับซ้อนในการบำรุงรักษาทรัพยากรกราฟิกได้อย่างมาก

รูปแบบรองรับไม่เพียงแค่ภาพนิ่ง แต่ยังรวมถึงแอนิเมชันผ่าน AnimatedVectorDrawable รวมถึงการปรับให้เข้ากับธีมมืดและสีที่กำหนดเองผ่านแอตทริบิวต์ธีม ตั้งแต่ Android 7.0 (API 24) Vector Drawable ยังรองรับการเติมแบบเกรเดียนต์และการดำเนินการคลิปที่ซับซ้อน (clipPath) ซึ่งขยายความเป็นไปได้ในการออกแบบ

ส่วนประกอบหลักของ Vector Drawable

Vector Drawable แต่ละตัวประกอบด้วยองค์ประกอบราก vector พร้อมพารามิเตอร์ความกว้าง ความสูง และ viewport — ระบบพิกัดเสมือนที่ใช้วาดรูปร่าง ภายในประกอบด้วยกลุ่ม (group) และเส้นทาง (path) โดย path กำหนดเรขาคณิตผ่านลำดับคำสั่ง: M (moveTo), L (lineTo), C (cubicTo), Z (close) และอื่นๆ แต่ละ path สามารถมี fillColor และ strokeColor ของตัวเอง ซึ่งสามารถอ้างอิงทรัพยากรธีมได้

องค์ประกอบเพิ่มเติมรวมถึง clip-path สำหรับการคลิป, gradient สำหรับการเปลี่ยนสีแบบเกรเดียนต์ และแอตทริบิวต์การปรับให้เข้ากับธีมมืดผ่านแอตทริบิวต์ android:theme สีทั้งหมดใน Vector Drawable สามารถระบุเป็นข้อมูลอ้างอิงถึงแอตทริบิวต์ธีม (เช่น ?attr/colorPrimary) ซึ่งเปลี่ยนลักษณะของไอคอนเมื่อเปลี่ยนธีมโดยไม่ต้องทำซ้ำทรัพยากร

รูปแบบ Vector Drawable: โครงสร้าง XML

ไฟล์ XML ของ Vector Drawable วางอยู่ในไดเรกทอรี res/drawable/ และมีองค์ประกอบราก ภายในสามารถมีองค์ประกอบ ที่ซ้อนกันเพื่อจัดลำดับชั้น และองค์ประกอบ เพื่ออธิบายโครงร่าง แต่ละ path มีแอตทริบิวต์ pathData — สตริงของคำสั่งการวาดในรูปแบบเส้นทาง SVG

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

ในตัวอย่าง อธิบายวงกลมที่มีรัศมี 10 หน่วยใน viewport 24×24 พารามิเตอร์ fillColor อ้างอิงทรัพยากรสี ในขณะที่ strokeWidth และ strokeColor กำหนดเส้นขอบ ความกว้างและความสูงระบุเป็น dp — ซึ่งรับประกันการปรับขนาดที่ถูกต้องบนหน้าจอที่มีความหนาแน่นพิกเซลต่างกันโดยไม่ต้องแปลงเพิ่มเติม

การจัดกลุ่มและการแปลง

องค์ประกอบ group ช่วยให้จัดกลุ่มหลาย path และใช้การแปลงร่วมกัน: การหมุน (rotation), การเลื่อน (translateX, translateY) และการปรับขนาด (scaleX, scaleY) กลุ่มสามารถซ้อนกันได้ ทำให้สามารถสร้างลำดับชั้นที่ซับซ้อนด้วยองค์ประกอบนับร้อยโดยไม่สูญเสียประสิทธิภาพ

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

การจัดกลุ่มด้วยแอตทริบิวต์ pivotX/pivotY ใช้สำหรับแอนิเมชัน: คุณสามารถหมุนหรือปรับขนาดส่วนหนึ่งของภาพโดยแยกจากองค์ประกอบอื่นๆ ซึ่งมีประโยชน์โดยเฉพาะสำหรับการสร้างไอคอนสถานะแบบเคลื่อนไหว (เช่น การโหลด → สำเร็จ)

Vector Drawable เปรียบเทียบกับกราฟิกแรสเตอร์

การเลือกระหว่างกราฟิกเวกเตอร์และแรสเตอร์ขึ้นอยู่กับกรณีการใช้งาน Vector Drawable เหมาะสำหรับไอคอน ภาพประกอบ และองค์ประกอบอินเทอร์เฟซที่มีรายละเอียดน้อย ในขณะที่ภาพถ่ายและภาพซับซ้อนที่มีสีหลายพันสียังคงอยู่ในรูปแบบแรสเตอร์

ตาม Android Performance Patterns (Google I/O 2016) การแทนที่ไอคอน PNG ด้วย Vector Drawable ลดขนาด APK ลง 40–60% สำหรับแอปพลิเคชันที่มีทรัพยากรกราฟิกจำนวนมาก อย่างไรก็ตาม เมื่อเรนเดอร์เวกเตอร์ที่ซับซ้อนด้วย path หลายร้อยรายการ โหลด CPU จะเพิ่มขึ้น ดังนั้นสำหรับแอนิเมชันและการวาดซ้ำบ่อยๆ แนะนำให้ใช้แรสเตอร์ที่แคชไว้ล่วงหน้า

เมื่อใดควรเลือก Vector Drawable

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

แอนิเมชัน Vector Drawable

Android รองรับแอนิเมชัน Vector Drawable ผ่านสองกลไก: AnimatedVectorDrawable (ใช้งานได้ตั้งแต่ API 21) และ AnimatedStateListDrawable กลไกแรกช่วยให้เคลื่อนไหวแอตทริบิวต์ path — การหมุน การเลื่อน การเปลี่ยนสี และการเปลี่ยนรูปร่าง กลไกที่สองสลับระหว่างสถานะต่างๆ (กด, ไฮไลต์) ด้วยการเปลี่ยนภาพที่นุ่มนวล

AnimatedVectorDrawable ใช้ไฟล์ XML สามไฟล์: Vector Drawable เอง, ObjectAnimator ที่อธิบายแอนิเมชัน และ AnimatedVectorDrawable ที่เชื่อมโยงซึ่งเชื่อมต่อเป้าหมาย (ชื่อกลุ่มหรือ path) เข้ากับ animator แอนิเมชันสามารถเปลี่ยน fillColor, strokeColor, rotation, translateX/Y, scaleX/Y และแม้แต่ pathData — แปลงรูปร่างหนึ่งเป็นอีกรูปร่างหนึ่งอย่างนุ่มนวล (morphing)

ตัวอย่างแอนิเมชัน morphing

พิจารณาแอนิเมชันที่ไอคอนบวกเปลี่ยนเป็นไอคอนปิด ข้อจำกัดหลัก: จำนวนคำสั่ง pathData ต้องตรงกันในสถานะเริ่มต้นและสุดท้าย มิฉะนั้นแอนิเมชันจะไม่ทำงาน

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close เปลี่ยนคุณสมบัติ pathData จากรูปร่างบวกเดิมเป็นรูปร่างปิดภายใน 300 มิลลิวินาที ระบบจะประมาณค่าพิกัดระหว่างสองชุดคำสั่งเส้นทาง SVG โดยอัตโนมัติ แอนิเมชันประเภทนี้ใช้กันอย่างแพร่หลายใน Material Design สำหรับการเปลี่ยนสถานะของปุ่มและไอคอนอย่างนุ่มนวล

ตัวอย่างโค้ด Vector Drawable

มาดูตัวอย่าง XML เวกเตอร์ที่สมบูรณ์สำหรับไอคอน ลูกศรกลับ ที่รองรับธีมมืด สีถูกกำหนดผ่านการอ้างอิงถึงแอตทริบิวต์ธีม ซึ่งเปลี่ยนสีไอคอนโดยอัตโนมัติเมื่อสลับระหว่างธีมสว่างและธีมมืดโดยไม่ต้องทำซ้ำทรัพยากร

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

พารามิเตอร์ android:tint ด้วยค่า ?attr/colorControlNormal จะใช้สีควบคุมของระบบโดยอัตโนมัติ — สีเทาเข้มบนธีมสว่าง สีขาวบนธีมมืด กลุ่มที่ชื่อ arrow ช่วยให้เคลื่อนไหวไอคอนนี้ผ่าน AnimatedVectorDrawable

การโหลด Vector Drawable จากโค้ด

ในการโหลด Vector Drawable จากโปรแกรมใน Android ให้ใช้คลาส AppCompatResources.getDrawable() หรือเมธอด ContextCompat.getDrawable() ในโปรเจกต์ Jetpack Compose สมัยใหม่ Drawable แบบแรสเตอร์และเวกเตอร์จะถูกโหลดผ่าน painterResource ซึ่งจะกำหนดรูปแบบทรัพยากรโดยอัตโนมัติ

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

เมื่อใช้ AppCompatResources.getDrawable() ไลบรารี AppCompat จะเลือกรุ่น drawable ที่ถูกต้องโดยอัตโนมัติตามระดับ API: บนอุปกรณ์ก่อน Android 5.0 (API 21) อาจใช้แรสเตอร์สำรอง (fallback); บนอุปกรณ์ใหม่กว่าจะใช้ Vector Drawable ใน Jetpack Compose painterResource จะจัดการความเข้ากันได้นี้โดยอัตโนมัติ