มาทบทวนเรื่อง Margin และ Padding กันอีกสักนิด

android May 08, 2020

แรกๆที่เราเขียน Android มักจะแยก margin และ padding ไม่ค่อยถูก พอเป็น Android Developer ไปเรื่อยๆก็จะแยกออกหล่ะ แล้วเห็นบล็อกพี่เอกเขียนหัวข้อนี้ แต่ยังไม่ได้อ่าน ก็เลยลองวาดๆเขียนๆดู

แล้ว margin และ padding คืออะไร? และต่างกันอย่างไร?

Margin คือ ระยะห่างระหว่าง view นั้นกับ parent ของมัน หรือ view ข้างเคียง เช่น TextView ตัวนี้ อยู่ห่างจากด้านบนจอ 32dp หรือ EditText ตัวนี้ อยู่ห่างจาก TextView ตัวมะกี้ 16dp เรามองว่าเป็นระยะห่างภายนอก view นั้นๆ

Padding คือ ระยะห่างของ content ของ view นั้น กับขอบของ view นั้น เช่น ImageView ตัวนี้ padding ทุกด้าน 8dp ซึ่งเจ้า padding มันจะทำให้เจ้า view นั้นมีขนาดเล็กลง เนื่องจากมันโดนบีบด้านละ 8dp อะเนอะ เรามองว่าเป็นระยะห่างภายใน view นั้นๆ

Use Case เท่าที่นึกออก

  • บางหน้าจะมี ImageView ที่เป็นกากบาท ไว้มุมขวาบน เพื่อกดปิด แล้วบางทีมันเล็กมาก จนกดปิดยาก จึงได้การ์ดจากเทสเตอร์ หรือ user บ่นเอา

ดังนั้นเราจึงต้องเพิ่ม padding เข้าไป แต่มันทำให้ขนาดเล็กลง (พอดีลืมวาด ;__;) เลยต้องลด margin ลง เพื่อให้ ImageView กากบาทมีขนาดเท่าเดิม แต่กดง่ายขึ้น

  • การทำปุ่มให้สวยงาม นอกจากระยะห่างภายนอกที่ดีแล้ว ภายในก็ต้องดีด้วย

สมมุติมีปุ่มนึง ให้ user กด ตกลง แน่นอนว่าขนาดของ Button เพื่อ wrap_content มันก็จะดูหดๆ ดังนั้นเราจึงใช้ padding เพื่อทำให้ปุ่มมีขนาดใหญ่ขึ้น สวยงามขึ้น และใส่ margin เพื่อให้มีระยะห่างที่สวยงาม

หรืออย่างบล็อกนี้เขาก็พูดถึงว่าเมื่อไหร่ที่ควรใช้ margin หรือ padding

When to use Padding and Margin
When using applications, small details really make a big difference in User Experience (UX). These small details may include colors, font size, padding, margin, or anything style related. Placing…

อ่านแล้วอาจจะงงๆ ทำไมถึงยกตัวอย่างว่า 8dp 16dp 32dp เพราะว่าตาม Material Guideline หล่ะสิ

Understanding layout
Material Design layout encourages consistency across platforms, environments, and screen sizes by repeating visual elements and using consistent spacing.

ฝากร้านกันสักนิด ฝากเพจด้วยนะจ๊ะ

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, December 10, 2017

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.