اگر یک برنامه مبتنی بر View موجود دارید، ممکن است نخواهید تمام رابط کاربری آن را یکباره بازنویسی کنید. این صفحه به شما کمک می کند اجزای Compose جدید را به برنامه موجود خود اضافه کنید. برای شروع استفاده از Compose در برنامه خود، به تنظیم نوشتن برای یک برنامه موجود مراجعه کنید.
Jetpack Compose از همان ابتدا با قابلیت همکاری View طراحی شد. این عملکرد به این معنی است که میتوانید برنامه مبتنی بر View موجود خود را به Compose منتقل کنید در حالی که هنوز میتوانید ویژگیهای جدیدی ایجاد کنید. برای انتقال به Compose، ما یک انتقال تدریجی را توصیه میکنیم که در آن Compose و Views به طور همزمان در پایگاه کد شما وجود دارند تا زمانی که برنامه شما به طور کامل در Compose قرار گیرد.
![مراحل مهاجرت یک برنامه مبتنی بر View به Compose](https://developer.android.com/static/develop/ui/compose/images/interop-stages.png?authuser=0&hl=fa)
برای انتقال برنامه خود به Compose، این مراحل را دنبال کنید:
- با Compose صفحات جدید بسازید.
- همانطور که در حال ساختن ویژگیها هستید، عناصر قابل استفاده مجدد را شناسایی کنید و شروع به ایجاد یک کتابخانه از اجزای مشترک رابط کاربری کنید.
- ویژگی های موجود را در یک زمان یک صفحه جایگزین کنید.
با Compose صفحات جدید بسازید
استفاده از Compose برای ایجاد ویژگیهای جدید که کل صفحه را در بر میگیرد، بهترین راه برای تشویق شما به پذیرش Compose است. با این استراتژی، میتوانید ویژگیها را اضافه کنید و از مزایای Compose بهره ببرید و در عین حال نیازهای تجاری شرکت خود را برآورده کنید.
![صفحه جدیدی که در Compose نوشته شده است](https://developer.android.com/static/develop/ui/compose/images/interop-newscreen.png?authuser=0&hl=fa)
وقتی از 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() } } } }
برای اطلاعات بیشتر ComposeView در Fragments را ببینید.
اضافه کردن ویژگی های جدید در صفحه نمایش های موجود
![یک صفحه نمایش موجود با نماها و نوشتن ترکیبی](https://developer.android.com/static/develop/ui/compose/images/interop-existingscreen.png?authuser=0&hl=fa)
همچنین اگر ویژگی جدیدی که اضافه میکنید بخشی از صفحه موجود باشد، میتوانید از نوشتن در یک صفحه مبتنی بر 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
، 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>
فایل 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 در زیردرختی از سلسله مراتب UI شروع می شد، به انتقال عناصر UI ادامه می دهید تا زمانی که کل صفحه در Compose قرار گیرد. به این رویکرد، رویکرد پایین به بالا نیز گفته می شود.
![رویکرد پایین به بالا برای انتقال نماهای مختلط و نوشتن رابط کاربری به نوشتن](https://developer.android.com/static/develop/ui/compose/images/interop-animation.gif?authuser=0&hl=fa)
حذف قطعات و جزء ناوبری
زمانی که بتوانید همه بخشهای خود را حذف کرده و با ترکیبهای قابل ترکیب در سطح صفحه مربوطه جایگزین کنید، میتوانید به «نوشتن پیمایش» مهاجرت کنید. ترکیبپذیرهای سطح صفحه نمایش میتوانند حاوی ترکیبی از نوشتن و مشاهده محتوا باشند، اما برای فعال کردن مهاجرت نوشتن ناوبری، همه مقصدهای پیمایش باید قابل تنظیم باشند. تا آن زمان، باید به استفاده از مولفه ناوبری مبتنی بر قطعه در پایگاه کد ترکیبی View و Compose خود ادامه دهید. برای اطلاعات بیشتر به انتقال ناوبری Jetpack به نوشتن ناوبری مراجعه کنید.
منابع اضافی
منابع اضافی زیر را بررسی کنید تا درباره انتقال برنامه مبتنی بر View موجود خود به Compose اطلاعات بیشتری کسب کنید:
- Codelab
- مهاجرت به Jetpack Compose : نحوه انتقال بیتهایی از برنامه Sunflower به Compose را در این آزمایشگاه کد بیاموزید.
- پست های وبلاگ
- انتقال Sunflower به Jetpack Compose : با استفاده از استراتژی توضیح داده شده در این صفحه، نحوه انتقال Sunflower به Compose را بیاموزید.
- Jetpack Compose Interop: استفاده از Compose در RecyclerView : یاد بگیرید چگونه از Compose در
RecyclerView
به طور عملکردی استفاده کنید.
مراحل بعدی
اکنون که استراتژیای را که میتوانید برای انتقال برنامه مبتنی بر View خود در پیش بگیرید، میدانید، برای کسب اطلاعات بیشتر ، APIهای Interoperability را بررسی کنید.
{% کلمه به کلمه %}برای شما توصیه می شود
- توجه: متن پیوند زمانی که جاوا اسکریپت خاموش است نمایش داده می شود
- استفاده از Compose در Views
- اسکرول کنید
-
RecyclerView
به لیست Lazy منتقل کنید