چگونه Jetpack Compose را به xml بیاوریم؟

اگر پروژه های زیادی دارین که با xml نوشته شدن و دوست دارین توی ان های از تکنولوژی jetpack compose استفاده کنید این مقاله می تونه بهتون کمک کنه تا compose را وارد فایل های xml خود بکنیدو بتوانید از ویژگی های ان استفاده کنیدو کم کم تمام xml های خودرا به سمت compose ببرید.برای اشنایی کامل شما از روال کار یک پروژه معمولی ایجاد کردم تا به روال پروژه های xml تون نزدیکتر باشد.

ابتدایک پروژه ی جدید به روش قبل می سازم و Empty Activity را انتخاب میکنم.(همانطور که میدانید برای ساختن یک پروژه با compose بایدEmpty Compose Activity را هنگام ساخت پروژه ی جدید انتخاب کنیم):

سپس اسم وتنظیمات پیش فرض را تغییر نمی دهم و پروژه را می سازم و ان را ران می کنم:

سپس برای اینکه پروژه ی ما به پروژه هایی که معمولا برنامه نویسان قبلا ان ها را ایجاد کردند نزدیک تر باشدیک فرگمنت ایجاد می کنم:

وفرگمنت جدید ساخته می شود:

سپس تکنولوژی binding راوارد xml مربوط به فرگمنت خود می کنیم و تگ مربوط به ان را در gradle ماژول قرار میدهیم

سپس navigation را به پروژه ی خود اضافه می کنیم و فرگمنت ساخته شده را به عنوان home درنظر میگیریم و مبدا اپ خود قرار میدهیم.

خب حالا وقتش رسید که به فرگمنت خود که دارای xml است compose را اضافه کنیم.(از اینجا به بعدمی تواند در پروژه های قبلی تون استفاده شود)

ابتدا خط زیر رابه build.gradle مربوط به project اضافه می کنیم و ورژن مربوط به compose را مشخص می کنیم .

ext{
    compose_version = '1.0.1'
}

لازم به ذکر است ورژن کاتلینی که من استفاده میکنم به صورت زیر است:

classpath &quotorg.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21&quot

سپس خط زیررا به buildFeatrueموجوددر build.gradle درکنار dataBindingمربوط به ماژول اضافه می کنیم.

buildFeatures {
    //noinspection DataBindingWithoutKapt
    dataBinding = true
    viewBinding = true
    compose = true
}

و همچنین قسمت زیر را اضافه می کنیم:

composeOptions {
    kotlinCompilerExtensionVersion compose_version
}

حالا می توانیم به ویژگی های compose دسترسی داشته باشیم و از ویژگی های ان استفاده کنیم .

سپس Dependency های مربوط به compose را به builde.gradle مربوط به ماژول اضافه می کنیم:

//compose
implementation(&quotandroidx.compose.runtime:runtime:$compose_version&quot)
implementation &quotandroidx.compose.ui:ui:$compose_version&quot
implementation &quotandroidx.compose.material:material:$compose_version&quot
implementation &quotandroidx.compose.ui:ui-tooling-preview:$compose_version&quot

حالا وابستگی های مربوط به compose به پروژه اضافه شدند برای استفاده از compose درون xml به composeView نیاز داریم تا objectهای مربوط به کامپوز خود را درون ان قرار دهیم پس این view را به xml مربوط به newFragmentاضافه می کنیم:

درقسمت displayباکس مربوط به compose به صورت خاکستری ظاهر شده که من این view را به TextView به هم chain کردم:

سپس داخل newFragment از طریق binding به composeView دسترسی پیدامی کنیم و به صورت زیر یک textدرون composeView خود قرار می دهیم.دراین view هر لایه ای را می توانیم قرار دهیم برای پیاده سازی constraintLayout دراین قسمت می توانید از مقاله ی مربوط به پیاده سازی constraintLayout در compose استفاده کنید و برای اشنایی بیشتر از منطق پیاده سازی compose و نوشتن کدها مختلف دران می توانید از مقاله ی پیاده سازی state ها و استفاده از remember استفاده کنید .

دراین قسمت از setViewCompositionStrategyاستفاده کردیم و به compose خودیک استراتژی دادیم وبا استفاده از ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed با destroy یا destroyView شدن فرگمنت compose نیز Destroy می شود و از بین میرودو درواقع به lifecycle فرگمنت وابسته میشود هنگام نابود شدن سپس کد خودرا ران میکنیم:

همانطور که میبیند compose درکنار ویجت TextView استفاده شده و هر ویجتی که نیاز داشته باشیم از طریق کد می توانیم درون composeView قرار دهیم.

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

اگر به مشکلی خوردین توی قسمت ثبت نظرات می تونین مطرح کنین تاباهم بتونیم راه حل براش پیداکنیم و درکل خوشحال میشم نظرتونو بدونم .

موفق و تندرست باشین ?.