البدء بسرعة

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

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

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

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

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

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

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

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

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

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

رائع

android {
    buildFeatures {
        compose true
    }
}

Kotlin

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'

}

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

  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.