เครื่องมือ Draw 9-patch เป็นโปรแกรมแก้ไข WYSIWYG ที่รวมอยู่ใน Android Studio เครื่องมือนี้ช่วยให้คุณสร้าง รูปภาพบิตแมปที่ปรับขนาดโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาของมุมมองและขนาดของ หน้าจอ คุณสามารถปรับขนาดส่วนที่เลือกของรูปภาพในแนวนอนหรือแนวตั้งตามตัวบ่งชี้ ที่วาดภายในรูปภาพ
หากต้องการทราบข้อมูลเบื้องต้นเกี่ยวกับกราฟิก NinePatch และวิธีการทำงาน โปรดอ่านภาพวาด NinePatch
รูปที่ 1 เครื่องมือวาด 9-patch ของ Android Studio แสดงรูปภาพ NinePatch
ทำตามขั้นตอนต่อไปนี้เพื่อสร้างกราฟิก NinePatch โดยใช้เครื่องมือ Draw 9-patch ใน Android Studio คุณจะต้องมีรูปภาพ PNG ที่ต้องการสร้างเป็นรูปภาพ NinePatch
- ใน Android Studio ให้คลิกขวาที่รูปภาพ PNG ที่ต้องการสร้าง รูปภาพ NinePatch จากนั้นคลิกสร้างไฟล์ 9-patch
- ป้อนชื่อไฟล์สำหรับรูปภาพ NinePatch แล้วคลิกตกลง ระบบจะสร้างรูปภาพ
โดยใช้นามสกุลไฟล์
.9.png - ดับเบิลคลิกไฟล์ NinePatch ใหม่เพื่อเปิดใน Android Studio
ในพื้นที่ทํางานที่เปิดขึ้นมา บานหน้าต่างด้านซ้ายคือพื้นที่วาดภาพ ซึ่งคุณสามารถแก้ไข เส้นสําหรับแพตช์ที่ยืดหยุ่นและพื้นที่เนื้อหาได้ บานหน้าต่างด้านขวา คือพื้นที่แสดงตัวอย่าง ซึ่งคุณสามารถดูตัวอย่างกราฟิกเมื่อยืด
- คลิกภายในเส้นรอบวง 1 พิกเซลเพื่อวาดเส้นที่กำหนดแพตช์ที่ยืดหยุ่นได้และ (ไม่บังคับ) พื้นที่เนื้อหา
คลิกขวาเพื่อลบ เส้นที่วาดก่อนหน้านี้ (ใน Mac ให้กด Shift ค้างไว้แล้วคลิก)
- เมื่อเสร็จแล้ว ให้คลิกไฟล์ > บันทึกเพื่อบันทึกการเปลี่ยนแปลง
หากต้องการเปิดไฟล์ NinePatch ที่มีอยู่แล้วใน Android Studio ให้ดับเบิลคลิกไฟล์
ตรวจสอบว่าภูมิภาคที่ยืดหยุ่นมีขนาดอย่างน้อย 2x2 พิกเซลเพื่อให้แน่ใจว่ากราฟิก NinePatch จะปรับขนาดลงได้อย่างถูกต้อง ไม่เช่นนั้น ภูมิภาคเหล่านั้นอาจหายไปเมื่อลดขนาด หากต้องการหลีกเลี่ยงการประมาณค่าระหว่างการปรับขนาด ซึ่งอาจทำให้สีที่ขอบเขตเปลี่ยนไป ให้เว้นพื้นที่ว่างเพิ่มเติม 1 พิกเซลในกราฟิกก่อนและหลัง บริเวณที่ยืดหยุ่นได้
หมายเหตุ: ไฟล์ PNG ปกติ (*.png) จะ
โหลดโดยมีเส้นขอบขนาด 1 พิกเซลที่ว่างเปล่าเพิ่มรอบรูปภาพ คุณวาด
แพตช์ที่ยืดหยุ่นและพื้นที่เนื้อหาภายในเส้นขอบได้
ระบบจะโหลดไฟล์ NinePatch ที่บันทึกไว้ก่อนหน้านี้ (*.9.png) ตามเดิม
โดยไม่มีการเพิ่มพื้นที่วาดเนื่องจากมีอยู่แล้ว
รูปที่ 2 รูปภาพ NinePatch ใน Android Studio แสดงเนื้อหา แพตช์ และแพตช์ที่ไม่ถูกต้อง
การควบคุมที่ไม่บังคับ ได้แก่
- ซูม: ปรับระดับการซูมของกราฟิกในพื้นที่วาดภาพ
- ขนาดแพตช์: ปรับขนาดของรูปภาพในพื้นที่แสดงตัวอย่าง
- แสดงการล็อก: แสดงภาพพื้นที่ที่วาดไม่ได้ของกราฟิกเมื่อวางเมาส์
- แสดงแพตช์: ดูตัวอย่างแพตช์ที่ยืดหยุ่นได้สีชมพูในพื้นที่วาด สีชมพู แสดงถึงแพตช์ที่ยืดหยุ่นได้ ดังแสดงในรูปที่ 2
- แสดงเนื้อหา: ไฮไลต์พื้นที่เนื้อหาในรูปภาพตัวอย่าง สีม่วงแสดงถึง พื้นที่ที่อนุญาตให้แสดงเนื้อหา ดังแสดงในรูปที่ 2
- แสดงแพตช์ที่ไม่ดี: เพิ่มเส้นขอบสีแดงรอบพื้นที่แพตช์ที่อาจ ทำให้เกิดอาร์ติแฟกต์ในกราฟิกเมื่อยืด ดังที่แสดงในรูปที่ 2 หากกำจัดแพตช์ที่ไม่ดีทั้งหมด คุณจะรักษาความสอดคล้องของภาพที่ยืดออก