Padding , Margin ใน Android Compose
1 min read

Padding , Margin ใน Android Compose

margin/ padding set ใน compose ยังไง
Padding , Margin ใน Android Compose

บทความนี้รีบมาโพสเลย สวัสดีครับ พอดีว่าผมลองเล่น Jetpack Compose ไปได้สักหน่อยหนึ่ง พบว่า Margin / Padding เซตกันยังไง เป็นเรื่องง่ายๆ แต่ก็ เจอความแปลก สำหรับ การ เซต Margin /Padding ครับ

โดย Android แบบเดิม เวลาเราใส่ style แล้ว เซต margin /padding เราจะทำแบบนี้

หมายความว่ายังไงครับ ??   margin เอาตัวมันห่างจาก layout ไป 16 นะ padding เอาข้างในตัวมัน ห่างออกไป 16 นะ

แล้วใน Jetpack Compose หละ เขาใส่ Style กันยังไง

ผลลัพธ์ที่ได้

อ่าวก็ เซต Padding ง่ายดีนิ แต่ว่าพอผมจะ เซต Margin เท่านั่นแหละ

ไม่มีให้ผม เซต Margin ซะงั้นครับ ผมจึงไปค้นหา พบว่า Jetpack Compose มันใช้ Padding นั่นแหละ ในการทำ Margin มันคือยังไงนะหรอ ลองไปดูโค๊ดนี้กันครับ

modifier = Modifier
            .padding(16.dp)
            .background(
                color = Color.LightGray
            )
            .padding(8.dp),
ผลลัพธ์ที่ได้

สังเกตว่า ตัว Preview จะมี กรอบขึ้นมา ก็คือกรอบ margin นั่นเอง ต่อไป ผมจะอธิบายตามความเข้าใจของผมนะครับ

คือ modifier จะทำงานได้ทีละ step ตามที่เรากำหนด

  1. นำของที่อยู่ข้างในห่างออกมา 16
  2. ใส่สีในของที่อยู่ข้างในตัวมัน
  3. ใส่ นำของที่อยู่ข้างในตัวของมันอีกที ออกมา 16

เราก็จะได้ View ตามที่แสดงครับ

ถ้าใครอยากจะศึกษาต่อผมจะให้ลิงค์ ที่ผมไปหาวิธีมาไว้ด้านล่างนะครับ ยังไงก็ขอขอบคุณผู้อ่านที่เข้ามาอ่านกันนะครับ


How to Set Padding & Margin in Android Jetpack Compose
Learn how to set padding and margin in Android Jetpack Compose. Also, how to add an empty space using Spacer() composable.