เพิ่มกราฟิกเวกเตอร์ที่มีความหนาแน่นหลากหลาย

Android Studio มีเครื่องมือที่ชื่อ Vector Asset Studio ซึ่งช่วยให้คุณเพิ่มไอคอน Material รวมถึงนำเข้าไฟล์กราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) และเอกสาร Adobe Photoshop (PSD) ไปยังโปรเจ็กต์เป็นทรัพยากร Vector Drawable ได้ การใช้ drawable แบบเวกเตอร์แทนบิตแมปจะช่วยลดขนาด APK เนื่องจาก ไฟล์เดียวกันสามารถปรับขนาดให้มีความหนาแน่นของหน้าจอที่ต่างกันได้โดยไม่สูญเสียคุณภาพของรูปภาพ สำหรับ Android เวอร์ชันก่อนหน้าที่ไม่รองรับ Vector Drawable Vector Asset Studio จะแปลง Vector Drawable เป็น บิตแมปขนาดต่างๆ สำหรับความหนาแน่นหน้าจอแต่ละแบบได้ในเวลาบิลด์

เกี่ยวกับ Vector Asset Studio

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

หากต้องการใช้ Vector Drawable กับ Jetpack Compose คุณต้องตั้งค่าระดับ API ขั้นต่ำเป็น Android 5.0 (ระดับ API 21) ขึ้นไป

Android 4.4 (ระดับ API 20) และต่ำกว่าไม่รองรับ Vector Drawable หากตั้งค่าระดับ API ขั้นต่ำเป็นระดับ API ระดับใดระดับหนึ่งต่อไปนี้ คุณจะมี 2 ตัวเลือกเมื่อใช้ Vector Asset Studio ได้แก่ สร้างไฟล์ Portable Network Graphic (PNG) (ค่าเริ่มต้น) หรือใช้เทคนิคความเข้ากันได้แบบย้อนหลังใน AndroidX

Vector Asset Studio จะสร้างภาพแรสเตอร์ของ Vector Drawable เพื่อความเข้ากันได้แบบย้อนหลัง ระบบจะแพ็ก Drawable แบบเวกเตอร์และแบบแรสเตอร์ไว้ด้วยกันใน APK คุณอ้างอิง Vector Drawable เป็น Drawable ในโค้ด Kotlin หรือ @drawable ในโค้ด XML ได้ เมื่อแอปทํางาน รูปภาพเวกเตอร์หรือรูปภาพแรสเตอร์ที่เกี่ยวข้องจะแสดงโดยอัตโนมัติ ทั้งนี้ขึ้นอยู่กับระดับ API

หากต้องการใช้เฉพาะ Vector Drawable คุณสามารถใช้ AndroidX 1.0.0 ขึ้นไป เทคนิคนี้กำหนดให้คุณต้องเปลี่ยนแปลงไฟล์ build.gradle ก่อนที่จะเรียกใช้ Vector Asset Studio ตามที่อธิบายไว้ใน AndroidX คลาส VectorDrawableCompat ใน AndroidX ช่วยให้คุณรองรับ VectorDrawable ใน Android 2.1 (ระดับ API 7) ขึ้นไปได้

ประเภทภาพกราฟิกเวกเตอร์ที่รองรับ

ข้อกำหนดของ Material Design ของ Google มีไอคอน Material ที่คุณใช้ในแอป Android ได้ Vector Asset Studio ช่วยให้คุณเลือก นำเข้า และ ปรับขนาดไอคอนจากดีไซน์ Material รวมถึงกำหนดความทึบแสงและการตั้งค่าการมิเรอร์จากขวาไปซ้าย (RTL)

นอกจากนี้ Vector Asset Studio ยังให้คุณนำเข้าไฟล์ SVG และ PSD ของคุณเองได้ด้วย SVG เป็นมาตรฐานเปิดที่อิงตาม XML ของ World Wide Web Consortium (W3C) รูปแบบไฟล์ PSD รองรับฟีเจอร์ของ Adobe Photoshop Vector Asset Studio รองรับมาตรฐานที่สำคัญ แต่ไม่รองรับฟีเจอร์ SVG และ PSD บางอย่าง เมื่อระบุไฟล์ SVG หรือ PSD แล้ว Vector Asset Studio จะให้ความคิดเห็นทันทีว่ารองรับโค้ดกราฟิก หรือไม่ โดยจะแปลงไฟล์เป็นไฟล์ XML ที่มีโค้ด VectorDrawable หากได้รับข้อผิดพลาด คุณควรตรวจสอบว่า VectorDrawable ปรากฏตามที่ต้องการ ดูข้อมูลเพิ่มเติม เกี่ยวกับฟีเจอร์ PSD ที่อนุญาตได้ที่การรองรับและข้อจำกัดสำหรับไฟล์ PSD

สำหรับ Android 5.0 (API ระดับ 21) ขึ้นไป คุณสามารถใช้คลาส AnimatedVectorDrawable เพื่อสร้างภาพเคลื่อนไหวคุณสมบัติของคลาส VectorDrawable AndroidX ช่วยให้คุณใช้คลาส AnimatedVectorDrawableCompat เพื่อสร้างภาพเคลื่อนไหวคลาส VectorDrawable สำหรับ Android 3.0 (ระดับ API 11) ขึ้นไปได้ ดูข้อมูลเพิ่มเติมได้ที่ รูปภาพเวกเตอร์เคลื่อนไหวใน Compose

ข้อควรพิจารณาสําหรับไฟล์ SVG และ PSD

Vector Drawable เหมาะสำหรับไอคอนที่เรียบง่าย ไอคอน Material เป็นตัวอย่างที่ดีของรูปภาพประเภทต่างๆ ที่ใช้ได้ดีในฐานะภาพวาดเวกเตอร์ในแอป ในทางตรงกันข้าม ไอคอนเปิดแอปหลายรายการมีรายละเอียดจำนวนมาก จึงทำงานได้ดีกว่าในฐานะรูปภาพแรสเตอร์

การโหลด Vector Drawable ครั้งแรกอาจใช้รอบ CPU มากกว่ารูปภาพแรสเตอร์ที่เกี่ยวข้อง หลังจากนั้น การใช้หน่วยความจำและประสิทธิภาพจะคล้ายกัน ระหว่างทั้ง 2 อย่าง เราขอแนะนำให้จำกัดรูปภาพเวกเตอร์ให้มีขนาดไม่เกิน 200 x 200 dp มิฉะนั้นระบบอาจใช้เวลานานเกินไปในการวาด

แม้ว่า Vector Drawable จะรองรับสีอย่างน้อย 1 สี แต่ในหลายกรณีการกำหนดสีไอคอนเป็นสีดำ (android:fillColor="#FF000000") ก็สมเหตุสมผล การใช้วิธีนี้จะช่วยให้คุณเพิ่มสีให้กับ Vector Drawable ที่วางไว้ในเลย์เอาต์ได้ และสีไอคอนจะเปลี่ยนเป็นสีของสี หากสีไอคอน ไม่ใช่สีดำ สีไอคอนอาจผสมกับสีการปรับสีแทน

โซลูชันความเข้ากันได้แบบย้อนหลังของ Vector Drawable

ตารางต่อไปนี้สรุปเทคนิค 2 อย่างที่คุณใช้เพื่อ ความเข้ากันได้แบบย้อนหลังได้

เทคนิค Drawables ใน APK องค์ประกอบ XML ของ VectorDrawable เวอร์ชัน แฟล็กบิลด์ โค้ดแอป
การสร้าง PNG เวกเตอร์และแรสเตอร์ รองรับบางส่วน

SVG: ปลั๊กอิน Android สำหรับ Gradle 1.5.0 ขึ้นไป

PSD: Android Studio 2.2 ขึ้นไป

 ค่าเริ่มต้น รองรับเทคนิคการเขียนโค้ดที่หลากหลาย
AndroidX 1.0 ขึ้นไป เวกเตอร์ การสนับสนุนอย่างเต็มรูปแบบ ปลั๊กอิน Android สำหรับ Gradle 3.2 ขึ้นไป ต้องระบุข้อความไลบรารีการสนับสนุน เทคนิคการเขียนโค้ดบางส่วนที่รองรับ

การใช้ Vector Drawable จะทำให้ APK มีขนาดเล็กลง แต่การโหลดเริ่มต้นของ Vector Drawable อาจใช้เวลานานกว่า

การสร้าง PNG

Android 5.0 (ระดับ API 21) ขึ้นไปรองรับ Vector Drawable หากแอปมีระดับ API ขั้นต่ำที่ต่ำกว่า Vector Asset Studio จะเพิ่มไฟล์ภาพวาดเวกเตอร์ลงในโปรเจ็กต์ และในเวลาบิลด์ Gradle จะสร้างภาพแรสเตอร์ PNG ที่ความละเอียดต่างๆ Gradle จะสร้างความหนาแน่น PNG ที่ระบุโดยพร็อพเพอร์ตี้ Domain Specific Language (DSL) generatedDensities ในไฟล์ build.gradle

สำหรับ Android 5.0 (API ระดับ 21) ขึ้นไป Vector Asset Studio รองรับองค์ประกอบทั้งหมดของ VectorDrawable Vector Asset Studio รองรับองค์ประกอบ XML ต่อไปนี้เพื่อความเข้ากันได้แบบย้อนหลังกับ Android 4.4 (API ระดับ 20) และต่ำกว่า

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

คุณสามารถเปลี่ยนโค้ด XML ที่ Vector Asset Studio สร้างขึ้นได้ แต่ไม่แนะนำให้ทำ การเปลี่ยนค่าในโค้ดไม่ควรทำให้เกิดปัญหาใดๆ ตราบใดที่ค่าเหล่านั้นถูกต้องและคงที่ หากต้องการเพิ่มองค์ประกอบ XML คุณต้องตรวจสอบว่าระบบรองรับองค์ประกอบเหล่านั้นตามระดับ API ขั้นต่ำของคุณ

AndroidX

เทคนิคนี้ต้องใช้ AndroidX 1.0 ขึ้นไปและปลั๊กอิน Android สำหรับ Gradle 3.2 ขึ้นไป และใช้เฉพาะ Vector Drawable คลาส VectorDrawableCompat ใน AndroidX ช่วยให้คุณรองรับ VectorDrawable ใน Android 2.1 (ระดับ API 7) ขึ้นไปได้

ก่อนใช้ Vector Asset Studio คุณต้องเพิ่มข้อความต่อไปนี้ลงในไฟล์ build.gradle

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

ดึงดูด

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

การเรียกใช้ Vector Asset Studio

วิธีเริ่มใช้ Vector Asset Studio

  1. เปิดโปรเจ็กต์แอป Android ใน Android Studio

  2. ในหน้าต่างโปรเจ็กต์ ให้เลือกมุมมอง Android

  3. คลิกขวาที่โฟลเดอร์ res แล้วเลือกใหม่ > Vector Asset

    มุมมองและโฟลเดอร์โปรเจ็กต์อื่นๆ บางรายการก็มีรายการเมนูนี้ด้วย

    Vector Asset Studio จะปรากฏขึ้น

    รูปที่ 1 Vector Asset Studio

  4. หากกล่องโต้ตอบต้องใช้ปลั๊กอิน Android สำหรับ Gradle เวอร์ชันใหม่กว่าปรากฏขึ้นแทน ให้แก้ไข เวอร์ชัน Gradle ดังนี้

    1. เลือกไฟล์ > โครงสร้างโปรเจ็กต์

    2. ในกล่องโต้ตอบโครงสร้างโปรเจ็กต์ ให้เลือกโปรเจ็กต์

    3. ในช่องเวอร์ชันปลั๊กอิน Android ให้เปลี่ยนปลั๊กอิน Android สำหรับ Gradle เป็นเวอร์ชัน 1.5.0 ขึ้นไป แล้วคลิกตกลง

      Gradle จะซิงค์โปรเจ็กต์

    4. ในมุมมอง Android ของหน้าต่างโปรเจ็กต์ ให้คลิกขวาที่โฟลเดอร์ res แล้วเลือก ใหม่ > ชิ้นงานเวกเตอร์

      Vector Asset Studio จะปรากฏขึ้น

  5. ดำเนินการต่อด้วยการนำเข้ากราฟิกแบบเวกเตอร์

การนำเข้าภาพกราฟิกเวกเตอร์

Vector Asset Studio ช่วยให้คุณนําเข้าไฟล์กราฟิกแบบเวกเตอร์ไปยังโปรเจ็กต์แอป ได้ ทำตามขั้นตอนใดขั้นตอนหนึ่งต่อไปนี้

การเพิ่มไอคอนจากดีไซน์ Material

หลังจากเปิด Vector Asset Studio แล้ว คุณจะเพิ่มไอคอนจากดีไซน์ Material ได้โดยทำดังนี้

  1. ใน Vector Asset Studio ให้เลือกภาพคลิปอาร์ต

  2. ในช่องภาพคลิปอาร์ต ให้คลิกปุ่ม

  3. กล่องโต้ตอบเลือกไอคอนจะปรากฏขึ้น คุณสามารถกรองไอคอนที่มองเห็นได้ โดยเลือกหมวดหมู่ไอคอนจากเมนูหรือพิมพ์ใน ช่องค้นหาตามที่แสดงในรูปที่ 2

    รูปที่ 2 การกรองไอคอน Material ใน Vector Asset Studio

    เลือกไอคอนจากดีไซน์ Material แล้วคลิกตกลง ไอคอนจะปรากฏใน ตัวอย่าง Vector Drawable

  4. เปลี่ยนชื่อทรัพยากร ขนาด ความทึบ และการตั้งค่าการมิเรอร์จากขวาไปซ้าย (RTL) ได้ (ไม่บังคับ) โดยทำดังนี้

    • ชื่อ - พิมพ์ชื่อใหม่หากไม่ต้องการใช้ชื่อเริ่มต้น Vector Asset Studio จะสร้างชื่อที่ไม่ซ้ำกันโดยอัตโนมัติ (เพิ่มตัวเลข ต่อท้ายชื่อ) หากชื่อทรัพยากรนั้นมีอยู่ในโปรเจ็กต์ อยู่แล้ว ชื่อมีได้เฉพาะอักขระตัวพิมพ์เล็ก ขีดล่าง และตัวเลขเท่านั้น

    • ลบล้าง - เลือกตัวเลือกนี้หากต้องการปรับขนาดรูปภาพ เมื่อพิมพ์ขนาดใหม่ การเปลี่ยนแปลงจะปรากฏในพื้นที่แสดงตัวอย่าง

      ค่าเริ่มต้นคือ 24 x 24 dp ซึ่งกำหนดไว้ในข้อกำหนดของดีไซน์ Material ยกเลิกการเลือกช่องทำเครื่องหมาย เพื่อกลับไปใช้ค่าเริ่มต้น

    • ความทึบแสง - ใช้แถบเลื่อนเพื่อปรับความทึบแสงของรูปภาพ การเปลี่ยนแปลงจะปรากฏในพื้นที่แสดงตัวอย่าง

    • เปิดใช้การมิเรอร์อัตโนมัติสำหรับเลย์เอาต์ RTL - เลือกตัวเลือกนี้หากคุณต้องการให้รูปภาพมิเรอร์แสดงเมื่อเลย์เอาต์เป็นจากขวาไปซ้าย แทนที่จะเป็นจากซ้ายไปขวา เช่น บางภาษาจะอ่านจากขวาไปซ้าย หากคุณมีไอคอนลูกศร คุณอาจต้องการแสดงรูปภาพที่กลับด้านในกรณีนี้ โปรดทราบว่าหากคุณกำลังทำงานกับโปรเจ็กต์รุ่นเก่า คุณอาจต้องเพิ่ม android:supportsRtl="true" ลงในไฟล์ Manifest ของแอปด้วย การมิเรอร์อัตโนมัติใช้ได้ใน Android 5.0 (ระดับ API 21) ขึ้นไปและ AndroidX

  5. คลิกถัดไป

  6. เปลี่ยนไดเรกทอรีโมดูลและไดเรกทอรีทรัพยากรหรือไม่ก็ได้

    • ไดเรกทอรี Res - เลือกชุดซอร์สของทรัพยากรที่คุณต้องการ เพิ่ม Vector Drawable: src/main/res, src/debug/res, src/release/res หรือชุดซอร์สที่ผู้ใช้กำหนด ชุดซอร์สหลัก ใช้กับตัวแปรบิลด์ทั้งหมด รวมถึงตัวแปรบิลด์สำหรับดีบักและรีลีส ชุดซอร์สสำหรับดีบักและชุดซอร์สสำหรับรุ่นจะลบล้างชุดซอร์สหลักและมีผลกับบิลด์เวอร์ชันใดเวอร์ชันหนึ่ง ชุดซอร์สการแก้ไขข้อบกพร่องมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น หากต้องการ กำหนดชุดซอร์สใหม่ ให้เลือกไฟล์ > โครงสร้างโปรเจ็กต์ > แอป > ประเภทบิลด์ เช่น คุณอาจกำหนดชุดแหล่งข้อมูลเบต้า และสร้างไอคอนเวอร์ชันที่มีข้อความ "เบต้า" ที่ มุมขวาล่าง ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่าตัวแปรบิลด์

    ส่วนไดเรกทอรีเอาต์พุตจะแสดง Vector Drawable และ ไดเรกทอรีที่จะปรากฏ

  7. คลิกเสร็จสิ้น

    Vector Asset Studio จะเพิ่มไฟล์ XML ที่กำหนด Vector Drawable ลงในโปรเจ็กต์ในโฟลเดอร์ app/src/main/res/drawable/ จากมุมมอง Android ของหน้าต่างโปรเจ็กต์ คุณจะดูไฟล์ XML เวกเตอร์ที่สร้างขึ้นได้ในโฟลเดอร์ drawable

  8. สร้างโปรเจ็กต์

    หากระดับ API ขั้นต่ำคือ Android 4.4 (API ระดับ 20) และต่ำกว่า และคุณไม่ได้เปิดใช้เทคนิค AndroidX ทาง Vector Asset Studio จะสร้างไฟล์ PNG จากมุมมองไฟล์โปรเจ็กต์ ของหน้าต่างโปรเจ็กต์ คุณจะดูไฟล์ PNG และ XML ที่สร้างขึ้นได้ในโฟลเดอร์ app/build/generated/res/pngs/debug/

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

การนำเข้าไฟล์ SVG หรือ PSD

หลังจากเปิด Vector Asset Studio แล้ว คุณจะนําเข้าไฟล์ SVG หรือ PSD ได้โดยทําดังนี้

  1. ใน Vector Asset Studio ให้เลือกไฟล์ในเครื่อง

    ไฟล์ต้องอยู่ในไดรฟ์ภายใน หากไฟล์อยู่ในเครือข่าย คุณต้องดาวน์โหลดไฟล์ไปยังไดรฟ์ในเครื่องก่อน

  2. ระบุไฟล์รูปภาพโดยคลิก …

    รูปภาพจะปรากฏในตัวอย่าง Vector Drawable

    หากไฟล์ SVG หรือ PSD มีฟีเจอร์ที่ไม่รองรับ ข้อผิดพลาดจะปรากฏที่ด้านล่างของ Vector Asset Studio ดังที่แสดงในรูปที่ 3

    รูปที่ 3 Vector Asset Studio แสดงข้อผิดพลาดบางอย่าง

    หากเห็นข้อผิดพลาด คุณต้องตรวจสอบว่า VectorDrawable ที่นำเข้า แสดงผลอย่างถูกต้อง เลื่อนดูรายการเพื่อดูข้อผิดพลาด

    ดูรายการองค์ประกอบที่รองรับได้ที่ โซลูชันความเข้ากันได้แบบย้อนหลังของ Vector Drawable ดูข้อมูลเพิ่มเติม เกี่ยวกับไฟล์ PSD ที่อนุญาตได้ที่การรองรับและข้อจำกัดสำหรับไฟล์ PSD

  3. เปลี่ยนชื่อทรัพยากร ขนาด ความทึบ และการตั้งค่าการมิเรอร์จากขวาไปซ้าย (RTL) ได้ (ไม่บังคับ) โดยทำดังนี้

    • ชื่อ - พิมพ์ชื่อใหม่หากไม่ต้องการใช้ชื่อเริ่มต้น Vector Asset Studio จะสร้างชื่อที่ไม่ซ้ำกันโดยอัตโนมัติ (เพิ่มตัวเลข ต่อท้ายชื่อ) หากชื่อทรัพยากรนั้นมีอยู่ในโปรเจ็กต์ อยู่แล้ว ชื่อมีได้เฉพาะอักขระตัวพิมพ์เล็ก ขีดล่าง และตัวเลขเท่านั้น

    • ลบล้าง - เลือกตัวเลือกนี้หากต้องการปรับขนาดของรูปภาพ หลังจากเลือกแล้ว ขนาดจะเปลี่ยนเป็นขนาดของรูปภาพ เอง ทุกครั้งที่คุณเปลี่ยนขนาด การเปลี่ยนแปลงจะปรากฏในพื้นที่แสดงตัวอย่าง ค่าเริ่มต้นคือ 24 x 24 dp ซึ่งกำหนดไว้ในข้อกำหนดของดีไซน์ Material

    • ความทึบแสง - ใช้แถบเลื่อนเพื่อปรับความทึบแสงของรูปภาพ การเปลี่ยนแปลงจะปรากฏในพื้นที่แสดงตัวอย่าง

    • เปิดใช้การมิเรอร์อัตโนมัติสำหรับเลย์เอาต์ RTL - เลือกตัวเลือกนี้หากคุณต้องการให้รูปภาพมิเรอร์แสดงเมื่อเลย์เอาต์เป็นจากขวาไปซ้าย แทนที่จะเป็นจากซ้ายไปขวา เช่น บางภาษาจะอ่านจากขวาไปซ้าย หากคุณมีไอคอนลูกศร คุณอาจต้องการแสดงรูปภาพที่กลับด้านในกรณีนี้ โปรดทราบว่าหากคุณกำลังทำงานกับโปรเจ็กต์ที่เก่ากว่า คุณอาจต้องเพิ่ม android:supportsRtl="true" ลงในไฟล์ Manifest ของแอป Android 5.0 (ระดับ API 21) ขึ้นไปและ AndroidX รองรับการมิเรอร์อัตโนมัติ

  4. คลิกถัดไป

  5. เปลี่ยนไดเรกทอรีทรัพยากร (ไม่บังคับ)

    • Res Directory - เลือกชุดซอร์สของทรัพยากรที่คุณต้องการเพิ่ม Vector Drawable: src/main/res, src/debug/res, src/release/res หรือชุดซอร์สที่ผู้ใช้กำหนด ชุดซอร์สหลักจะมีผลกับตัวแปรบิลด์ทั้งหมด รวมถึงตัวแปรบิลด์สำหรับดีบักและรีลีส ชุดซอร์สแก้ไขข้อบกพร่องและชุดซอร์สเผยแพร่จะลบล้างชุดซอร์สหลักและใช้กับบิลด์เวอร์ชันใดเวอร์ชันหนึ่ง ชุดซอร์สสำหรับแก้ไขข้อบกพร่องมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น หากต้องการกำหนดชุดซอร์สใหม่ ให้เลือกไฟล์ > โครงสร้างโปรเจ็กต์ > app > ประเภทบิลด์ เช่น คุณอาจกำหนดชุดซอร์สเวอร์ชันเบต้าและสร้างเวอร์ชันของไอคอนที่มีข้อความ "เบต้า" ที่มุมขวาล่าง ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่าตัวแปรบิลด์

    ส่วนไดเรกทอรีเอาต์พุตจะแสดง Vector Drawable และ ไดเรกทอรีที่จะปรากฏ

  6. คลิกเสร็จสิ้น

    Vector Asset Studio จะเพิ่มไฟล์ XML ที่กำหนด Vector Drawable ลงในโปรเจ็กต์ในโฟลเดอร์ app/src/main/res/drawable/ จากมุมมอง Android ของหน้าต่างโปรเจ็กต์ คุณจะดูไฟล์ XML เวกเตอร์ที่สร้างขึ้นได้ในโฟลเดอร์ drawable

  7. สร้างโปรเจ็กต์

    หากระดับ API ขั้นต่ำคือ Android 4.4 (API ระดับ 20) และต่ำกว่า และคุณไม่ได้เปิดใช้เทคนิค AndroidX ทาง Vector Asset Studio จะสร้างไฟล์ PNG จากมุมมองไฟล์โปรเจ็กต์ ของหน้าต่างโปรเจ็กต์ คุณจะดูไฟล์ PNG และ XML ที่สร้างขึ้นได้ในโฟลเดอร์ app/build/generated/res/pngs/debug/

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

การอ้างอิงเนื้อหาเวกเตอร์ใน Jetpack Compose

หลังจากใช้ Vector Asset Studio เพื่อเพิ่มชิ้นงานลงในres/drawable โฟลเดอร์แล้ว คุณจะอ้างอิงชิ้นงานนั้นในโค้ดได้

ใน Jetpack Compose วิธีที่พบบ่อยที่สุดในการแสดงเวกเตอร์คือการใช้ Composable Icon หรือ Image

Composable ของ Icon เป็นวิธีมาตรฐานในการแสดงชิ้นงานขนาดเล็กแบบสีเดียว โดยมีรองรับหลักการออกแบบ Material Design ในตัว เช่น การใช้การปรับสีแบบไดนามิกตามธีม Material 3 และการช่วยเหลือพิเศษอัตโนมัติ ผ่านคำอธิบายเนื้อหา

ใช้ painterResource API เพื่อระบุชิ้นงานเวกเตอร์ XML ให้กับ Composable ดังนี้

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

สำหรับเวกเตอร์ที่ซับซ้อนและมีหลายสี ให้ใช้ฟังก์ชันที่ประกอบกันได้ Image ดังนี้

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

สำหรับสถานการณ์ที่ซับซ้อนอื่นๆ เช่น การปรับแต่งรูปภาพหรือการเพิ่มประสิทธิภาพ โปรดดูการทำงานกับรูปภาพ หากต้องการสร้างภาพเคลื่อนไหวให้กับเวกเตอร์ โปรดดูรูปภาพเวกเตอร์เคลื่อนไหวใน Compose

การแก้ไขโค้ด XML ที่สร้างโดย Vector Asset Studio

คุณแก้ไขโค้ด XML ของ Vector Drawable ได้ แต่จะแก้ไข PNG และโค้ด XML ที่เกี่ยวข้องซึ่งสร้างขึ้นในเวลาบิลด์ไม่ได้ แต่เราไม่แนะนำให้ทำเช่นนั้น

เมื่อใช้เทคนิคการสร้าง PNG แล้ว Vector Asset Studio จะตรวจสอบว่า Vector Drawable และ PNG ตรงกัน และไฟล์ Manifest มีโค้ดที่เหมาะสม หากเพิ่มโค้ดที่ไม่รองรับใน Android 4.4 (ระดับ API 20) และต่ำกว่า รูปภาพเวกเตอร์และ PNG อาจแตกต่างกัน นอกจากนี้ คุณยังต้องตรวจสอบว่าไฟล์ Manifest มีโค้ดที่รองรับการเปลี่ยนแปลงด้วย

หากต้องการแก้ไขไฟล์ XML เวกเตอร์เมื่อไม่ได้ใช้เทคนิค AndroidX ให้ทำดังนี้

  1. ในหน้าต่าง Project ให้ดับเบิลคลิกไฟล์ XML แบบเวกเตอร์ที่สร้างขึ้นในโฟลเดอร์ drawable

    ไฟล์ XML จะปรากฏในเครื่องมือแก้ไขและหน้าต่างแสดงตัวอย่าง

    รูปที่ 4 ไฟล์ XML แบบเวกเตอร์ที่แสดงในตัวแก้ไขโค้ดและหน้าต่างแสดงตัวอย่าง

  2. แก้ไขโค้ด XML ตามสิ่งที่ระดับ API ขั้นต่ำรองรับ

    • Android 5.0 (ระดับ API 21) ขึ้นไป - Vector Asset Studio รองรับองค์ประกอบ Drawable และ VectorDrawable ทั้งหมด คุณเพิ่มองค์ประกอบ XML และเปลี่ยนค่าได้ สำหรับ Jetpack Compose คุณสามารถโหลด Vector Drawable ลงใน ImageVector เพื่อปรับแต่งเพิ่มเติมได้

    • Android 4.4 (ระดับ API 20) และต่ำกว่า - Vector Asset Studio รองรับองค์ประกอบ Drawable ทั้งหมดและชุดย่อยขององค์ประกอบ VectorDrawable ดูรายการได้ที่โซลูชันความเข้ากันได้แบบย้อนหลังของ Vector Drawable คุณสามารถเปลี่ยนค่าในโค้ดที่สร้างขึ้นและเพิ่มองค์ประกอบ XML ที่รองรับได้

  3. สร้างโปรเจ็กต์และตรวจสอบว่า Vector Drawable และรูปภาพแรสเตอร์ที่เกี่ยวข้องมีลักษณะเหมือนกัน

    โปรดทราบว่า PNG ที่สร้างขึ้นอาจแสดงแตกต่างกันในหน้าต่างแสดงตัวอย่างกับในแอป เนื่องจากเครื่องมือการแสดงผลที่แตกต่างกันและการเปลี่ยนแปลงที่เกิดขึ้นกับ Vector Drawable ก่อนการบิลด์ หากคุณเพิ่มโค้ดลงในไฟล์ XML เวกเตอร์ที่สร้างโดย Vector Asset Studio ฟีเจอร์ที่ไม่รองรับใน Android 4.4 (ระดับ API 20) และต่ำกว่าจะไม่ปรากฏในไฟล์ PNG ที่สร้างขึ้น ดังนั้น เมื่อเพิ่มโค้ด คุณควรตรวจสอบเสมอว่า PNG ที่สร้างขึ้นตรงกับ VectorDrawable โดยดับเบิลคลิก PNG ในมุมมองไฟล์โปรเจ็กต์ของหน้าต่างโปรเจ็กต์ ขอบซ้ายของเครื่องมือแก้ไขโค้ดจะแสดงรูปภาพ PNG ด้วยเมื่อโค้ดอ้างอิงถึง Drawable ดังที่แสดงในรูปที่ 5

    รูปที่ 5 รูปภาพ PNG ที่แสดงในขอบซ้ายของเครื่องมือแก้ไขโค้ด

การลบ Vector Drawable ออกจากโปรเจ็กต์

วิธีนำ Vector Drawable ออกจากโปรเจ็กต์

  1. ในหน้าต่างโปรเจ็กต์ ให้ลบไฟล์ XML แบบเวกเตอร์ที่สร้างขึ้นโดยเลือก ไฟล์แล้วกดปุ่มลบ (หรือเลือกแก้ไข > ลบ)

    กล่องโต้ตอบลบอย่างปลอดภัยจะปรากฏขึ้น

  2. เลือกตัวเลือกเพื่อค้นหาตำแหน่งที่ใช้ไฟล์ในโปรเจ็กต์ (ไม่บังคับ) แล้วคลิกตกลง

    Android Studio จะลบไฟล์ออกจากโปรเจ็กต์และไดรฟ์ อย่างไรก็ตาม หาก คุณเลือกค้นหาสถานที่ในโปรเจ็กต์ที่มีการใช้ไฟล์และ พบการใช้งานบางอย่าง คุณจะดูการใช้งานเหล่านั้นและตัดสินใจได้ว่าจะลบ ไฟล์หรือไม่

  3. เลือกสร้าง > ล้างข้อมูลโปรเจ็กต์

    ระบบจะนำไฟล์ PNG และ XML ที่สร้างขึ้นโดยอัตโนมัติซึ่งสอดคล้องกับ Vector Drawable ที่ลบออกจากโปรเจ็กต์และไดรฟ์

การส่งแอปที่มี Vector Drawable

หากคุณใช้เทคนิค AndroidX หรือระดับ API ขั้นต่ำเป็น Android 5.0 (API ระดับ 21) ขึ้นไป APK จะมีภาพวาดเวกเตอร์ที่คุณเพิ่มด้วย Vector Asset Studio APK เหล่านี้จะมีขนาดเล็กกว่าในกรณีที่แปลงรูปภาพเวกเตอร์เป็น PNG

เมื่อระดับ API ขั้นต่ำของคุณมี Android 4.4 (API ระดับ 20) หรือต่ำกว่า และคุณมี Vector Drawable และภาพแรสเตอร์ที่เกี่ยวข้องในโปรเจ็กต์ คุณจะมี 2 ตัวเลือกในการส่งไฟล์ APK ดังนี้

  • สร้าง APK รายการเดียวที่มีทั้งภาพวาดแบบเวกเตอร์และ การแสดงผลแบบแรสเตอร์ที่สอดคล้องกัน โซลูชันนี้ติดตั้งใช้งานได้ง่ายที่สุด
  • สร้าง APK แยกต่างหากสำหรับ API ระดับต่างๆ เมื่อคุณไม่รวมภาพแรสเตอร์ที่เกี่ยวข้องใน APK สำหรับ Android 5.0 (API ระดับ 21) ขึ้นไป APK จะมีขนาดเล็กลงมาก ดูข้อมูลเพิ่มเติมได้ที่การรองรับ APK ต่างๆ

การรองรับและข้อจำกัดสำหรับไฟล์ PSD

Vector Asset Studio ไม่รองรับฟีเจอร์ไฟล์ PSD บางรายการ รายการต่อไปนี้ สรุปลักษณะของ PSD ที่รองรับและไม่รองรับ รวมถึงรายละเอียดการแปลงบางอย่าง

เอกสาร

รองรับ

  • โหมดสี PSD ของบิตแมป, ระดับสีเทา, ดัชนี, RGB, Lab หรือ CMYK
  • ความลึกของสี 8, 16 หรือ 32 บิต

รายละเอียด Conversion

  • ขนาดเอกสาร PSD จะกลายเป็น Vector Drawable และขนาดวิวพอร์ต

ไม่รองรับ

  • โหมดสี PSD แบบดูโอโทนหรือหลายช่องสัญญาณ

รูปทรง

รองรับ

  • มาสก์การตัด หากฐานการตัดเป็นรูปร่างอื่น
  • การดำเนินการกับรูปร่าง รวมถึงการผสาน/เพิ่ม การตัดกัน การลบ และการยกเว้น

ไม่รองรับ

  • กฎการเติมแบบคู่-คี่ที่ใช้โดยรูปร่างใน Photoshop ใน Android 6.0 (ระดับ API 23) และต่ำกว่า Vector Drawable รองรับเฉพาะกฎการเติมที่ไม่ใช่ศูนย์ ในรูปทรงที่ตัดกันเอง ข้อจำกัดนี้อาจทำให้การแสดงผลแตกต่างกัน ระหว่าง PSD กับ Vector Drawable ที่ได้ หากต้องการแก้ไขปัญหานี้ ให้เพิ่ม android:fillType="evenOdd" ในรูปร่างใน Vector Drawable เช่น

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

  <path
      android:fillAlpha="1.0"
      android:fillColor="#000000"
      android:fillType="evenOdd"
      android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
</vector>

เส้นขีดและการเติม

รองรับ

  • เส้นขีด รวมถึงสี ความทึบแสง ความกว้าง การเชื่อมต่อ ปลายเส้น เส้นประ และการจัดแนว
  • การเติมสีทึบและเส้นขีด
  • สีเส้นขอบและสีเติมที่ระบุเป็น RGB, Lab หรือ CMYK

รายละเอียด Conversion

  • หากเส้นประถูกตัดโดยใช้ฐานการตัด หรือใช้การจัดแนวที่แตกต่างจากกึ่งกลาง Vector Asset Studio จะแปลงเป็นรูปร่างเติมใน Vector Drawable

ไม่รองรับ

  • การเติมสีและเส้นขีดที่ไม่ใช่สีทึบ เช่น การไล่ระดับสี

ความทึบแสง

รองรับ

  • เลเยอร์รูปร่างที่มีความทึบแสงเป็น 0

รายละเอียด Conversion

  • Vector Asset Studio จะคูณความทึบแสงของการเติมกับความทึบแสงของเลเยอร์เพื่อคำนวณอัลฟ่าของการเติม
  • เครื่องมือจะคูณความทึบของฐานการตัด (หากมีฐานการตัด) กับอัลฟ่าการเติมเพื่อคำนวณอัลฟ่าการเติมสุดท้าย
  • เครื่องมือจะคูณความทึบแสงของเส้นกับความทึบแสงของเลเยอร์เพื่อคำนวณ อัลฟ่าของเส้น
  • เครื่องมือจะคูณความทึบของฐานการมาสก์ (หากมีฐานการมาสก์) ด้วยอัลฟ่าของเส้นขอบเพื่อคำนวณอัลฟ่าของเส้นขอบสุดท้าย

เลเยอร์

รองรับ

  • เลเยอร์รูปร่างที่มองเห็นได้

รายละเอียด Conversion

  • Vector Asset Studio จะเก็บชื่อเลเยอร์ในไฟล์ Vector Drawable

ไม่รองรับ

  • เอฟเฟกต์เลเยอร์
  • เลเยอร์การปรับแต่งและเลเยอร์ข้อความ
  • โหมดการผสม (ไม่สนใจ)

การรองรับและข้อจำกัดสำหรับไฟล์ SVG

Vector Asset Studio ไม่รองรับฟีเจอร์ไฟล์ SVG ทั้งหมด ส่วนต่อไปนี้ จะสรุปฟีเจอร์ที่รองรับและไม่รองรับเมื่อเครื่องมือแปลงไฟล์ SVG เป็น VectorDrawable พร้อมรายละเอียดการแปลงเพิ่มเติม

ฟีเจอร์ที่รองรับ

VectorDrawable รองรับฟีเจอร์ทั้งหมดจาก Tiny SVG 1.2 ยกเว้น text

รูปทรง

VectorDrawable รองรับเส้นทาง SVG

เครื่องมือจะแปลงรูปร่างพื้นฐาน เช่น วงกลม สี่เหลี่ยมจัตุรัส และรูปหลายเหลี่ยม เป็นเส้นทาง

การแปลงโฉม

เครื่องมือนี้รองรับเมทริกซ์การแปลงและใช้เมทริกซ์ดังกล่าวกับเส้นทางย่อยโดยตรง

กลุ่ม

เครื่องมือนี้รองรับองค์ประกอบกลุ่มสำหรับการแปล การปรับขนาด และการหมุน กลุ่ม ไม่รองรับพร็อพเพอร์ตี้ความทึบแสง

นอกจากนี้ เครื่องมือยังใช้การจัดรูปแบบกลุ่มหรือความทึบแสงกับเส้นทางย่อยด้วย

การเติมและเส้นขอบ

คุณเติมสีและกำหนดเส้นให้กับเส้นทางได้โดยใช้สีทึบหรือการไล่ระดับสี (เชิงเส้น เชิงรัศมี หรือเชิงมุม) รองรับเฉพาะเส้นที่อยู่ตรงกลาง ไม่รองรับโหมดการผสม ไม่รองรับเส้นทางประ

หน้ากาก

เครื่องมือนี้รองรับ Clipping Mask 1 รายการต่อกลุ่ม

ฟีเจอร์ที่โปรแกรมนำเข้า SVG ไม่รองรับ

ฟีเจอร์ที่ไม่ได้แสดงอยู่ในส่วนฟีเจอร์ที่รองรับก่อนหน้านี้จะ ไม่รองรับ ฟีเจอร์ที่ไม่รองรับที่สำคัญมีดังนี้

  • เอฟเฟกต์ฟิลเตอร์: ระบบไม่รองรับเอฟเฟกต์ เช่น เงาตกกระทบ เบลอ และเมทริกซ์สี
  • ข้อความ: ขอแนะนำให้แปลงข้อความเป็นรูปร่างโดยใช้เครื่องมืออื่นๆ
  • การเติมพื้นด้วยลวดลาย

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับกราฟิกแบบเวกเตอร์ได้ที่แหล่งข้อมูลเพิ่มเติมต่อไปนี้

เอกสารประกอบ

ดูเนื้อหา