0Pricing
Android Academy · บทเรียน

การจัดแนวและการจัดวาง

จัดตำแหน่งองค์ประกอบลูกอย่างแม่นยำ

การจัดแนวและการจัดวาง เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

การจัดตำแหน่งองค์ประกอบลูก

ภายใน Column หรือ Row มีการตั้งค่าสองอย่างที่ควบคุมตำแหน่งขององค์ประกอบลูก ได้แก่ alignment (ตามแนวขวางของการจัดวาง) และ arrangement (ตามแนวหลักของการจัดวาง)

การจัดแนวของ Column

ใน Column องค์ประกอบลูกจะซ้อนกันในแนวตั้ง horizontalAlignment ควบคุมตำแหน่งแนวนอน ได้แก่ ซ้าย กลาง หรือขวา

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
    Text("Also centered")
}

การจัดเรียงของ Column

verticalArrangement ควบคุมการกระจายองค์ประกอบลูกในแนวตั้ง ได้แก่ ด้านบน ตรงกลาง ด้านล่าง หรือเว้นระยะเท่า ๆ กัน

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

การจัดแนวของ Row

ใน Row แกนจะสลับกัน verticalAlignment ควบคุมตำแหน่งแนวตั้งขององค์ประกอบลูก และ horizontalArrangement จะกระจายองค์ประกอบในแนวนอน

Row(verticalAlignment = Alignment.CenterVertically) {
    Text("Left")
    Text("Right")
}

จดจำคู่การตั้งค่า

เคล็ดลับ: alignment คือแกนขวาง ส่วน arrangement คือแกนหลัก ใน Column แกนหลักเป็นแนวตั้ง จึงใช้ verticalArrangement และ horizontalAlignment

ตัวเลือกของ Arrangement

ค่า Arrangement ที่ใช้บ่อย:

  • Top / Bottom / Center
  • SpaceBetween — เว้นช่องว่างระหว่างรายการ
  • SpaceAround / SpaceEvenly

SpaceBetween

SpaceBetween ดันองค์ประกอบลูกตัวแรกและตัวสุดท้ายไปชิดขอบ และกระจายองค์ประกอบที่เหลือให้เท่า ๆ กัน เหมาะอย่างยิ่งสำหรับแถบด้านบนที่มีชื่อเรื่องทางซ้ายและไอคอนทางขวา

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Title")
    Text("Action")
}

Arrangement.spacedBy

Arrangement.spacedBy(8.dp) เพิ่มช่องว่างตายตัวระหว่างองค์ประกอบลูกทุกตัว เป็นวิธีที่สะอาดที่สุดในการเว้นระยะรายการให้เท่า ๆ กัน

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("One")
    Text("Two")
    Text("Three")
}

ใช้ spacedBy ร่วมกับ Alignment

คุณสามารถใช้ arrangement และ alignment ร่วมกัน เพื่อควบคุมการจัดวางได้อย่างสมบูรณ์

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

การจัดแนวของ Box

สำหรับ Box ให้ใช้ contentAlignment เพื่อจัดตำแหน่งองค์ประกอบลูก หรือใช้ Modifier.align() กับองค์ประกอบลูกแต่ละตัวเพื่อจัดตำแหน่งแยกกัน

Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Bottom",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
}

นำทุกอย่างมารวมกัน

แถวส่วนหัวพร้อมรายการที่เว้นระยะเท่า ๆ กัน

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Text("Inbox")
        Text("Edit")
    }
    Text("Message 1")
    Text("Message 2")
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ใน Column พารามิเตอร์ใดควบคุมตำแหน่งแนวนอนขององค์ประกอบลูก

สรุปทบทวน

การจัดตำแหน่ง:

  • Alignment = แกนขวาง; arrangement = แกนหลัก
  • Column: horizontalAlignment + verticalArrangement
  • Row: verticalAlignment + horizontalArrangement
  • Arrangement.spacedBy() เพิ่มช่องว่างที่เท่ากัน

คำถามที่พบบ่อย

บทเรียน “การจัดแนวและการจัดวาง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจัดแนวและการจัดวาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจัดแนวและการจัดวาง”

จัดตำแหน่งองค์ประกอบลูกอย่างแม่นยำ คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การจัดแนวและการจัดวาง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Column, Row และ Box
  2. ระบบ Modifier
  3. การจัดแนวและการจัดวาง
  4. ลิสต์ด้วย LazyColumn
← กลับไปที่ Android Academy