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

แรกๆที่เราเขียน 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…

SketchwareSung Park

อ่านแล้วอาจจะงงๆ ทำไมถึงยกตัวอย่างว่า 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.

Material Design

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