Android Academy · บทเรียน

สร้างการ์ดโปรไฟล์

รวม composable เป็นหน้าจอ

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

เป้าหมายของเรา

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

ระหว่างทาง คุณจะได้พบกับ Modifier ซึ่งควบคุมขนาด ระยะห่าง และลักษณะที่ปรากฏของคอมโพสิเบิล

พบกับ Modifier

Modifier เปลี่ยนลักษณะที่ปรากฏและพฤติกรรมของคอมโพสิเบิล คุณส่งผ่านมันด้วยพารามิเตอร์ modifier ซึ่งคอมโพสิเบิลส่วนใหญ่รองรับ

ตัวปรับแต่งจัดการระยะขอบภายใน ขนาด สีพื้นหลัง เส้นขอบ และสิ่งอื่น ๆ ตัวปรับแต่งเป็นวิธีหลักที่คุณใช้ตกแต่งส่วนติดต่อผู้ใช้ใน Compose

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

การเชื่อมตัวปรับแต่ง

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

ลำดับมีความสำคัญ: การกำหนดระยะขอบภายในก่อนพื้นหลังให้ผลต่างจากการกำหนดหลังพื้นหลัง ให้อ่านสายการเรียกใช้จากซ้ายไปขวาเหมือนสูตรอาหาร

Modifier
    .padding(16.dp)
    .fillMaxWidth()

การขยายให้เต็มความกว้าง

ตัวปรับแต่ง fillMaxWidth ทำให้คอมโพสิเบิลขยายเต็มพื้นที่แนวนอนที่มีอยู่ เหมาะอย่างยิ่งสำหรับการ์ดที่ควรขยายเต็มหน้าจอ

นอกจากนี้ยังมี fillMaxSize สำหรับทั้งสองทิศทาง และ size สำหรับกำหนดความกว้างและความสูงแบบคงที่

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

การเพิ่มระยะขอบภายใน

ระยะขอบภายในคือพื้นที่ว่างภายในคอมโพสิเบิล ระหว่างขอบกับเนื้อหา ให้ใช้ Modifier.padding พร้อมค่าหน่วย dp

ระยะขอบภายในช่วยไม่ให้ข้อความชิดขอบการ์ด ทำให้เลย์เอาต์ดูสบายตาและสะอาด

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

การใส่พื้นหลังให้การ์ด

สีพื้นหลังช่วยให้การ์ดโดดเด่นขึ้น ใช้ตัวปรับแต่ง background พร้อมค่สีเพื่อกำหนดสีพื้นหลัง

ใช้ร่วมกับระยะขอบภายใน เพื่อให้พื้นที่สีมีช่องว่างรอบข้อความด้านในอย่างเหมาะสม

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

การเรียงชื่อและตำแหน่งงาน

ภายใน Column ของการ์ด เราจะเรียงข้อความสองส่วน ได้แก่ ชื่อตัวหนาไว้ด้านบน และตำแหน่งงานที่ใช้น้ำหนักเบากว่าไว้ด้านล่าง

การกำหนดค่า fontSize และ fontWeight ที่แตกต่างกัน ช่วยสร้างลำดับชั้นทางภาพที่ชัดเจนระหว่างข้อความทั้งสอง

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

การทำให้ใช้ซ้ำได้

มาเปลี่ยนการ์ดให้เป็นคอมโพสิเบิลที่ใช้ซ้ำได้ โดยรับ name และ title เป็นพารามิเตอร์ ตอนนี้การ์ดจะแสดงข้อมูลของบุคคลใดก็ได้

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

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

การ์ดโปรไฟล์ฉบับสมบูรณ์

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

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

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

การแสดงตัวอย่างการ์ด

เพิ่มตัวห่อ @Preview เพื่อดูการ์ดใน Android Studio ตัวห่อนี้เรียกใช้ ProfileCard พร้อมข้อมูลตัวอย่างและแสดงพื้นหลัง

ตอนนี้คุณสามารถปรับระยะขอบภายในหรือสี แล้วดูผลลัพธ์อัปเดตได้ทันที

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

การแสดงบนหน้าจอ

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

ตอนนี้คุณได้พัฒนาจากคอมโพสิเบิลเดียวมาเป็นส่วนประกอบส่วนติดต่อผู้ใช้ที่สมบูรณ์และใช้ซ้ำได้แล้ว

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

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

มาทบทวนวิธีที่คอมโพสิเบิลได้รับระยะขอบภายใน ขนาด และพื้นหลังกัน

ทบทวน

คุณสร้างการ์ดโปรไฟล์ที่สมบูรณ์ด้วยการรวม Text, Column และ Modifier เข้าด้วยกัน ตัวปรับแต่งช่วยให้คุณเชื่อม padding, fillMaxWidth และ background เพื่อกำหนดรูปร่างและจัดรูปแบบส่วนติดต่อผู้ใช้

คุณทำให้การ์ดใช้ซ้ำได้ด้วยพารามิเตอร์ name และ title แสดงตัวอย่างด้วย @Preview และแสดงผลผ่าน setContent นี่คือหน้าจอคอมโพสิเบิลแบบครบถ้วนตั้งแต่ต้นจนจบ ยินดีด้วย!

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

บทเรียน “สร้างการ์ดโปรไฟล์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “สร้างการ์ดโปรไฟล์”

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

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

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

บทเรียน “สร้างการ์ดโปรไฟล์” ใช้เวลานานแค่ไหน

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

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

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

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

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