התחלה מהירה

כדי ליהנות מחוויית הפיתוח הטובה ביותר עם Compose, כדאי להוריד ולהתקין את Android Studio. הוא כולל הרבה תכונות חכמות של עורך, כמו תבניות פרויקטים חדשות ואפשרות להציג תצוגה מקדימה מיידית של ממשק המשתמש והאנימציות של Compose.

הורדת Android Studio

בעזרת ההוראות הבאות תוכלו ליצור פרויקט אפליקציה חדש ב-Compose, להגדיר את Compose לפרויקט אפליקציה קיים או לייבא אפליקציה לדוגמה שנכתבה ב-Compose.

יצירת אפליקציה חדשה עם תמיכה ב-Compose

אם רוצים להתחיל פרויקט חדש שכולל תמיכה ב-Compose כברירת מחדל, אפשר להיעזר בתבניות השונות של פרויקטים ב-Android Studio. כדי ליצור פרויקט חדש עם הגדרה נכונה של Compose:

1. אם אתם נמצאים בחלון Welcome to Android Studio, לוחצים על Start a new Android Studio project. אם כבר פתחתם פרויקט ב-Android Studio, תוכלו לבחור באפשרות קובץ > חדש > פרויקט חדש בסרגל התפריטים.
2. בחלון Select a Project Template, בוחרים באפשרות Empty Activity ולוחצים על Next.
3. בחלון Configure your project (הגדרת הפרויקט), מבצעים את הפעולות הבאות:
   1. מגדירים את השם, שם החבילה ומיקום השמירה כרגיל. שימו לב שבתפריט הנפתח Language, האפשרות היחידה שזמינה היא Kotlin כי Jetpack Compose פועל רק עם כיתות שנכתבו ב-Kotlin.
   2. בתפריט Minimum API level drop-down בוחרים ברמת API 21 ואילך.
4. לוחצים על סיום.

עכשיו אתם מוכנים להתחיל לפתח אפליקציה באמצעות Jetpack Compose. כדי להתחיל לעבוד עם ערכת הכלים ולגלות מה אפשר לעשות איתה, כדאי לעיין במדריך ל-Jetpack Compose.

הגדרת Compose לאפליקציה קיימת

קודם כול, מגדירים את המהדר של Compose באמצעות הפלאגין Gradle של Compose Compiler.

לאחר מכן, מוסיפים את ההגדרה הבאה לקובץ build.gradle של האפליקציה:

android {
    buildFeatures {
        compose true
    }
}

android {
    buildFeatures {
        compose = true
    }
}

הגדרת הדגל compose לערך true בתוך הבלוק BuildFeatures של Android מאפשרת להשתמש בפונקציונליות של 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. אם אתם נמצאים בחלון Welcome to Android Studio, בוחרים באפשרות Import an Android code sample. אם כבר יש לכם פרויקט פתוח ב-Android Studio, תוכלו לבחור באפשרות קובץ > חדש > ייבוא דוגמה בסרגל התפריטים.
2. בסרגל החיפוש בחלק העליון של האשף עיון בדוגמאות, מקלידים compose.
3. בוחרים באחת מאפליקציות הדוגמה של Jetpack Compose בתוצאות החיפוש ולוחצים על הבא.
4. משנים את Application name ואת Project location או משאירים את ערכי ברירת המחדל.
5. לוחצים על סיום.

Android Studio מוריד את האפליקציה לדוגמה לנתיב שציינתם ופותח את הפרויקט. לאחר מכן תוכלו לבדוק את MainActivity.kt בכל אחת מהדוגמאות כדי לראות את ממשקי ה-API של Jetpack Compose, כמו אנימציית מעבר הדרגתי, רכיבים מותאמים אישית, שימוש בטיפוגרפיה והצגת צבעים בהירים וחשוכים בתצוגה המקדימה בסביבת הפיתוח המשולבת (IDE).

במאמר הגדרת Jetpack Compose ב-Wear OS מוסבר איך משתמשים ב-Jetpack Compose ל-Wear OS.