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

แนวคิดและการใช้งาน Jetpack Compose

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

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

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

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

Vector Asset Studio จะสร้างรูปภาพแรสเตอร์ของ Vector Drawable เพื่อความเข้ากันได้แบบย้อนหลัง ระบบจะรวม Vector Drawable และ Raster Drawable ไว้ด้วยกันใน APK คุณสามารถอ้างอิง Vector Drawable เป็น Drawable ในโค้ด Java หรือ @drawable ในโค้ด 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 ดังนี้

ดึงดูด

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

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

นอกจากนี้ คุณยังต้องใช้เทคนิคการเขียนโค้ด AndroidX เพื่อความเข้ากันได้แบบย้อนหลัง เช่น การใช้แอตทริบิวต์ app:srcCompat แทนแอตทริบิวต์ android:src สำหรับ Vector Drawable ดูข้อมูลเพิ่มเติมได้ที่ AndroidX

การเพิ่ม Vector Drawable ลงในเลย์เอาต์

ในไฟล์เลย์เอาต์ คุณสามารถตั้งค่าวิดเจ็ตที่เกี่ยวข้องกับไอคอน เช่น ImageButton, ImageView และอื่นๆ ให้ชี้ไปยัง Vector Drawable ได้ ตัวอย่างเช่น เลย์เอาต์ต่อไปนี้แสดง Vector Drawable ที่แสดงบนปุ่ม

รูปที่ 1 Vector Drawable ที่แสดงบนปุ่มในเลย์เอาต์

วิธีแสดง Vector Drawable บนวิดเจ็ตดังที่แสดงในรูป

  1. เปิดโปรเจ็กต์และนำเข้า Vector Drawable

    ตัวอย่างนี้ใช้โปรเจ็กต์โทรศัพท์/แท็บเล็ตที่สร้างด้วยตัวช่วยสร้างโปรเจ็กต์ใหม่

  2. ในมุมมอง Android ของหน้าต่าง Project ให้ดับเบิลคลิกไฟล์ XML ของเลย์เอาต์ เช่น content_main.xml

  3. คลิกแท็บดีไซน์ เพื่อแสดงเครื่องมือสร้างเลย์เอาต์

  4. ลากวิดเจ็ต ImageButton จากหน้าต่าง Palette ไปยังเครื่องมือสร้างเลย์เอาต์

  5. ในกล่องโต้ตอบ Resources ให้เลือก Drawable ในบานหน้าต่างด้านซ้าย แล้วเลือก Vector Drawable ที่คุณนำเข้า คลิกตกลง

    Vector Drawable จะปรากฏบน ImageButton ในเลย์เอาต์

  6. หากต้องการเปลี่ยนสีของรูปภาพเป็นสีเฉพาะจุดที่กำหนดไว้ในธีม ให้ค้นหาพร็อพเพอร์ตี้ tint ในหน้าต่าง Properties แล้วคลิก …

  7. ในกล่องโต้ตอบ Resources ให้เลือก Color ในบานหน้าต่างด้านซ้าย แล้วเลือก colorAccent คลิกตกลง

    สีของรูปภาพจะเปลี่ยนเป็นสีเฉพาะจุดในเลย์เอาต์

หากโปรเจ็กต์ใช้ AndroidX โค้ด ImageButton ควรมีลักษณะคล้ายกับโค้ดต่อไปนี้

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

หากโปรเจ็กต์ไม่ได้ใช้ AndroidX โค้ด Vector Drawable จะ เป็น android:src="@drawable/ic_build_black_24dp" แทน

การอ้างอิง Vector Drawable ในโค้ด

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

  • ในกรณีส่วนใหญ่ คุณสามารถอ้างอิง Vector Drawable เป็น @drawable ในโค้ด XML หรือ Drawable ในโค้ด Java

    ตัวอย่างเช่น โค้ด XML ของเลย์เอาต์ต่อไปนี้จะใช้รูปภาพกับมุมมอง

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:src="@drawable/myimage" />

    โค้ดต่อไปนี้จะดึงข้อมูลรูปภาพเป็น Drawable

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    เมธอด getResources() อยู่ในคลาส Context ซึ่งใช้กับออบเจ็กต์ UI เช่น กิจกรรม, Fragment, เลย์เอาต์, มุมมอง และอื่นๆ

  • หากแอปใช้ AndroidX (แม้ว่าคุณจะไม่มีคำสั่ง vectorDrawables.useSupportLibrary = true ในไฟล์ build.gradle ก็ตาม) คุณยังอ้างอิง Vector Drawable ด้วยคำสั่ง app:srcCompat ได้ด้วย เช่น

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  app:srcCompat="@drawable/myimage" />

  • บางครั้งคุณอาจต้องแคสต์ประเภททรัพยากรที่ถอนออกได้ เป็นคลาสที่แน่นอน เช่น เมื่อต้องการใช้ฟีเจอร์เฉพาะของ VectorDrawable คลาส คุณสามารถทำได้โดยใช้โค้ดต่อไปนี้

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    Java

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

คุณจะเข้าถึงทรัพยากร Vector Drawable ได้จากเธรดหลักเท่านั้น

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