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

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

ดาวน์โหลด Android Studio

ทำตามวิธีการเหล่านี้เพื่อสร้างโปรเจ็กต์แอป Compose ใหม่ ตั้งค่า 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 แล้ว หากต้องการช่วยให้คุณเริ่มต้นใช้งานและเรียนรู้เกี่ยวกับสิ่งที่คุณทำได้ด้วยชุดเครื่องมือนี้ โปรดลองทำบทแนะนำ 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 ให้ทำดังนี้

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

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

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