จัดการทรัพยากร UI ของแอปด้วย Resource Manager

Resource Manager เป็นหน้าต่างเครื่องมือสำหรับนำเข้า สร้าง จัดการ และใช้ทรัพยากรในแอป หากต้องการเปิดหน้าต่างเครื่องมือ ให้เลือกดู > หน้าต่างเครื่องมือ > Resource Manager จากเมนู หรือเลือก Resource Manager ในแถบด้านข้างทางซ้าย

รูปที่ 1 หน้าต่างเครื่องมือ Resource Manager

1. คลิก เพิ่ม เพื่อเพิ่มทรัพยากรใหม่ลงในโปรเจ็กต์ คุณสามารถเพิ่มชิ้นงานรูปภาพ ชิ้นงานเวกเตอร์ ชิ้นงาน แบบอักษร หรือไฟล์และค่าทรัพยากร หรือจะ นำเข้า Drawable ลงในโปรเจ็กต์ก็ได้
2. เลือกโมดูลเพื่อดูทรัพยากรที่เฉพาะเจาะจงกับโมดูลนั้น
3. ค้นหาทรัพยากรในโมดูลทั้งหมดในโปรเจ็กต์โดยใช้แถบค้นหา
4. แสดงทรัพยากรตาม ประเภทใน Resource Manager ใช้แท็บเหล่านี้เพื่อสลับระหว่างประเภททรัพยากร คลิกไอคอนล้น เพื่อแสดงประเภททรัพยากรเพิ่มเติม
5. กรองทรัพยากรที่แสดงจากโมดูลที่ขึ้นอยู่กับโมดูลในเครื่อง ไลบรารีภายนอก และเฟรมเวิร์ก Android โดยใช้ปุ่มตัวกรอง นอกจากนี้ คุณยังใช้ตัวกรองเพื่อแสดงแอตทริบิวต์ของธีมได้ด้วย
6. ดูตัวอย่างทรัพยากรในพื้นที่เนื้อหาหลัก คลิกขวาทรัพยากรเพื่อดูเมนูบริบทที่คุณสามารถเปลี่ยนชื่อทรัพยากรและค้นหาในแอปว่ามีการใช้ทรัพยากรที่ใดบ้าง
7. คลิกปุ่มเหล่านี้เพื่อดูทรัพยากรเป็นไทล์หรือรายการ
8. คลิกปุ่มเหล่านี้เพื่อเปลี่ยนขนาดตัวอย่างของทรัพยากร

นอกจากฟีเจอร์เหล่านี้แล้ว Resource Manager ยังมีวิธีนำเข้า Drawable หลายรายการพร้อมกันลงในโปรเจ็กต์ด้วย หากต้องการนำเข้าหลายรายการพร้อมกัน คุณสามารถทำอย่างใดอย่างหนึ่งต่อไปนี้

• ลากไฟล์รูปภาพ ซึ่งรวมถึงไฟล์ SVG ไปยัง Resource Manager โดยตรง
• ใช้วิซาร์ดนำเข้า Drawable

ดูข้อมูลเพิ่มเติมได้ที่ส่วนนำเข้า Drawable ลงในโปรเจ็กต์

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

รูปที่ 2 Resource Manager แสดงเวอร์ชันของทรัพยากรรูปภาพสำหรับความหนาแน่นของหน้าจอที่แตกต่างกัน

นำเข้า Drawable ลงในโปรเจ็กต์

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

หากต้องการนำเข้าทรัพยากรรูปภาพลงในโปรเจ็กต์ ให้ทำดังนี้

1. ลากรูปภาพไปยังหน้าต่าง Resource Manager ใน Android Studio โดยตรง

   • หรือคุณจะทำดังนี้ก็ได้
     1. คลิกไอคอนบวก (+)
     2. เลือกนำเข้า Drawable ดังที่แสดงในรูปที่ 3
     3. เลือกไฟล์และโฟลเดอร์ที่ต้องการนำเข้า

   

   รูปที่ 3 เลือกนำเข้า Drawable จากเมนู

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

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

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

   ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวระบุทรัพยากรได้ที่หัวข้อ จัดหาทรัพยากรทางเลือก

   

   รูปที่ 4 กล่องโต้ตอบนำเข้า Drawable

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

3. หน้าจอถัดไปจะแสดงสรุปทรัพยากรที่คุณกำลังนำเข้า เมื่อพร้อมนำเข้าแล้ว ให้คลิกนำเข้า

ในหน้าต่าง Resource Manager ทรัพยากรของคุณพร้อมให้คุณใช้ในโปรเจ็กต์แล้ว ดังที่แสดงในรูปที่ 5

รูปที่ 5 ตอนนี้ Resource Manager แสดงรูปภาพที่คุณนำเข้าแล้ว

แยกวิเคราะห์ความหนาแน่นของ Drawable โดยอัตโนมัติ

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

ตารางนี้แสดงวิธีแสดงความหนาแน่นต่างๆ ที่รองรับสำหรับ Android และ iOS

ความหนาแน่น	ตัวระบุความหนาแน่นของ Android	ค่าตัวคูณมาตราส่วนของ iOS
ความหนาแน่นต่ำ (~120 DPI)	ldpi	ไม่รองรับ
ความหนาแน่นปานกลาง (~160 DPI)	mdpi	มาตราส่วนเดิม
ความหนาแน่นสูง (~240 DPI)	hdpi	ไม่รองรับ
ความหนาแน่นสูงพิเศษ (~320 DPI)	xhdpi	@2x
ความหนาแน่นสูงพิเศษมาก (~480 DPI)	xxhdpi	@3x
ความหนาแน่นสูงพิเศษมากที่สุด (~640 DPI)	xxxhdpi	@4x

ตัวอย่างต่อไปนี้แสดงวิธีแปลเส้นทางอินพุตเป็นเส้นทางทรัพยากรหลังการนำเข้า

ตัวระบุความหนาแน่นของ Android: hdpi

เส้นทางอินพุต: /UserFolder/icon1/hdpi/icon.png
เส้นทางทรัพยากร: <projectFolder>/<moduleFolder> /src/main/res/drawable-hdpi/icon.png

ตัวระบุความหนาแน่นของ Android: xxhdpi

เส้นทางอินพุต: /UserFolder/icon1/abc-xxhdpi/icon.png
เส้นทางทรัพยากร: <projectFolder>/<moduleFolder> /src/main/res/drawable-xxhdpi/icon.png

ค่าตัวคูณมาตราส่วนของ iOS: @2x

เส้นทางอินพุต: /UserFolder/icon1/icon@2x.png
เส้นทางทรัพยากร: <projectFolder>/<moduleFolder> /src/main/res/drawable-xhdpi/icon.png

ค่าตัวคูณมาตราส่วนของ iOS: @2x

เส้นทางอินพุต: /UserFolder/icon1/icon@2x_alternate.png
เส้นทางทรัพยากร: <projectFolder>/<moduleFolder> /src/main/res/drawable-xhdpi/icon_alternate.png

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรองรับอุปกรณ์ที่มีความหนาแน่นของพิกเซลที่แตกต่างกันได้ที่หัวข้อ รองรับความหนาแน่นของพิกเซลในระดับต่างๆ

การใช้ทรัพยากรใน Jetpack Compose

เมื่อสร้างด้วย Jetpack Compose คุณจะเข้าถึงทรัพยากรได้โดยตรงจากโค้ด Kotlin โดยใช้ API ที่ปรับให้เหมาะสม ซึ่งจะช่วยให้ตรรกะ UI และการอ้างอิงทรัพยากรซิงค์กันอยู่เสมอ

• รูปภาพ: ใช้ painterResource(id = R.drawable.your_image) ภายใน Composables Image
• สตริง: ใช้ stringResource(id = R.string.your_string) เพื่อดึง ข้อความ UI ที่แปลเป็นภาษาท้องถิ่น
• สี: ใช้ colorResource(id = R.color.your_color) เพื่อใช้ สีที่กำหนดไว้ในธีม

Resource Manager จะสร้างรหัสเหล่านี้อย่างถูกต้อง ซึ่งช่วยให้คุณอ้างอิงเนื้อหาจากลำดับชั้น UI ของ Compose ได้อย่างราบรื่น

ดูข้อมูลเกี่ยวกับการจัดการทรัพยากรขั้นสูง ซึ่งรวมถึงการโหลดแบบอักษรแบบไดนามิก ทรัพยากรที่เฉพาะเจาะจงกับการกำหนดค่า และไลบรารีทรัพยากรที่เฉพาะเจาะจงกับ Compose ได้ที่ เอกสารประกอบเกี่ยวกับ ทรัพยากรใน Compose

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

เนื้อหา Views

• จัดการทรัพยากร UI ของแอปด้วย Resource Manager (Views)