Android Academy · บทเรียน

Jetpack Compose คืออะไร

ทำความเข้าใจ UI แบบประกาศใน Android

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

Jetpack Compose คืออะไร

Jetpack Compose คือชุดเครื่องมือสมัยใหม่ของ Android สำหรับสร้างส่วนติดต่อผู้ใช้แบบเนทีฟ แทนที่จะเขียนไฟล์เค้าโครง XML คุณสามารถอธิบายส่วนติดต่อผู้ใช้ได้โดยตรงในโค้ด Kotlin

Compose เป็นแบบ ประกาศผลลัพธ์: คุณบอกว่าหน้าจอควรมีลักษณะอย่างไรสำหรับสถานะหนึ่ง ๆ แล้วระบบจะจัดการเองว่าจะวาดและอัปเดตอย่างไร

วิธีแบบเดิม: มุมมอง XML

โดยทั่วไป หน้าจอ Android ต้องมีสองส่วน:

ไฟล์ เค้าโครง XML ที่อธิบายวิดเจ็ต
โค้ด Kotlin/Java ที่ค้นหามุมมองเหล่านั้นด้วย findViewById แล้วเปลี่ยนแปลงมุมมอง

การรักษาให้ XML และโค้ดสอดคล้องกันเป็นงานที่น่าเบื่อและเกิดข้อผิดพลาดได้ง่าย

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

แบบ命令การกับแบบประกาศผลลัพธ์

เมื่อใช้มุมมอง XML คุณจะเขียนโค้ดแบบ 命令การ: ดึงมุมมองมา แล้วเปลี่ยนแปลงทีละขั้นตอน

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

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

ฟังก์ชัน Composable

หน่วยพื้นฐานของ Compose คือ ฟังก์ชัน composable: ฟังก์ชัน Kotlin ปกติที่มีคำอธิบายประกอบ @Composable และสร้างส่วนติดต่อผู้ใช้

Composables สามารถเรียกใช้ composables อื่น ๆ ได้ ทำให้คุณสร้างหน้าจอจากชิ้นส่วนเล็ก ๆ ที่นำกลับมาใช้ใหม่ได้

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

ไม่ต้องใช้ findViewById

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

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

ส่วนติดต่อผู้ใช้ในรูปฟังก์ชันของสถานะ

แนวคิดสำคัญคือ UI = f(state) หน้าจอคือผลลัพธ์ของ composables เมื่อได้รับสถานะปัจจุบัน เมื่อเปลี่ยนสถานะ ฟังก์ชันเดิมจะสร้างส่วนติดต่อผู้ใช้แบบใหม่

แนวทางนี้ทำให้ส่วนติดต่อผู้ใช้คาดเดาได้และทำความเข้าใจได้ง่ายขึ้น

ทุกอย่างคือ Kotlin

เนื่องจาก composables เป็นฟังก์ชัน Kotlin คุณจึงใช้ลูป เงื่อนไข และตัวแปรเพื่อสร้างส่วนติดต่อผู้ใช้ได้ โดยไม่ต้องใช้ภาษาสำหรับแม่แบบโดยเฉพาะ

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

โค้ดประกอบน้อยลง

Compose ลดโค้ดเชื่อมต่อจำนวนมาก ไม่ต้องแปลง XML เป็นมุมมอง ไม่ต้องใช้อะแดปเตอร์สำหรับรายการแบบง่าย และไม่ต้องเชื่อมโยงเค้าโครงกับตรรกะด้วยตนเอง

ผลลัพธ์คือ ไฟล์น้อยลงและบั๊กน้อยลง

ทำงานร่วมกับมุมมองได้

คุณไม่จำเป็นต้องเขียนแอปทั้งหมดใหม่ Compose ทำงานร่วมกันได้กับระบบมุมมองแบบเดิม คุณสามารถฝัง Compose ในหน้าจอ XML ที่มีอยู่ หรือฝังมุมมองใน Compose

วิธีนี้ช่วยให้ทีมย้ายระบบได้ทีละน้อย

สิ่งที่ต้องมี

หากต้องการใช้ Compose คุณต้องมี:

แอนดรอยด์ สตูดิโอเวอร์ชันใหม่พอสมควร
การอ้างอิง Compose ในไฟล์ Gradle
กิจกรรมที่เรียกใช้ setContent { } เพื่อโฮสต์ composables

หน้าจอขนาดเล็ก

นี่คือหน้าจอ Compose ขั้นต่ำที่สมบูรณ์ setContent เป็นสะพานเชื่อมจาก Activity ของ Android เข้าสู่โลกของ Compose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

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

ข้อใดอธิบาย Jetpack Compose ได้ดีที่สุด

สรุป

คุณได้เรียนรู้ว่า Jetpack Compose คือชุดเครื่องมือส่วนติดต่อผู้ใช้ที่เน้น Kotlin และใช้แนวทางประกาศผลลัพธ์ แนวคิดสำคัญมีดังนี้:

ส่วนติดต่อผู้ใช้สร้างจากฟังก์ชัน @Composable
ไม่ต้องใช้ XML และไม่ต้องใช้ findViewById
UI = f(state) — เมื่อเปลี่ยนสถานะ Compose จะวาดใหม่

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

บทเรียน “Jetpack Compose คืออะไร” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Jetpack Compose คืออะไร”

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

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

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

บทเรียน “Jetpack Compose คืออะไร” ใช้เวลานานแค่ไหน

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

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

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

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

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