البدء بسرعة

للحصول على أفضل تجربة تطوير باستخدام Compose، نزِّل Android Studio وثبِّته. يتضمّن هذا الإصدار العديد من ميزات المحرّر الذكي، مثل نماذج المشاريع الجديدة وإمكانية معاينة واجهة مستخدم Compose والرسوم المتحركة على الفور.

الحصول على "استوديو Android"

اتّبِع التعليمات التالية لإنشاء مشروع تطبيق جديد باستخدام Compose أو إعداد Compose لمشروع تطبيق حالي أو استيراد نموذج تطبيق مكتوب باستخدام Compose.

إنشاء تطبيق جديد يتوافق مع Compose

إذا أردت بدء مشروع جديد يتضمّن دعم Compose تلقائيًا، يتضمّن "استوديو Android" نماذج مشاريع متنوعة لمساعدتك في البدء. لإنشاء مشروع جديد تم إعداد Compose فيه بشكل صحيح، اتّبِع الخطوات التالية:

  1. إذا كنت في نافذة مرحبًا بك في "استوديو Android"، انقر على بدء مشروع جديد في "استوديو Android". إذا كان لديك مشروع مفتوح في Android Studio، اختَر ملف (File) > جديد (New) > مشروع جديد (New Project) من شريط القوائم.
  2. في نافذة اختيار نموذج مشروع، اختَر نشاط فارغ وانقر على التالي.
  3. في نافذة ضبط مشروعك، اتّبِع الخطوات التالية:
    1. اضبط الاسم واسم الحزمة وموقع الحفظ كما تفعل عادةً. يُرجى العِلم أنّه في القائمة المنسدلة اللغة، Kotlin هي الخيار الوحيد المتاح لأنّ Jetpack Compose لا تعمل إلا مع الفئات المكتوبة بلغة Kotlin.
    2. في قائمة القائمة المنسدلة "الحد الأدنى لمستوى واجهة برمجة التطبيقات"، اختَر المستوى 21 من واجهة برمجة التطبيقات أو مستوى أعلى.
  4. انقر على إنهاء.

أنت الآن جاهز لبدء تطوير تطبيق باستخدام 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"، اتّبِع الخطوات التالية:

  1. إذا كنت في نافذة مرحبًا بك في "استوديو Android"، اختَر استيراد عيّنة رمز Android. إذا كان لديك مشروع Android Studio مفتوح، اختَر ملف > جديد > استيراد نموذج من شريط القوائم.
  2. في شريط البحث بالقرب من أعلى معالج استعراض النماذج، اكتب "إنشاء".
  3. اختَر أحد تطبيقات Jetpack Compose النموذجية من نتائج البحث وانقر على التالي.
  4. يمكنك تغيير اسم التطبيق وموقع المشروع أو الاحتفاظ بالقيم التلقائية.
  5. انقر على إنهاء.

ينزّل Android Studio التطبيق النموذجي إلى المسار الذي حدّدته ويفتح المشروع. يمكنك بعد ذلك فحص MainActivity.kt في كل مثال للاطّلاع على واجهات برمجة تطبيقات Jetpack Compose، مثل الرسوم المتحركة للتلاشي التدريجي والمكوّنات المخصّصة واستخدام أسلوب الخط وعرض الألوان الفاتحة والداكنة في المعاينة داخل بيئة التطوير المتكاملة.

لاستخدام Jetpack Compose على Wear OS، اطّلِع على إعداد Jetpack Compose على Wear OS.