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

اگر برنامه مبتنی بر View موجودی دارید، ممکن است نخواهید کل واسط کاربر آن را یک‌باره بازنویسی کنید. این صفحه به شما کمک می‌کند مؤلفه‌های جدید 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 نوشته شده است

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

برای استفاده از Compose در 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()
            }
        }
    }
}

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

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

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

اگر ویژگی جدیدی که اضافه می‌کنید بخشی از صفحه‌نمایش موجود باشد، می‌توانید از Compose در صفحه‌نمایش موجود مبتنی بر 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>

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

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

ساختن کتابخانه‌ای از مؤلفه‌های رایج واسط کاربر

As you’re building features with Compose, you’ll quickly realize that you end up building a library of components. ایجاد کتابخانه‌ای از مؤلفه‌های واسط کاربر مشترک به شما امکان می‌دهد منبع واحد حقیقت برای این مؤلفه‌ها در برنامه‌تان داشته باشید و قابلیت استفاده مجدد را ارتقا دهید. ویژگی‌هایی که می‌سازید می‌توانند به این کتابخانه وابسته باشند. این تکنیک به‌ویژه زمانی مفید است که درحال ساختن یک سیستم طراحی سفارشی در Compose باشید.

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

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

علاوه‌بر استفاده از 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 را می‌توان در 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))
        }
    }
}

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

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

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

برداشتن قطعه‌ها و مؤلفه ناوبری

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

منابع بیشتر

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

مراحل بعدی

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