ดาวน์โหลดและติดตั้ง Android Studio เพื่อรับประสบการณ์การพัฒนาด้วย Compose ที่ดีที่สุด ซึ่งมีฟีเจอร์เครื่องมือแก้ไขอัจฉริยะมากมาย เช่น เทมเพลตโปรเจ็กต์ใหม่ และความสามารถในการดูตัวอย่าง UI และภาพเคลื่อนไหวของการเขียนได้ทันที
ทําตามวิธีการเหล่านี้เพื่อสร้างโปรเจ็กต์แอป 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 โดยใช้ปลั๊กอิน Gradle ของคอมไพเลอร์ Compose
จากนั้นเพิ่มคำจำกัดความต่อไปนี้ลงในไฟล์ build.gradle
ของแอป
android {
buildFeatures {
compose true
}
}
android {
buildFeatures {
compose = true
}
}
การตั้งค่า Flag compose
เป็น true
ภายในบล็อก Android BuildFeatures
จะเปิดใช้ฟังก์ชันการเขียนใน Android Studio
สุดท้าย ให้เพิ่ม BOM ของ Compose และชุดย่อยของไลบรารี Compose ที่ต้องใช้ในการพึ่งพาจากบล็อกต่อไปนี้
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2025.02.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.0'
// 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'
}
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2025.02.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.0")
// 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 ไว้แล้ว ให้ไปที่ไฟล์ > ใหม่ > นําเข้าตัวอย่างจากแถบเมนู
- ในแถบค้นหาใกล้กับด้านบนของวิซาร์ดเรียกดูตัวอย่างเพลง ให้พิมพ์ "compose"
- เลือกแอปตัวอย่าง Jetpack Compose รายการใดรายการหนึ่งจากผลการค้นหา แล้วคลิกถัดไป
- เปลี่ยนชื่อแอปพลิเคชันและตำแหน่งโปรเจ็กต์ หรือจะใช้ค่าเริ่มต้นก็ได้
- คลิกเสร็จสิ้น
Android Studio จะดาวน์โหลดแอปตัวอย่างไปยังเส้นทางที่คุณระบุและเปิดโปรเจ็กต์ จากนั้นคุณสามารถตรวจสอบ MainActivity.kt
ในตัวอย่างแต่ละรายการเพื่อดู API ของ Jetpack Compose เช่น ภาพเคลื่อนไหวครอสเฟด คอมโพเนนต์ที่กำหนดเอง การใช้ภาพพิมพ์ และการแสดงสีอ่อนและสีเข้มในตัวอย่างใน IDE
หากต้องการใช้ Jetpack Compose สำหรับ Wear OS โปรดดูตั้งค่า Jetpack Compose ใน Wear OS
ไม่มีคำแนะนำในขณะนี้
ลองลงชื่อเข้าใช้บัญชี Google