استراتژی مهاجرت

اگر یک برنامه مبتنی بر View موجود دارید، ممکن است نخواهید تمام رابط کاربری آن را یکباره بازنویسی کنید. این صفحه به شما کمک می کند اجزای Compose جدید را به برنامه موجود خود اضافه کنید. برای شروع استفاده از Compose در برنامه خود، به تنظیم نوشتن برای یک برنامه موجود مراجعه کنید.

Jetpack Compose از همان ابتدا با قابلیت همکاری View طراحی شد. این عملکرد به این معنی است که می‌توانید برنامه مبتنی بر View موجود خود را به Compose منتقل کنید در حالی که هنوز می‌توانید ویژگی‌های جدیدی ایجاد کنید. برای انتقال به Compose، ما یک انتقال تدریجی را توصیه می‌کنیم که در آن Compose و Views به طور همزمان در پایگاه کد شما وجود دارند تا زمانی که برنامه شما به طور کامل در Compose قرار گیرد.

مراحل مهاجرت یک برنامه مبتنی بر View به Compose
شکل 1 . مراحل مهاجرت یک برنامه مبتنی بر View به Compose

برای انتقال برنامه خود به Compose، این مراحل را دنبال کنید:

  1. با Compose صفحات جدید بسازید.
  2. همانطور که در حال ساختن ویژگی‌ها هستید، عناصر قابل استفاده مجدد را شناسایی کنید و شروع به ایجاد یک کتابخانه از اجزای مشترک رابط کاربری کنید.
  3. ویژگی های موجود را در یک زمان یک صفحه جایگزین کنید.

با Compose صفحات جدید بسازید

استفاده از Compose برای ایجاد ویژگی‌های جدید که کل صفحه را در بر می‌گیرد، بهترین راه برای تشویق شما به پذیرش Compose است. با این استراتژی، می‌توانید ویژگی‌ها را اضافه کنید و از مزایای Compose بهره ببرید و در عین حال نیازهای تجاری شرکت خود را برآورده کنید.

صفحه جدیدی که در Compose نوشته شده است
شکل 2 . صفحه جدیدی که در Compose نوشته شده است

وقتی از Compose برای ایجاد صفحه‌های جدید در برنامه فعلی خود استفاده می‌کنید، همچنان تحت محدودیت‌های معماری برنامه خود کار می‌کنید. اگر از Fragments و مؤلفه Navigation استفاده می کنید، باید یک Fragment جدید ایجاد کنید و محتوای آن را در Compose داشته باشید.

برای استفاده از Compose in a Fragment، ComposeView در متد چرخه حیات onCreateView() Fragment خود برگردانید. ComposeView دارای یک متد setContent() است که در آن می توانید یک تابع ترکیبی ارائه دهید.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

برای اطلاعات بیشتر ComposeView در Fragments را ببینید.

اضافه کردن ویژگی های جدید در صفحه نمایش های موجود

یک صفحه نمایش موجود با نماها و نوشتن ترکیبی
شکل 3 . یک صفحه نمایش موجود با نماها و نوشتن ترکیبی

همچنین اگر ویژگی جدیدی که اضافه می‌کنید بخشی از صفحه موجود باشد، می‌توانید از نوشتن در یک صفحه مبتنی بر View موجود استفاده کنید. برای انجام این کار، یک ComposeView مانند هر View دیگر به سلسله مراتب View اضافه کنید.

برای مثال، بگویید می‌خواهید یک نمای فرزند به یک LinearLayout اضافه کنید. شما می توانید این کار را در XML به صورت زیر انجام دهید:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

پس از اینکه نما افزایش یافت، می توانید بعداً به ComposeView در سلسله مراتب ارجاع دهید و setContent() فراخوانی کنید.

برای کسب اطلاعات بیشتر در مورد ComposeView ، APIهای Interoperability را بررسی کنید.

یک کتابخانه از اجزای مشترک رابط کاربری بسازید

همانطور که در حال ساختن ویژگی ها با Compose هستید، به سرعت متوجه خواهید شد که در نهایت یک کتابخانه از اجزا می سازید. ایجاد یک کتابخانه از مؤلفه‌های مشترک رابط کاربری به شما این امکان را می‌دهد که یک منبع حقیقت واحد برای این مؤلفه‌ها در برنامه خود داشته باشید و قابلیت استفاده مجدد را ارتقا دهید. ویژگی هایی که می سازید می توانند به این کتابخانه بستگی داشته باشند. این تکنیک مخصوصاً اگر در حال ساختن یک سیستم طراحی سفارشی در Compose هستید مفید است.

بسته به اندازه برنامه شما، این کتابخانه می تواند یک بسته، ماژول یا ماژول کتابخانه جداگانه باشد. برای اطلاعات بیشتر در مورد سازماندهی ماژول ها در برنامه خود، راهنمای ماژولارسازی برنامه Android را بررسی کنید.

ویژگی های موجود را با Compose جایگزین کنید

علاوه بر استفاده از Compose برای ایجاد ویژگی‌های جدید، می‌خواهید به تدریج ویژگی‌های موجود در برنامه خود را برای استفاده از Compose تغییر دهید.

داشتن برنامه شما فقط برای نوشتن می‌تواند توسعه شما را تسریع کند و همچنین اندازه APK و زمان ساخت برنامه شما را کاهش دهد. برای اطلاعات بیشتر به Compare Compose and View performance مراجعه کنید.

صفحه نمایش های ساده

اولین مکان‌هایی که باید هنگام انتقال ویژگی‌های موجود به Compose نگاه کنید، صفحه‌های ساده هستند. صفحه‌های ساده می‌توانند یک صفحه خوش‌آمدگویی، یک صفحه تأیید یا یک صفحه تنظیمات باشند که در آن داده‌های نمایش داده‌شده در رابط کاربری نسبتاً ثابت هستند.

فایل XML زیر را بردارید:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

فایل XML را می توان در Compose در چند خط بازنویسی کرد:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

نمایش ترکیبی و صفحه نمایش نوشتن

صفحه‌ای که قبلاً حاوی کمی کد Compose است، یکی دیگر از کاندیدهای خوب برای مهاجرت کامل به Compose است. بسته به پیچیدگی صفحه، می توانید آن را به طور کامل به Compose منتقل کنید یا آن را تکه تکه انجام دهید. اگر صفحه با Compose در زیردرختی از سلسله مراتب UI شروع می شد، به انتقال عناصر UI ادامه می دهید تا زمانی که کل صفحه در Compose قرار گیرد. به این رویکرد، رویکرد پایین به بالا نیز گفته می شود.

رویکرد پایین به بالا برای انتقال نماهای مختلط و نوشتن رابط کاربری به نوشتن
شکل 4 . رویکرد پایین به بالا برای انتقال نماهای مختلط و نوشتن رابط کاربری به نوشتن

حذف قطعات و جزء ناوبری

زمانی که بتوانید همه بخش‌های خود را حذف کرده و با ترکیب‌های قابل ترکیب در سطح صفحه مربوطه جایگزین کنید، می‌توانید به «نوشتن پیمایش» مهاجرت کنید. ترکیب‌پذیرهای سطح صفحه نمایش می‌توانند حاوی ترکیبی از نوشتن و مشاهده محتوا باشند، اما برای فعال کردن مهاجرت نوشتن ناوبری، همه مقصدهای پیمایش باید قابل تنظیم باشند. تا آن زمان، باید به استفاده از مولفه ناوبری مبتنی بر قطعه در پایگاه کد ترکیبی View و Compose خود ادامه دهید. برای اطلاعات بیشتر به انتقال ناوبری Jetpack به نوشتن ناوبری مراجعه کنید.

منابع اضافی

منابع اضافی زیر را بررسی کنید تا درباره انتقال برنامه مبتنی بر View موجود خود به Compose اطلاعات بیشتری کسب کنید:

مراحل بعدی

اکنون که استراتژی را می‌دانید که می‌توانید برای انتقال برنامه مبتنی بر View فعلی خود انتخاب کنید، APIهای Interoperability را بررسی کنید تا بیشتر بدانید.

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