Jetpack Compose Academy · บทเรียน

ส่วนรูปประจำตัว ชื่อ และประวัติ

ประกอบส่วนหัวด้วยภาพและข้อความ

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

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

สร้างส่วนหัวก่อน

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

รูปประจำตัว

รูปประจำตัวคือ Composable รูปภาพที่วาดทรัพยากรรูปภาพ คุณควรกำหนดขนาดให้ชัดเจน เพื่อไม่ให้รูปขยายจนเต็มหน้าจอ

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo"
)

ทำให้เป็นวงกลม

รูปโปรไฟล์ดูดีที่สุดเมื่อเป็นวงกลม ใช้ clip ต่อกับ CircleShape ในตัวปรับแต่งของรูปภาพ เพื่อทำให้รูปกลายเป็นรูปประจำตัววงกลมสมบูรณ์แบบ

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo",
    modifier = Modifier.size(96.dp).clip(CircleShape)
)

เพิ่มชื่อ

ใต้รูปประจำตัวคือชื่อที่แสดง Composable ข้อความแบบง่ายจะแสดงข้อความที่ผู้ใช้จะอ่านเป็นอันดับแรก

Text(text = "Ada Lovelace")

จัดรูปแบบชื่อ

ชื่อควรโดดเด่น ส่ง รูปแบบจากชุดตัวอักษรของ MaterialTheme เพื่อให้ชื่อดูเหมือนหัวข้อที่เหมาะสม

Text(
    text = "Ada Lovelace",
    style = MaterialTheme.typography.titleLarge
)

ข้อความประวัติ

ใต้ชื่อ ให้เพิ่มประวัติหนึ่งบรรทัดด้วย Text อีกรายการ ใช้รูปแบบที่เล็กและนุ่มนวลกว่า เพื่อให้ดูเป็น คำบรรยายรอง ไม่ใช่หัวข้อหลัก

Text(
    text = "Building delightful apps.",
    style = MaterialTheme.typography.bodyMedium
)

เรียงซ้อนในคอลัมน์

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

Column {
    Image(/* avatar */)
    Text("Ada Lovelace")
    Text("Building delightful apps.")
}

จัดทุกอย่างให้อยู่กึ่งกลาง

ส่วนหัวจะดูสมดุลเมื่อจัดกึ่งกลาง ตั้งค่า horizontalAlignment เป็น CenterHorizontally ในคอลัมน์ เพื่อจัดรูปประจำตัวและข้อความให้อยู่แนวเดียวกัน

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }

เพิ่มระยะห่างแนวตั้ง

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

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }

เพิ่มพื้นที่รอบส่วนหัว

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

Column(
    modifier = Modifier.padding(16.dp)
) { /* ... */ }

ส่วนหัวเสร็จแล้ว

ตอนนี้คุณมีส่วนหัวที่เรียบร้อยแล้ว ได้แก่ รูปประจำตัววงกลม ชื่อที่เด่นชัด และประวัติที่นุ่มนวล โดยจัดกึ่งกลางและเว้นระยะอย่างเหมาะสม ส่วนบนของการ์ด เสร็จสมบูรณ์แล้ว 🎉

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

คุณจะเปลี่ยนรูปสี่เหลี่ยมให้เป็นรูปประจำตัววงกลมได้อย่างไร

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

สรุปทบทวน: ส่วนหัว

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

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

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

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

คอร์ส: 30
บทเรียน: 120

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

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

บทเรียน “ส่วนรูปประจำตัว ชื่อ และประวัติ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ส่วนรูปประจำตัว ชื่อ และประวัติ”

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

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

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

บทเรียน “ส่วนรูปประจำตัว ชื่อ และประวัติ” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Jetpack Compose Academy