ดาวน์โหลดและติดตั้ง Android Studio เพื่อรับประสบการณ์การพัฒนาด้วย Compose ที่ดีที่สุด ซึ่งมีฟีเจอร์เครื่องมือแก้ไขอัจฉริยะมากมาย เช่น เทมเพลตโปรเจ็กต์ใหม่ และความสามารถในการแสดงตัวอย่าง UI และภาพเคลื่อนไหวของ Compose ได้ทันที
ทำตามวิธีการเหล่านี้เพื่อสร้างโปรเจ็กต์แอป Compose ใหม่ ตั้งค่า Compose สำหรับโปรเจ็กต์แอปที่มีอยู่ หรือนำเข้าแอปตัวอย่างที่เขียนด้วย Compose
สร้างแอปใหม่ที่รองรับ Compose
หากต้องการเริ่มโปรเจ็กต์ใหม่ที่รองรับ Compose โดยค่าเริ่มต้น Android Studio มีเทมเพลตโปรเจ็กต์ต่างๆ ที่จะช่วยให้คุณเริ่มต้นใช้งานได้ หากต้องการสร้างโปรเจ็กต์ใหม่ที่มีการตั้งค่า Compose อย่างถูกต้อง ให้ทำดังนี้
- หากอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio ให้คลิกเริ่มโปรเจ็กต์ Android Studio ใหม่ หากคุณเปิดโปรเจ็กต์ Android Studio อยู่แล้ว ให้เลือกไฟล์ > ใหม่ > โปรเจ็กต์ใหม่จากแถบเมนู
- ในหน้าต่างเลือกเทมเพลตโปรเจ็กต์ ให้เลือกกิจกรรมว่างเปล่า แล้วคลิกถัดไป
- ในหน้าต่างกำหนดค่าโปรเจ็กต์ ให้ทำดังนี้
- ตั้งค่าชื่อ ชื่อแพ็กเกจ และตำแหน่งบันทึกตามปกติ โปรดทราบว่าในเมนูแบบเลื่อนลงภาษา Kotlin เป็นตัวเลือกเดียวที่พร้อมใช้งาน เนื่องจาก Jetpack Compose จะใช้ได้เฉพาะกับคลาสที่เขียนด้วย Kotlin เท่านั้น
- ในเมนูเมนูแบบเลื่อนลงของ API ระดับต่ำสุด ให้เลือก API ระดับ 21 ขึ้นไป
- คลิกเสร็จสิ้น
ตอนนี้คุณก็พร้อมที่จะเริ่มพัฒนาแอปโดยใช้ Jetpack Compose แล้ว หากต้องการช่วยให้คุณเริ่มต้นใช้งานและเรียนรู้เกี่ยวกับสิ่งที่คุณทำได้ด้วยชุดเครื่องมือนี้ โปรดลองทำบทแนะนำ Jetpack Compose
ตั้งค่า Compose สำหรับแอปที่มีอยู่
ก่อนอื่น ให้กำหนดค่าคอมไพเลอร์ Compose โดยใช้ปลั๊กอิน Gradle ของคอมไพเลอร์ Compose
จากนั้นเพิ่มคำจำกัดความต่อไปนี้ลงในไฟล์ build.gradle
ของแอป
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
การตั้งค่าสถานะ compose
เป็น true
ภายในบล็อก BuildFeatures
ของ Android
จะเปิดใช้ฟังก์ชันการทำงานของ Compose ใน Android Studio
สุดท้าย ให้เพิ่ม Compose BOM และชุดย่อยของการอ้างอิงไลบรารี Compose ที่คุณต้องการลงในการอ้างอิงจากบล็อกต่อไปนี้
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2025.05.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.10.1'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2025.05.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.10.1")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
ลองใช้แอปตัวอย่างของ Jetpack Compose
วิธีที่เร็วที่สุดในการทดลองใช้ความสามารถของ Jetpack Compose คือการลองใช้แอปตัวอย่าง Jetpack Compose ที่โฮสต์ไว้ใน GitHub หากต้องการนำเข้าโปรเจ็กต์แอปตัวอย่างจาก Android Studio ให้ทำดังนี้
- หากอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio ให้เลือกนำเข้า ตัวอย่างโค้ด Android หากเปิดโปรเจ็กต์ Android Studio อยู่แล้ว ให้เลือกไฟล์ > ใหม่ > นำเข้าตัวอย่างจากแถบเมนู
- ในแถบค้นหาที่ด้านบนของวิซาร์ดเรียกดูตัวอย่าง ให้พิมพ์ "เขียน"
- เลือกแอปตัวอย่าง Jetpack Compose จากผลการค้นหา แล้วคลิกถัดไป
- เปลี่ยนชื่อแอปพลิเคชันและตำแหน่งโปรเจ็กต์ หรือจะใช้ค่าเริ่มต้นก็ได้
- คลิกเสร็จสิ้น
Android Studio จะดาวน์โหลดแอปตัวอย่างไปยังเส้นทางที่คุณระบุและเปิดโปรเจ็กต์
จากนั้นคุณสามารถตรวจสอบ MainActivity.kt
ในแต่ละตัวอย่างเพื่อดู
API ของ Jetpack Compose เช่น ภาพเคลื่อนไหวแบบครอสเฟด คอมโพเนนต์ที่กำหนดเอง การใช้
การพิมพ์ และการแสดงสีอ่อนและสีเข้มในตัวอย่างใน IDE
หากต้องการใช้ Jetpack Compose สำหรับ Wear OS โปรดดูตั้งค่า Jetpack Compose บน Wear OS
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- การไปยังส่วนต่างๆ ด้วย Compose
- การทดสอบเลย์เอาต์การเขียน
- รีแอ็กต่อโฟกัส