כדי ליהנות מחוויית הפיתוח הטובה ביותר עם Compose, כדאי להוריד ולהתקין את Android Studio. הוא כולל הרבה תכונות עריכה חכמות, כמו תבניות פרויקט חדשות ואפשרות לראות מיד תצוגה מקדימה של ממשק המשתמש ואנימציות של הכתיבה.
בעזרת ההוראות הבאות תוכלו ליצור פרויקט אפליקציה חדש ב-Compose, להגדיר את Compose לפרויקט אפליקציה קיים או לייבא אפליקציה לדוגמה שנכתבה ב-Compose.
יצירת אפליקציה חדשה עם תמיכה ב-Compose
אם רוצים להתחיל פרויקט חדש שכולל תמיכה ב-Compose כברירת מחדל, אפשר להיעזר בתבניות השונות של פרויקטים ב-Android Studio. כדי ליצור פרויקט חדש עם הגדרה נכונה של Compose:
- אם אתם נמצאים בחלון Welcome to Android Studio, לוחצים על Start a new Android Studio project. אם כבר פתחתם פרויקט ב-Android Studio, תוכלו לבחור באפשרות קובץ > חדש > פרויקט חדש בסרגל התפריטים.
- בחלון Select a Project Template, בוחרים באפשרות Empty Activity ולוחצים על Next.
- בחלון Configure your project (הגדרת הפרויקט), מבצעים את הפעולות הבאות:
- מגדירים את הערכים Name, Package name ו-Save location כרגיל. שימו לב שבתפריט הנפתח Language, האפשרות היחידה שזמינה היא Kotlin, כי Jetpack Compose פועל רק עם כיתות שנכתבו ב-Kotlin.
- בתפריט Minimum API level drop-down בוחרים ברמת API 21 ואילך.
- לוחצים על סיום.
עכשיו אתם מוכנים להתחיל לפתח אפליקציה באמצעות Jetpack Compose. כדי ללמוד מה אפשר לעשות עם ערכת הכלים, תוכלו להיעזר במדריך של Jetpack פיתוח נייטיב.
הגדרת 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:2025.02.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.0'
// 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:2025.02.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.0")
// 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:
- אם אתם נמצאים בחלון Welcome to Android Studio, בוחרים באפשרות Import an Android code sample. אם כבר יש לכם פרויקט פתוח ב-Android Studio, תוכלו לבחור באפשרות קובץ > חדש > ייבוא דוגמה בסרגל התפריטים.
- בסרגל החיפוש שבחלק העליון של האשף Browse Samples, מקלידים "compose".
- בוחרים אחת מהאפליקציות לדוגמה של 'Jetpack פיתוח נייטיב' מתוצאות החיפוש ולוחצים על Next.
- משנים את Application name ואת Project location או משאירים את ערכי ברירת המחדל.
- לוחצים על סיום.
Android Studio מוריד את האפליקציה לדוגמה לנתיב שציינתם ופותח את הפרויקט. לאחר מכן אפשר לבדוק את MainActivity.kt
בכל אחת מהדוגמאות כדי לראות ממשקי API של Jetpack Compose כמו אנימציה של עמעום הדרגתי, רכיבים מותאמים אישית, שימוש בטיפוגרפיה והצגת צבעים בהירים כהים בתצוגה המקדימה של סביבת הפיתוח המשולבת.
כדי להשתמש ב-Jetpack פיתוח נייטיב ל-Wear OS, כדאי לעיין במאמר איך מגדירים את Jetpack Compose ב-Wear OS.
אין המלצות כרגע.
אפשר לנסות להיכנס לחשבון Google.