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