Copyright 2024 - Custom text here

การทำ Nine Patch ก็คือการทำ รูปสำหร้บเป็น Background สำหรับ Layout ที่ ออกแบบมาพิเศษ เพื่อรองรับการขยาย หรือ นำไปใช้ในแอนดรอยด์ ที่มีขนาดหน้าจอที่หลายหลาย เรามาทำความเข้าใจ Nint Patch กันก่อน

จากรูปภาพ มาสเตอร์ แบ่งภาพออกเป็น 9 ส่วน จะสังเกตุว่า ภาพที่ ตำแหน่างที่ 1, 3, 7, 9 จะ Static คือไม่เปลี่ยนแปลนแม้น ภาพที่ 5 จะมีความกว้าางและ ความสูงเพิ่มขึ้น ถ้าเราขยายภาพ ออกไปด้านละ 1 px

ด้านที่ 2,4 จะหมายถึงเรากำหนดให้ภาพขยายได้ ส่วน 6,8 คือตำแหน่งการขยายของ Content

มะ เรามาลองทำ Nine Patch สำหรับ การทำ  Background แบบเท่ๆ กันไปเปิด Photoshop มา

ไปโหลด โลโกสวยๆ ที่นี่เลย https://www.iconfinder.com

สร้างภาพ เปล่าๆ 450x350

 

เอา Logo ที่เราโหลดมา ไป ปะให้ได้ แบบนี่ (มาสเตอร์ ไม่เข้ารายละเอียดนะ Photoshop พื้นฐาน)

 

มาสเตอร์ ข้ามมาส่วนสำคัญเลย หลังจากเราได้ภาพ ที่จะมาทำ Login 

ไปที่ https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example และ อัพโหลด ภาพที่เราทำไปไว้บน เว็บนี้

คืออย่างนี่ มาสเตอร์ ไม่แม่นเรื่องการขยาย Pix 1 ไปที่ขอบและ การสร้างเส้นดำ เลยใช้ เคื่องมือนี่ช่วย

กำหนด ขอบเขตที่จะขยาย จำ ตำแหน่นงที่ 2, 4 ได้นะ

ส่วนนี่กำหนด การขยายของ Content จำ 6,8 ได้นะ

โหลดลงมาทำต่อในเครื่อง

 

ที่ drawable-xxhdpi

 

เนื่องด้วยเราต้องการให้ Logo คงที่ไม่ขยาย งั้น ที่ส่วนขยายด้าน 2 ต้องมี 2 ที่  

นำไป Save ไว้ที่ xxhdpi และลองเรียกใช้ดูครับ

ลองทสอบบนต่อต่างๆ

 

 

ครับแค่นี่ก็เรียบร้อย 

 

 

 

 

 

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g