چگونه برنامه اندروید خود را با Jetpack Compose سریعتر کنید

در وبلاگ امروز، مهندسان DEV IT ما اصول اولیه استفاده از Jetpack Compose را در طول فرآیند توسعه برنامه Android شما پوشش خواهند داد. این به شما کمک می کند در طول توسعه بهره وری بیشتری داشته باشید و پروژه ها را سریعتر از حد انتظار تکمیل کنید.

Jetpack Compose در اندروید

Jetpack compose یک ابزار عالی برای ساخت رابط کاربری برای اندروید است. علاوه بر سرعت بخشیدن به توسعه UI، همچنین به توسعه دهندگان این امکان را می دهد تا برنامه ای با حداقل کدنویسی ایجاد کنند، بنابراین به لطف API کاتلین و همچنین ابزارهای قدرتمند، روند کار را برای همه افراد درگیر در پروژه ساده می کند.

مزایای استفاده از Jetpack Compose چیست؟

قبل از اینکه نحوه استفاده از آن را بررسی کنیم، اجازه دهید به چند مزیتی که هنگام استفاده از Jetpack Compose در پروژه خود به دست می‌آورید نگاهی بیندازیم:

• اعلامی: کاملاً بیانی است، بنابراین می توانید اجزای رابط کاربری خود را با فراخوانی برخی از توابع از پیش تعریف شده توصیف کنید.
• سازگار: به راحتی با نماهای موجود اندروید سازگار است.
• سرعت توسعه را افزایش دهید: توسعه دهندگان قبلی مجبور بودند روی فایل های XML و فایل های Kotlin کار کنند. اما با کمک Jetpack Compose، این روند آسان می شود و توسعه دهندگان فقط باید روی فایل های Kotlin کار کنند. بنابراین، به توسعه دهندگان کمک می کند تا کار خود را سرعت بخشند.
• کوتلین کوتاه و اصطلاحی: رابط کاربری Jetpack Compose ساخته شده با مزایای Kotlin.
• ساده در نگهداری: از آنجایی که پایه کد هر برنامه در یک فایل وجود دارد. مدیریت و مدیریت پایگاه کد برنامه آسان تر می شود.
• نوشته شده در کاتلین: برنامه ای که با استفاده از Jetpack Compose، 100% با استفاده از زبان برنامه نویسی Kotlin نوشته شده است

راه اندازی و اجرا با Jetpack Compose

اکنون که می‌دانید Jetpack Compose چیست و چگونه کار می‌کند، بیایید نگاهی به روند پیاده‌سازی آن در فرآیند توسعه برنامه‌تان بیندازیم.

مرحله ی 1: یک پروژه اندروید استودیو جدید ایجاد کنید.

گام 2: یک وابستگی به پروژه اضافه کنید

def composeVersion = “1.0.0-alpha06”

پیاده سازی “androidx.compose.ui:ui:$composeVersion”

پیاده سازی “androidx.compose.foundation:foundation:$composeVersion”

پیاده سازی “androidx.ui:ui-tooling:$composeVersion”

پیاده سازی “androidx.compose.material:material:$composeVersion”

علاوه بر این وابستگی ها، می توانید ببینید که پرچم ساخت در بلوک buildFeatures اندروید روی true تنظیم شده است.

از آنجایی که Jetpack یک روش برنامه‌نویسی برای ایجاد رابط کاربری برای Compose ارائه می‌کند، شما از XML استفاده نخواهید کرد. این بدان معنی است که شما از setContentView() در فعالیت ها یا قطعات خود استفاده نمی کنید، در عوض از setContent() برای تنظیم رابط کاربری خود استفاده می کنید.

برای انجام این کار، MainActivity.kt را باز کنید و فراخوانی موجود به setContentView() را با موارد زیر جایگزین کنید:

در حین انجام این کار مطمئن شوید که وابستگی ها را از بسته android x.compose وارد کرده اید. setContent() یک تابع پسوند Kotlin در Activity است که یک لامبدا@Composable را به عنوان پارامتر می گیرد.

Text() در واقع تابعی است که با حاشیه نویسی @Composable مشخص شده است. شما حدس زدید که Text() قابل ترکیب کردن، متن را روی صفحه می کشد. می توانید آن را به عنوان نسخه ترکیبی TextView در نظر بگیرید

بسازید و اجرا کنید و Text() را روی صفحه خواهید دید

می توانید متن خود را با استفاده از Text Style سفارشی کنید. این را با جایگزین کردن Text موجود امتحان کنید()

دوباره بسازید و اجرا کنید و حالا باید ببینید

ایجاد یک تابع قابل ترکیب

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

اکنون که با Text() آشنا شدید، می توانید اولین تابع @Composable خود را بسازید.

تابع زیر را در MainActivity اضافه کنید:

برای استفاده از آن، فراخوانی موجود به Text() در setContent() را با فراخوانی Greeting():

بسازید و دوباره اجرا کنید

پیش نمایش قابل ترکیب

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

Jetpack Compose با ابزار مشابهی همراه است.

Preview@ را در زیر Composable@ از Greeting () که قبلاً تعریف کردید اضافه کنید:

هنگامی که حاشیه نویسی را وارد کردید، پیش نمایشی از نمایش در حال کامپایل شدن را در پیش نمایش در سمت راست صفحه مشاهده خواهید کرد.

هر بار که composable را که رندر می‌کنید به‌روزرسانی می‌کنید، برای مشاهده نمای به‌روز شده، باید بیلد را به‌روزرسانی کنید. شما فقط می‌توانید کامپوزیتی‌هایی را ارائه کنید که هیچ آرگومانی ندارند.

اکنون که می توانید پیش نمایش اجزای خود را مشاهده کنید، وقت آن است که نحوه کار با طرح بندی ها را بیاموزید

استفاده از Column Composable

یک ستون را به صورت LinearLayout با جهت عمودی در نظر بگیرید. فقط تمام عناصر فرزند خود را در یک ستون عمودی قرار می دهد.

Greeting() را به روز کنید تا سه Text() را در Column() قرار دهید.

Column() یک بلوک لامبدا @Composable می گیرد که در آن فرزندان ستون را اعلام می کنید

در Greeting() سه متن را به عنوان فرزندان این ستون اضافه می کنید. این الگوی یک تابع ترکیب پذیر که یک لامبدا را برای ایجاد سایر توابع ترکیب پذیر می پذیرد در ترکیب بندی Jetpack رایج است.

گرفتن ورودی با استفاده از یک TextField

مشابه EditText، در Compose می توانیم از TextField و BaseTextField استفاده کنیم. BaseTextField هنوز آزمایشی است و ممکن است در هر زمان برای همیشه حذف یا اضافه شود. بنابراین برای استفاده از BaseTextField باید حاشیه نویسی @ExperimentalFoundationApi را اضافه کنید.

در زیر نمونه ای از BaseTextField ساده است

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

نتیجه

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

پست چگونه برنامه اندروید خود را با Jetpack Compose سریعتر کنیم اولین بار در DEV IT Journal ظاهر شد.