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