การเริ่มใช้งานอย่างง่าย

ดาวน์โหลดและติดตั้ง Android Studio เพื่อรับประสบการณ์การพัฒนาด้วย Compose ที่ดีที่สุด ซึ่งประกอบด้วยฟีเจอร์เครื่องมือแก้ไขอัจฉริยะมากมาย เช่น เทมเพลตโปรเจ็กต์ใหม่และความสามารถในการแสดงตัวอย่าง UI และภาพเคลื่อนไหวของเครื่องมือเขียนทันที

ดาวน์โหลด Android Studio

ทําตามวิธีการเหล่านี้เพื่อสร้างโปรเจ็กต์แอป Compose ใหม่ ตั้งค่า Compose สําหรับโปรเจ็กต์แอปที่มีอยู่ หรือนําเข้าแอปตัวอย่างที่เขียนด้วย Compose

สร้างแอปใหม่ซึ่งรองรับการเขียน

หากต้องการเริ่มโปรเจ็กต์ใหม่ที่รองรับ Compose โดยค่าเริ่มต้น Android Studio มีเทมเพลตโปรเจ็กต์ต่างๆ เพื่อช่วยให้คุณเริ่มต้นใช้งาน หากต้องการสร้างโปรเจ็กต์ใหม่ที่ตั้งค่า Compose อย่างถูกต้อง ให้ทำดังนี้

1. หากคุณอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio ให้คลิกเริ่มโปรเจ็กต์ Android Studio ใหม่ หากเปิดโปรเจ็กต์ Android Studio ไว้แล้ว ให้ไปที่ไฟล์ > ใหม่ > โปรเจ็กต์ใหม่จากแถบเมนู
2. ในหน้าต่างเลือกเทมเพลตโปรเจ็กต์ ให้เลือกกิจกรรมว่าง แล้วคลิกถัดไป
3. ในหน้าต่างกําหนดค่าโปรเจ็กต์ ให้ทําดังนี้
   1. ตั้งค่าชื่อ ชื่อแพ็กเกจ และตำแหน่งบันทึกตามปกติ โปรดทราบว่าในเมนูแบบเลื่อนลงภาษา Kotlin เป็นตัวเลือกเดียวที่ใช้ได้ เนื่องจาก Jetpack Compose ใช้งานได้กับคลาสที่เขียนด้วย Kotlin เท่านั้น
   2. ในเมนูเมนูแบบเลื่อนลงระดับ API ขั้นต่ำ ให้เลือก API ระดับ 21 ขึ้นไป
4. คลิกเสร็จสิ้น

ตอนนี้คุณก็พร้อมที่จะเริ่มพัฒนาแอปโดยใช้ Jetpack Compose แล้ว ลองดูบทแนะนำเกี่ยวกับ Compose เพื่อช่วยในการเริ่มต้นใช้งานและดูสิ่งที่คุณทำได้ด้วยชุดเครื่องมือนี้

ตั้งค่าการเขียนสำหรับแอปที่มีอยู่

ก่อนอื่น ให้กำหนดค่าคอมไพเลอร์ Compose โดยใช้ปลั๊กอิน Gradle ของคอมไพเลอร์ Compose

จากนั้นเพิ่มคําจํากัดความต่อไปนี้ลงในไฟล์ build.gradle ของแอป

android {
    buildFeatures {
        compose true
    }
}

android {
    buildFeatures {
        compose = true
    }
}

การตั้งค่า Flag compose เป็น true ภายในบล็อก Android BuildFeatures จะเปิดใช้ฟังก์ชันการทำงาน Compose ใน Android Studio

สุดท้าย ให้เพิ่ม BOM ของ Compose และชุดย่อยของไลบรารี Compose ที่ต้องใช้ในการพึ่งพาจากบล็อกต่อไปนี้

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'

}

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 ให้ทําดังนี้

1. หากคุณอยู่ในหน้าต่างยินดีต้อนรับสู่ Android Studio ให้เลือกนําเข้าตัวอย่างโค้ด Android หากเปิดโปรเจ็กต์ Android Studio ไว้แล้ว ให้ไปที่ไฟล์ > ใหม่ > นําเข้าตัวอย่างจากแถบเมนู
2. ในแถบค้นหาใกล้กับด้านบนของวิซาร์ดเรียกดูตัวอย่างเพลง ให้พิมพ์ "compose"
3. เลือกแอปตัวอย่าง Jetpack Compose รายการใดรายการหนึ่งจากผลการค้นหา แล้วคลิกถัดไป
4. เปลี่ยนชื่อแอปพลิเคชันและตำแหน่งโปรเจ็กต์ หรือจะใช้ค่าเริ่มต้นก็ได้
5. คลิกเสร็จสิ้น

Android Studio จะดาวน์โหลดแอปตัวอย่างไปยังเส้นทางที่คุณระบุและเปิดโปรเจ็กต์ จากนั้นคุณสามารถตรวจสอบ MainActivity.kt ในแต่ละตัวอย่างเพื่อดู API ของ Jetpack Compose เช่น ภาพเคลื่อนไหวแบบ Crossfade, คอมโพเนนต์ที่กำหนดเอง, การใช้แบบอักษร และการแสดงสีอ่อนและสีเข้มในตัวอย่างใน IDE

หากต้องการใช้ Jetpack Compose สำหรับ Wear OS โปรดดูตั้งค่า Jetpack Compose ใน Wear OS