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

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

ดาวน์โหลด Android Studio

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

สร้างแอปใหม่ที่รองรับ Compose

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

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

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

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

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

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

ดึงดูด

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

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

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

ดึงดูด

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.06.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:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.0'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // 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.06.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:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.0")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // 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 ในแต่ละตัวอย่างเพื่อดู Jetpack Compose API เช่น ภาพเคลื่อนไหวครอสเฟด คอมโพเนนต์ที่กำหนดเอง การพิมพ์ และแสดงสีอ่อนและสีเข้มในตัวอย่างใน IDE

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