![](https://cdn-images-1.medium.com/max/800/0*3S3eYRMfGFXQu25s.jpg)
ในบทความนี้จะเป็นการเกริ่นถึง Nine Patch ว่ามันคืออะไร ซึ่งเจ้าของบล็อกจะนำไปสู่หัวบทความหลักต่อไป
การเขียนแอพบนแอนดรอยด์ ก็เป็นปกติที่ผู้เขียนแอพ ต้องการใส่รูปบนลงบน Button แต่ก็จะเกิดปัญหาภาพยืด ซึ่งมาจากขนาดของ Button ไม่เหมาะสมกับขนาดของภาพหรือขนาดของภาพเล็กกว่า และปัญหาอื่นๆอีกมากมาย ซึ่งผู้พัฒนาแอพส่วนใหญ่จึงใช้ Nine Patch เข้ามาช่วย เพื่อแก้ปัญหาการแสดงภาพบน Button ที่ไม่สมส่วน
Nine Patch หรือเรียกว่ารอยแบ่งเก้าส่วน ซึ่งเป็นการแบ่งภาพออกเป็น 9 ส่วน ซึ่งจะใช้วิธีลากเส้นนอกขอบทั้งสี่ด้าน โดยเส้นที่ลากนั้นจะมีความหมายของมันด้วย
สมมติว่ารูปปุ่มที่ต้องการนำมาใช้แทน ภาพเดิมของ Button เป็นรูปข้างล่างนี้
![](https://cdn-images-1.medium.com/max/800/0*1Bso3w8-HoHhu3RZ.jpg)
การกำหนด Nine Patch จะทำโดยลากเส้นนอกขอบทั้งสี่ด้าน โดยแต่ละเส้นจะมีความยาวตามที่เรากำหนดได้ ซึ่งความยาวของแต่ละเส้นนี่ล่ะที่เป็นตัวกำหนดภาพ
![](https://cdn-images-1.medium.com/max/800/0*-28zL61I3-pL6Srg.jpg)
เส้นซ้ายและเส้นบนจะเป็นการกำหนดส่วนที่ขยายภาพได้ โดยจะกำหนดเป็นแนวตั้งและแนวนอนตัดกัน ส่วนที่ไม่ได้อยู่ในขอบเขตของเส้น จะไม่มีการเปลี่ยนแปลง ขนาดของภาพ เวลาที่ Button มีการย่อหรือขยาย
ให้ดูภาพข้างล่างประกอบ จะเห็นว่าส่วนที่แรเงาสีแดง จะเป็นมุมของปุ่ม ซึ่งในส่วนนี้จะไม่ถูกย่อหรือขยายได้ ทำให้ขนาด Button ใหญ่หรือเล็กกว่าภาพ มุมของ Button ก็จะยังมีขนาดคงที่อยู่ดี จะเปลี่ยนแปลงเฉพาะส่วนที่ย่อและขยายได้เท่านั้น
![](https://cdn-images-1.medium.com/max/800/0*izKGTqyCEYEfItvT.jpg)
ทีนี้มาลองเปรียบเทียบกับภาพปกติเลยดีกว่า สมมติว่าเราสร้าง Button ที่ยาวขึ้นกว่าเดิม จากภาพเดิมก็จะถูกยืดออกให้เท่ากับขนาด Button
![](https://cdn-images-1.medium.com/max/800/0*5VkqINBRh33r5tG9.jpg)
จะเห็นว่าภาพถูกยืดในแนวนอน ทำให้มุมของ Button ไม่โค้งสวย อาจจะแก้ปัญหาได้ด้วยการทำภาพให้พอดีกับขนาด Button ก็ได้ ถ้า Button ของเรามีหลายขนาดล่ะ? จะทำภาพให้ทุกๆ Button? เพียงแค่ใช้ Nine Patch เรื่องมุมของ Button ก็จะไม่ถูกยืด แต่ในส่วนตรงกลางที่อยู่ในขอบเขตของเส้นซ้ายและเส้นบน ก็จะถูกยืดแค่ส่วนนั้นๆแทน จะเห็นว่าเส้นประตรงกลางจะกว้างขึ้น ในขณะที่เส้นประตรงขอบจะมีขนาดเท่าเดิม ภาพจึงพอดีกับ Button (ภาพตรงกลางที่อยู่ระหว่างเส้นประจะถูกยืดเท่านั้น)
![](https://cdn-images-1.medium.com/max/800/0*pDpV938Sqgw-pjTJ.jpg)
และในเส้นขวาและเส้นล่างจะเป็นขอบเขตของตัวอักษรบน Button ทำให้สามารถกำหนดระยะห่างตัวอักษรจากขอบ Button ได้นั่นเอง
![](https://cdn-images-1.medium.com/max/800/0*2lqvwhpUzUvHCWQk.jpg)
ดังนั้นจากภาพสี่เหลี่ยมจตุรัส เมื่อใช้กับ Button ที่มีขนาดเป็นสี่เหลี่ยมผืนผ้า โดยใช้ Nine Patch เข้ามาช่วย ก็จะได้ปุ่มที่มีลักษณะดังรูปข้างล่างนี้
![](https://cdn-images-1.medium.com/max/800/0*GzJOHaKS_9xbXnaL.jpg)
เพียงเท่านี้ก็หมดปัญหากับภาพปุ่มยืดแล้ว ซึ่งจริงๆแล้ว Nine Patch ไม่ได้ใช้กับ Button เท่านั้น แต่ใช้กับอย่างอื่นก็ได้ที่เกี่ยวกับภาพ เช่น Image View เป็นต้น ส่วนการสร้าง Nine Patch ไว้ใช้งาน จะพูดอีกทีในบทความถัดไป