شروع سریع

برای بهترین تجربه در توسعه با Compose، Android Studio را دانلود و نصب کنید. این شامل بسیاری از ویژگی‌های ویرایشگر هوشمند ، مانند قالب‌های پروژه جدید و امکان پیش‌نمایش فوری نوشتن رابط کاربری و انیمیشن‌ها است.

اندروید استودیو را دریافت کنید

برای ایجاد یک پروژه برنامه جدید Compose، تنظیم Compose برای یک پروژه برنامه موجود یا وارد کردن یک برنامه نمونه نوشته شده در Compose، این دستورالعمل ها را دنبال کنید.

یک برنامه جدید با پشتیبانی از Compose ایجاد کنید

اگر می‌خواهید پروژه جدیدی را شروع کنید که به طور پیش‌فرض از Compose پشتیبانی می‌کند، Android Studio شامل قالب‌های مختلف پروژه است تا به شما در شروع کار کمک کند. برای ایجاد یک پروژه جدید که تنظیمات Compose را به درستی انجام داده است، به صورت زیر عمل کنید:

  1. اگر در پنجره خوش آمدید به Android Studio هستید، روی Start a new Android Studio کلیک کنید. اگر از قبل یک پروژه Android Studio باز دارید، File > New > New Project را از نوار منو انتخاب کنید.
  2. در پنجره Select a Project Template ، Empty Activity را انتخاب کرده و روی Next کلیک کنید.
  3. در پنجره Configure your project ، موارد زیر را انجام دهید:
    1. نام، نام بسته و ذخیره مکان را به طور معمول تنظیم کنید. توجه داشته باشید که در منوی کشویی Language ، Kotlin تنها گزینه موجود است زیرا Jetpack Compose فقط با کلاس‌های نوشته شده در Kotlin کار می‌کند.
    2. در منوی کشویی حداقل سطح API ، سطح API 21 یا بالاتر را انتخاب کنید.
  4. روی Finish کلیک کنید.

اکنون شما آماده شروع توسعه یک برنامه با استفاده از Jetpack Compose هستید. برای کمک به شروع کار و یادگیری در مورد کارهایی که می‌توانید با جعبه ابزار انجام دهید، آموزش Jetpack Compose را امتحان کنید.

نوشتن را برای یک برنامه موجود تنظیم کنید

ابتدا کامپایلر Compose را با استفاده از افزونه Compose Compiler Gradle پیکربندی کنید.

سپس، تعریف زیر را به فایل build.gradle برنامه خود اضافه کنید:

شیار 

android {
    buildFeatures {
        compose true
    }
}

کاتلین

android {
    buildFeatures {
        compose = true
    }
}

تنظیم پرچم compose روی true در بلوک Android BuildFeatures ، قابلیت نوشتن در Android Studio را فعال می کند.

در نهایت، Compose BOM و زیر مجموعه وابستگی های کتابخانه 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 میزبانی می‌شوند. برای وارد کردن نمونه پروژه برنامه از اندروید استودیو به صورت زیر عمل کنید:

  1. اگر در پنجره خوش آمدید به Android Studio هستید، گزینه Import an Code Code را انتخاب کنید. اگر قبلاً یک پروژه Android Studio باز دارید، File > New > Import Sample را از نوار منو انتخاب کنید.
  2. در نوار جستجو نزدیک بالای جادوگر Browse Samples ، «نوشتن» را تایپ کنید.
  3. یکی از برنامه های نمونه Jetpack Compose را از نتایج جستجو انتخاب کنید و روی Next کلیک کنید.
  4. یا نام برنامه و مکان پروژه را تغییر دهید یا مقادیر پیش فرض را حفظ کنید.
  5. روی Finish کلیک کنید.

Android Studio نمونه برنامه را در مسیری که شما مشخص کرده اید دانلود می کند و پروژه را باز می کند. سپس می‌توانید MainActivity.kt در هر یک از مثال‌ها بررسی کنید تا APIهای Jetpack Compose مانند انیمیشن crossfade، اجزای سفارشی، استفاده از تایپوگرافی و نمایش رنگ‌های روشن و تیره را در پیش‌نمایش درون IDE ببینید.

برای استفاده از Jetpack Compose برای Wear OS، به تنظیم Jetpack Compose در Wear OS مراجعه کنید.

{% کلمه به کلمه %} {% آخر کلمه %} {% کلمه به کلمه %} {% آخر کلمه %}