כדי ליהנות מחוויית הפיתוח הטובה ביותר באמצעות Compose, מומלץ להוריד ולהתקין את Android Studio. היא כוללת הרבה תכונות של עורך חכם, כמו תבניות חדשות לפרויקטים ואפשרות להציג בתצוגה מקדימה באופן מיידי את ממשק המשתמש והאנימציות של Compose.
כדי ליצור פרויקט חדש של אפליקציית Compose, להגדיר את Compose לפרויקט קיים של אפליקציה או לייבא אפליקציה לדוגמה שנכתבה ב-Compose, צריך לפעול לפי ההוראות הבאות.
יצירת אפליקציה חדשה עם תמיכה ב-Compose
אם רוצים להתחיל פרויקט חדש שכולל תמיכה ב-Compose כברירת מחדל, אפשר להשתמש בתבניות פרויקט שונות ב-Android Studio. כדי ליצור פרויקט חדש עם הגדרה נכונה של Compose, פועלים לפי השלבים הבאים:
- אם אתם נמצאים בחלון Welcome to Android Studio (ברוכים הבאים ל-Android Studio), לוחצים על Start a new Android Studio project (התחלת פרויקט חדש ב-Android Studio). אם כבר פתוח פרויקט ב-Android Studio, בוחרים באפשרות File > New > New Project (קובץ > חדש > פרויקט חדש) מסרגל התפריטים.
- בחלון Select a Project Template, בוחרים באפשרות Empty Activity ולוחצים על Next.
- בחלון Configure your project (הגדרת הפרויקט), מבצעים את הפעולות הבאות:
- מגדירים את השם, שם החבילה ומיקום השמירה כמו בדרך כלל. שימו לב שבתפריט הנפתח שפה, האפשרות Kotlin היא האפשרות היחידה שזמינה כי Jetpack Compose פועל רק עם מחלקות שנכתבו ב-Kotlin.
- בתפריט הנפתח רמת ה-API המינימלית, בוחרים ברמת API 21 ומעלה.
- לוחצים על סיום.
עכשיו אפשר להתחיל לפתח אפליקציה באמצעות Jetpack Compose. כדי לעזור לכם להתחיל לעבוד עם ערכת הכלים וללמוד מה אפשר לעשות איתה, אתם יכולים לנסות את המדריך ל-Jetpack Compose.
הגדרת Compose באפליקציה קיימת
קודם כול, מגדירים את מהדר Compose באמצעות הפלאגין Compose Compiler Gradle.
לאחר מכן, מוסיפים את ההגדרה הבאה לקובץ build.gradle
של האפליקציה:
מגניב
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
הגדרת הדגל compose
לערך true
בתוך הבלוק BuildFeatures
של Android מאפשרת פונקציונליות של Compose ב-Android Studio.
לבסוף, מוסיפים את ה-BOM של Compose ואת קבוצת המשנה של יחסי התלות בספריית Compose שדרושים לכם ליחסי התלות מהבלוק הבא:
מגניב
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 פיתוח נייטיב
הדרך הכי מהירה להתנסות ביכולות של Jetpack Compose היא לנסות אפליקציות לדוגמה של Jetpack Compose שמתארחות ב-GitHub. כדי לייבא פרויקט של אפליקציה לדוגמה מ-Android Studio, פועלים לפי השלבים הבאים:
- אם אתם נמצאים בחלון Welcome to Android Studio (ברוכים הבאים ל-Android Studio), בוחרים באפשרות Import an Android code sample (ייבוא של דוגמת קוד ל-Android). אם כבר פתוח פרויקט ב-Android Studio, בוחרים באפשרות File > New > Import Sample (קובץ > חדש > ייבוא דוגמה) מסרגל התפריטים.
- בסרגל החיפוש שקרוב לחלק העליון של האשף Browse Samples, מקלידים compose.
- בוחרים אחת מהאפליקציות לדוגמה של Jetpack Compose מתוצאות החיפוש ולוחצים על הבא.
- אפשר לשנות את שם האפליקציה ואת מיקום הפרויקט או להשאיר את ערכי ברירת המחדל.
- לוחצים על סיום.
מערכת Android Studio מורידה את אפליקציית הדוגמה לנתיב שציינתם ופותחת את הפרויקט. אחר כך אפשר לבדוק את MainActivity.kt
בכל אחת מהדוגמאות כדי לראות ממשקי API של Jetpack Compose, כמו אנימציית מעבר הדרגתי, רכיבים בהתאמה אישית, שימוש בטיפוגרפיה והצגת צבעים בהירים וכהים בתצוגה המקדימה ב-IDE.
כדי להשתמש ב-Jetpack Compose ל-Wear OS, אפשר לעיין במאמר בנושא הגדרת Jetpack Compose ב-Wear OS.
מומלץ עבורך
- הערה: טקסט הקישור מוצג כש-JavaScript מושבת
- ניווט באמצעות התכונה 'יצירה'
- בדיקת הפריסה של חלון הכתיבה
- תגובה למצב פוקוס