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

ข้อความ รูปภาพ และปุ่ม

ใช้ composable พื้นฐานที่มีมาให้

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

Composables ที่มีมาให้ในตัว

Compose มาพร้อม composables สำเร็จรูปสำหรับส่วนติดต่อผู้ใช้ทั่วไป สามรายการที่คุณจะใช้เป็นประจำคือ Text Image และ Button

Composable แบบ Text

Text ใช้แสดงสตริง พารามิเตอร์ที่สำคัญที่สุดคือ text

@Composable
fun Title() {
    Text(text = "My App")
}

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

Text รับพารามิเตอร์สำหรับจัดรูปแบบได้หลายรายการ เช่น fontSize color และ fontWeight

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp กับ dp

ขนาดตัวอักษรใช้ .sp (พิกเซลที่ไม่ขึ้นกับมาตราส่วน) เพื่อให้สอดคล้องกับการตั้งค่าขนาดตัวอักษรเพื่อการเข้าถึงของผู้ใช้ ส่วนขนาดเค้าโครงใช้ .dp (พิกเซลที่ไม่ขึ้นกับความหนาแน่น)

ใช้ sp สำหรับข้อความ และใช้ dp สำหรับสิ่งอื่นทั้งหมด

Composable แบบ Image

Image ใช้แสดงรูปภาพ ใช้ painterResource เพื่อโหลด drawable และต้องระบุ contentDescription เพื่อการเข้าถึงเสมอ

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription จะถูกโปรแกรมอ่านหน้าจออ่านออกเสียง สำหรับรูปภาพตกแต่งที่ไม่มีความหมาย ให้ส่งค่า null ส่วนรูปภาพที่มีความหมาย ให้คำอธิบายสั้น ๆ

Composable แบบ Button

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

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

การตอบสนองต่อการคลิก

แลมบ์ดา onClick คือจุดที่คุณใส่ตรรกะ เช่น อัปเดตสถานะ นำทาง หรือเรียกใช้ฟังก์ชัน

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

แลมบ์ดาเนื้อหา

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

Button(onClick = { }) {
    Text(text = "Save")
}

การนำมาประกอบกัน

ส่วนติดต่อผู้ใช้จริงมักผสม composables เหล่านี้เข้าด้วยกัน ตัวอย่างนี้วางชื่อเรื่อง รูปภาพ และปุ่มซ้อนกันภายใน Column

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

ยังมีอีกมากมาย

นอกเหนือจากสามรายการนี้ Compose ยังมี TextField Icon Checkbox Switch และอีกมากมาย รูปแบบการใช้งานยังเหมือนเดิม คือส่งพารามิเตอร์และแลมบ์ดาเนื้อหา

ตรวจสอบอย่างรวดเร็ว

พารามิเตอร์ใดของ Button ที่ใช้เรียกใช้โค้ดเมื่อผู้ใช้แตะปุ่ม

ทบทวน

คุณได้รู้จักคอมโพสเซเบิลหลักสามรายการ:

  • Text — ใช้แสดงข้อความ โดยกำหนดรูปแบบด้วย fontSize และ color (ใช้ sp)
  • Image — ใช้ร่วมกับ painterResource และ contentDescription
  • Button — ใช้แลมบ์ดา onClick ร่วมกับแลมบ์ดาเนื้อหา

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

บทเรียน “ข้อความ รูปภาพ และปุ่ม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ข้อความ รูปภาพ และปุ่ม”

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

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

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

บทเรียน “ข้อความ รูปภาพ และปุ่ม” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Jetpack Compose คืออะไร
  2. Composable แรกของคุณ
  3. ข้อความ รูปภาพ และปุ่ม
  4. ตัวอย่างและการโหลดซ้ำแบบทันที
← กลับไปที่ Android Academy