البدء بسرعة

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

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

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

إنشاء تطبيق جديد متوافق مع ميزة "الإنشاء"

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

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

يمكنك الآن بدء تطوير تطبيق باستخدام Jetpack Compose. لمساعدتك في البدء والتعرّف على الإجراءات التي يمكنك اتّخاذها باستخدام مجموعة الأدوات، يمكنك الاطّلاع على الدليل التعليمي لـ Jetpack Compose.

إعداد ميزة "الإنشاء" لتطبيق حالي

أولاً، عليك ضبط مُجمِّع Compose باستخدام مكوّن Gradle الإضافي لـ Compose Compiler.

بعد ذلك، أضِف التعريف التالي إلى ملف build.gradle في تطبيقك:

android {
    buildFeatures {
        compose true
    }
}

android {
    buildFeatures {
        compose = true
    }
}

يؤدي ضبط العلامة compose على true داخل مجموعة Android BuildFeatures إلى تفعيل وظيفة الإنشاء في "استوديو Android".

أخيرًا، أضِف قائمة BOM الخاصة بتطبيق Compose والمجموعة الفرعية من تبعيات مكتبة Compose التي تحتاج إليها إلى تبعياتك من الكتلة التالية:

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'

}

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"، اتّبِع الخطوات التالية:

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

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

لاستخدام Jetpack Compose على نظام التشغيل Wear OS، يُرجى الاطّلاع على إعداد Jetpack Compose على نظام التشغيل Wear OS.