התחלה מהירה

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

להורדת Android Studio

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

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

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

  1. אם בחלון Welcome to Android Studio, לוחצים על Start a new Studio project. אם כבר יש לכם פרויקט פתוח של Android Studio, בוחרים באפשרות File > New > New Project בסרגל התפריטים.
  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 פיתוח נייטיב.

הגדרה של 'כתיבה' לאפליקציה קיימת

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

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

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

הגדרת הדגל compose לערך true בתוך הבלוק BuildFeatures של Android מאפשרת להשתמש בפונקציונליות של Compose ב-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:

  1. אם אתם נמצאים בחלון Welcome to Android Studio, בוחרים באפשרות Import an Android code sample. אם כבר יש לכם פרויקט פתוח של Android Studio, בסרגל התפריטים בוחרים באפשרות File > New >Import Sample (קובץ > חדש > ייבוא דוגמה).
  2. בסרגל החיפוש שבחלק העליון של האשף Browse Samples, מקלידים "compose".
  3. בוחרים באחת מאפליקציות הדוגמה של Jetpack Compose בתוצאות החיפוש ולוחצים על הבא.
  4. משנים את Application name ואת Project location או משאירים את ערכי ברירת המחדל.
  5. לוחצים על סיום.

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

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