استراتژی انتقال

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

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

مراحل انتقال برنامه مبتنی بر View به Compose
شکل ۱. مراحل انتقال برنامه مبتنی بر View به Compose

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

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

ساختن صفحه‌های جدید با Compose

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

صفحه جدیدی که با Compose نوشته شده است
شکل ۲. صفحه جدیدی که در «نوشتن» نوشته شده است

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

برای استفاده از «نوشتن» در «تکه»، ComposeView را در روش چرخه حیات onCreateView() «تکه» برگردانید. ‫ComposeView روشی setContent() دارد که در آن می‌توانید تابع ترکیب‌پذیر ارائه دهید.

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

برای کسب اطلاعات بیشتر، ComposeView در «تکه‌برنامه‌ها» را ببینید.

افزودن ویژگی‌های جدید به صفحه‌های موجود

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

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

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

<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>

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

برای کسب اطلاعات بیشتر درباره ComposeView، میاناهای برنامه‌سازی کاربردی قابلیت همکاری را بررسی کنید.

ساختن کتابخانه عناصر رابط کاربری رایج

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

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

جایگزین کردن ویژگی‌های موجود با «نوشتن»

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

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

صفحه‌های ساده

اولین مکان‌هایی که هنگام انتقال ویژگی‌های موجود به 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>

فایل XML را می‌توان در «نوشتن» در چند خط بازنویسی کرد:

@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))
        }
    }
}

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

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

رویکرد پایین به بالای انتقال واسط کاربر ترکیبی «نماها» و «ترکیب» به «ترکیب»
شکل ۴. رویکرد پایین به بالا برای انتقال میانای کاربری «ترکیبی از نماها و نوشتن» به Compose

درحال برداشتن عنصر «تکه‌کدها و ناوبری»

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

منابع بیشتر

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

مراحل بعدی

اکنون که با استراتژی‌ای که می‌توانید برای انتقال برنامه مبتنی بر View موجودتان اتخاذ کنید آشنا شدید، برای کسب اطلاعات بیشتر، میاناهای برنامه‌سازی کاربردی قابلیت هم‌کنش‌پذیری را کاوش کنید.