للحصول على أفضل تجربة تطوير باستخدام Compose، نزِّل Android Studio وثبِّته. يتضمّن هذا الإصدار العديد من ميزات المحرّر الذكي، مثل نماذج المشاريع الجديدة وإمكانية معاينة واجهة مستخدم Compose والرسوم المتحركة على الفور.
اتّبِع التعليمات التالية لإنشاء مشروع تطبيق جديد باستخدام Compose أو إعداد Compose لمشروع تطبيق حالي أو استيراد نموذج تطبيق مكتوب باستخدام Compose.
إنشاء تطبيق جديد يتوافق مع Compose
إذا أردت بدء مشروع جديد يتضمّن دعم Compose تلقائيًا، يتضمّن "استوديو Android" نماذج مشاريع متنوعة لمساعدتك في البدء. لإنشاء مشروع جديد تم إعداد Compose فيه بشكل صحيح، اتّبِع الخطوات التالية:
- إذا كنت في نافذة مرحبًا بك في "استوديو Android"، انقر على بدء مشروع جديد في "استوديو Android". إذا كان لديك مشروع مفتوح في Android Studio، اختَر ملف (File) > جديد (New) > مشروع جديد (New Project) من شريط القوائم.
- في نافذة اختيار نموذج مشروع، اختَر نشاط فارغ وانقر على التالي.
- في نافذة ضبط مشروعك، اتّبِع الخطوات التالية:
- اضبط الاسم واسم الحزمة وموقع الحفظ كما تفعل عادةً. يُرجى العِلم أنّه في القائمة المنسدلة اللغة، Kotlin هي الخيار الوحيد المتاح لأنّ Jetpack Compose لا تعمل إلا مع الفئات المكتوبة بلغة Kotlin.
- في قائمة القائمة المنسدلة "الحد الأدنى لمستوى واجهة برمجة التطبيقات"، اختَر المستوى 21 من واجهة برمجة التطبيقات أو مستوى أعلى.
- انقر على إنهاء.
أنت الآن جاهز لبدء تطوير تطبيق باستخدام Jetpack Compose. لمساعدتك في البدء والتعرّف على ما يمكنك فعله باستخدام مجموعة الأدوات، جرِّب البرنامج التعليمي حول Jetpack Compose.
إعداد Compose لتطبيق حالي
أولاً، اضبط إعدادات برنامج التجميع Compose باستخدام المكوّن الإضافي Compose Compiler Gradle.
بعد ذلك، أضِف التعريف التالي إلى ملف build.gradle
في تطبيقك:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
يؤدي ضبط العلامة compose
على true
داخل حزمة BuildFeatures
في Android إلى تفعيل وظائف Compose في "استوديو Android".
أخيرًا، أضِف قائمة مواد Compose الأساسية ومجموعة فرعية من تبعيات مكتبة Compose التي تحتاج إليها إلى التبعيات من خلال الحظر التالي:
Groovy
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 Compose
أسرع طريقة لتجربة إمكانات Jetpack Compose هي من خلال تجربة تطبيقات Jetpack Compose النموذجية المستضافة على GitHub. لاستيراد مشروع تطبيق نموذجي من "استوديو Android"، اتّبِع الخطوات التالية:
- إذا كنت في نافذة مرحبًا بك في "استوديو Android"، اختَر استيراد عيّنة رمز Android. إذا كان لديك مشروع Android Studio مفتوح، اختَر ملف > جديد > استيراد نموذج من شريط القوائم.
- في شريط البحث بالقرب من أعلى معالج استعراض النماذج، اكتب "إنشاء".
- اختَر أحد تطبيقات Jetpack Compose النموذجية من نتائج البحث وانقر على التالي.
- يمكنك تغيير اسم التطبيق وموقع المشروع أو الاحتفاظ بالقيم التلقائية.
- انقر على إنهاء.
ينزّل Android Studio التطبيق النموذجي إلى المسار الذي حدّدته ويفتح المشروع. يمكنك بعد ذلك فحص MainActivity.kt
في كل مثال للاطّلاع على واجهات برمجة تطبيقات Jetpack Compose، مثل الرسوم المتحركة للتلاشي التدريجي والمكوّنات المخصّصة واستخدام أسلوب الخط وعرض الألوان الفاتحة والداكنة في المعاينة داخل بيئة التطوير المتكاملة.
لاستخدام Jetpack Compose على Wear OS، اطّلِع على إعداد Jetpack Compose على Wear OS.
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عندما تكون JavaScript غير مفعّلة
- التنقّل باستخدام Compose
- اختبار تنسيق "أنا من كتب هذا المحتوى"
- التفاعل مع وضع التركيز