Android Academy · บทเรียน

พื้นฐาน Text และ Column

แสดงและเรียงซ้อนเนื้อหา

บทเรียน 2 จาก 413 ขั้นตอน

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

Composable ข้อความ

สิ่งพื้นฐานที่สุดที่คุณสามารถแสดงใน Compose คือข้อความ composable Text จะวาดสตริงบนหน้าจอ

คุณส่งสตริงที่ต้องการแสดงเป็นอาร์กิวเมนต์ตัวแรก เพียงเท่านี้ก็สามารถแสดงคำบนหน้าจอได้แล้ว

@Composable
fun Hello() {
    Text("Hello, Android!")
}

จัดรูปแบบข้อความ

Text รับพารามิเตอร์เพื่อเปลี่ยนลักษณะที่แสดงได้ คุณสามารถกำหนด fontSize, color และ fontWeight ได้

ขนาดใช้หน่วย sp ซึ่งปรับตามการตั้งค่าขนาดตัวอักษรของผู้ใช้ ช่วยให้แอปอ่านง่ายสำหรับทุกคน

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

เหตุผลที่ต้องมีโครงร่าง

หากคุณเรียกใช้ Text สองครั้งติดต่อกัน ข้อความทั้งสองส่วนจะอยู่ที่ตำแหน่งเดียวกันและซ้อนทับกัน composable จะไม่จัดวางตัวเองโดยอัตโนมัติ

หากต้องการวางรายการตามลำดับ คุณต้องใช้ composable โครงร่างเพื่อจัดระเบียบองค์ประกอบลูก โครงร่างที่ใช้บ่อยที่สุดสำหรับการซ้อนในแนวตั้งคือ Column

Composable Column

Column จัดเรียงองค์ประกอบลูกในแนวตั้ง โดยวางต่อกันจากบนลงล่าง คุณใส่ composable ลูกไว้ภายในบล็อกแลมบ์ดาต่อท้าย

composable แต่ละตัวที่คุณเขียนไว้ภายในวงเล็บปีกกาจะกลายเป็นแถวหนึ่งในกองแนวตั้ง โดยเรียงตามลำดับที่คุณเขียน

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

ลำดับมีความสำคัญใน Column

ภายใน Column องค์ประกอบลูกจะปรากฏจากบนลงล่างตามลำดับที่คุณระบุไว้อย่างแน่นอน ย้ายบรรทัดหนึ่งขึ้นในโค้ด องค์ประกอบนั้นก็จะย้ายขึ้นบนหน้าจอ

ทำให้โครงร่างคาดเดาได้: อ่านโค้ดจากบนลงล่าง แล้วคุณจะทราบว่าหน้าจอมีลักษณะอย่างไรจากบนลงล่าง

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

การจัดเรียงในแนวตั้ง

Column สามารถควบคุมระยะห่างระหว่างองค์ประกอบลูกด้วย verticalArrangement ตัวอย่างเช่น Arrangement.spacedBy จะเพิ่มช่องว่างที่เท่ากัน

วิธีนี้สะอาดกว่าการเพิ่มระยะห่างให้กับองค์ประกอบลูกแต่ละตัวด้วยตนเอง และช่วยให้โครงร่างสอดคล้องกัน

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

การจัดแนวในแนวนอน

โดยค่าเริ่มต้น Column จะจัดแนวองค์ประกอบลูกชิดจุดเริ่มต้น (ซ้าย) ใช้ horizontalAlignment เพื่อจัดให้อยู่กึ่งกลางหรือชิดจุดสิ้นสุด

ตั้งค่าเป็น Alignment.CenterHorizontally แล้วองค์ประกอบลูกทุกตัวจะอยู่กึ่งกลางภายในความกว้างของคอลัมน์

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

พบกับ Row

Column เรียงองค์ประกอบในแนวตั้ง ส่วนพี่น้องอย่าง Row จะจัดองค์ประกอบไว้เคียงข้างกันในแนวนอน ทั้งสองมีแนวคิดเดียวกัน แต่ต่างกันที่ทิศทาง

คุณจะผสมผสาน Row และ Column เพื่อสร้างตารางและการ์ดต่าง ๆ สำหรับตอนนี้ ให้จำไว้ว่า Column เรียงลงด้านล่าง ส่วน Row เรียงไปด้านข้าง

Row {
    Text("Left")
    Text("Right")
}

การซ้อนเลย์เอาต์

เลย์เอาต์สามารถบรรจุเลย์เอาต์อื่นไว้ภายในได้ คุณสามารถวาง Row ไว้ภายใน Column เพื่อสร้างการออกแบบที่มีรายละเอียดมากขึ้น

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

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

การเพิ่มช่องว่างระหว่างรายการ

หากต้องการเพิ่มช่องว่างคงที่ระหว่างองค์ประกอบแบบประกอบได้สองรายการ คุณสามารถแทรก Spacer ได้ ซึ่งเป็นองค์ประกอบแบบประกอบได้ที่ว่างเปล่าและมีหน้าที่เพียงกินพื้นที่

กำหนดความสูงให้กับมันผ่านตัวปรับแต่ง แล้วมันจะดันรายการถัดไปลงด้านล่าง เราจะศึกษาเรื่องตัวปรับแต่งเพิ่มเติมในบทเรียนถัดไป

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

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

ด้วย Text และ Column คุณก็สามารถสร้างหน้าจอที่มีป้ายกำกับอย่างง่ายได้แล้ว ให้เรียงหัวข้อและบรรทัดรายละเอียดสองสามบรรทัดซ้อนกัน

รูปแบบเล็ก ๆ นี้เป็นพื้นฐานของหน้าจอ Compose แทบทุกหน้าที่คุณจะเขียน

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

ตรวจสอบความเข้าใจ

มาทดสอบความเข้าใจของคุณเกี่ยวกับทิศทางของเลย์เอาต์กัน

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

คุณได้เรียนรู้การแสดงสตริงด้วย Text และการจัดรูปแบบด้วย fontSize กับ fontWeight แล้ว Column จะเรียงองค์ประกอบลูกในแนวตั้งตามลำดับในโค้ด ขณะที่ Row จะจัดเรียงในแนวนอน

คุณควบคุมระยะห่างได้ด้วย verticalArrangement หรือ Spacer และจัดแนวองค์ประกอบลูกได้ด้วย horizontalAlignment การซ้อน Row และ Column ช่วยสร้างเลย์เอาต์ที่มีรายละเอียดมากขึ้น บทถัดไป คุณจะดูตัวอย่างหน้าจอเหล่านี้โดยไม่ต้องเรียกใช้แอป

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 36
บทเรียน: 152

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “พื้นฐาน Text และ Column” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน Text และ Column”

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

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

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

บทเรียน “พื้นฐาน Text และ Column” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Android Academy