Jetpack Compose چیست؟ – معرفی جت پک کامپوز + کاربرد و قابلیت ها

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

Jetpack Compose چیست ؟

Jetpack Compose ابزاری مُدرن برای طراحی رابط کاربری اپلیکیشن‌های اندرویدی به حساب می‌آید. این ابزار نخستین بار توسط گوگل در مراسم I/O سال ۲۰۱۹ میلادی (۱۳۹۸ شمسی) معرفی شد.

دلیل پیدایش Jetpack Compose چیست ؟

فیلم آموزش Jetpack Compose برای اندروید – مقدماتی در فرادرس

کلیک کنید

مهم ترین کاربردهای Jetpack Compose چیست؟

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

وابستگی بیش از حد کیت توسعه رابط کاربری اندروید به سیستم عامل

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

فیلم آموزش برنامه‌نویسی اندروید – مقدماتی در فرادرس

کلیک کنید

نسخه جدید سیستم عامل اندروید نیز سالی یک بار ارائه می‌شود. جداسازی رابط کاربری از سیستم عامل اندروید رفع خطاها و اشکالات به وجود آمده را آسان‌تر و سریع‌تر می‌کند. علاوه بر این، دریافت بروزرسانی‌ها برای رابط کاربری نیز تسهیل می‌شود.

منسوخ شدن برخی از API های حیاتی اندروید

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

پیچیدگی فرایند توسعه رابط کاربری برای برنامه‌ نویسان

مدیریت دشوار State ها در اندروید

فیلم آموزش Jetpack Compose برای اندروید – مقدماتی در فرادرس

کلیک کنید

بررسی مهم‌ترین ساختارهای Jetpack Compose

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

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

ساختار تابع Composable

بسیاری از افراد تازه کار با این سوال مواجه هستند که منظور از کلمه کلیدی@Composable در Jetpack Compose چیست و چه کاربردی دارد.

در قطعه کد بالا تابعApp داده‌ها را به عنوان پارامتر ورودی از کلاسappData دریافت می‌کند. نکته‌ای که باید به آن توجه داشت این است که داده‌های مورد استفاده در توابعComposable از نوع «غیرقابل تغییر» (Immutable) هستند. با استفاده از این توابع می‌توان بخش‌های مختلف رابط کاربری را پیاده‌سازی و به کمک زبان برنامه‌نویسی کاتلین و ساختارهای موجود در آن نیز منطق مورد نظر را به رابط کاربری اضافه کرد.

رویکرد اعلانی رابط کاربری

عبارت Declarative یا اعلانی یک کلمه کلیدی مهم به شمار می‌رود.

فیلم آموزش برنامه‌نویسی اندروید – مقدماتی در فرادرس

کلیک کنید

اما منظور از رویکرد اعلانی در Jetpack Compose چیست و چه تفاوتی با رویکردهای قبلی دارد. همان‌طور که پیش‌تر نیز بیان شد، برای بررسی رویکرد برنامه نویسی اعلانی باید آن را با رویکرد برنامه نویسی دستوری مقایسه کرد. در ادامه، این دو رویکرد در طراحی رابط کاربری با یکدیگر مقایسه شده‌اند. برای این منظور «آیکون» (Icon) یک برنامه مدیریت ایمیل را در نظر بگیرید.

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

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

در نمونه کد بالا، برای پیاده‌سازی عملکرد مورد نظر ۳ شرط کلی در نظر گرفته شده است.

• اگر مقدارcount بیشتر از ۹۹ باشد، آیکون آتش، نشان داده شود.
• اگر مقدارcount بیشتر از صفر باشد، آیکون کاغذ نشان داده شود.
• اگر مقدارcount بیشتر از صفر باشد، عدد مربوط به تعداد پیام‌ها نیز همراه آیکون کاغذ نشان داده شود.

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

منظور از کپسوله سازی در Jetpack Compose چیست ؟

منظور از ترکیب مجدد در Jetpack Compose چیست؟

به فرایند فراخوانی مجدد توابع Composable در Jetpack Compose «ترکیب مجدد» (Recomposition) گفته می‌شود. این اتفاق در زمان تغییر ورودی‌های تابع رخ می‌دهد. سوالی که برای بسیاری از افراد وجود دارد این است که مزیت ترکیب مجدد در Jetpack Compose چیست و چگونه این قابلیت به بهبود عملکرد برنامه منجر می‌شود.

فیلم آموزش Jetpack Compose برای اندروید – مقدماتی در فرادرس

کلیک کنید

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

مزایا و معایب Jetpack Compose چیست ؟

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

در ادامه، مزایای Jetpack Compose در توسعه رابط کاربری اندروید فهرست شده است.

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

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

فیلم آموزش Jetpack Compose برای اندروید – مقدماتی

کلیک کنید

• کاهش هزینه توسعه
• بهبود کارایی و عملکرد توسعه‌دهندگان
• قابلیت همکاری بالا
• امکان اشتراک گذاری کدها بین اندروید، وب و دسکتاپ
• منابع یادگیری فراوان
• رویکرد «اعلانی» (Declarative)
• افزایش سرعت توسعه

معایب Jetpack Compose کدامند؟

برخی از معایب جت پک کامپوز در ادامه فهرست شده‌اند.

• نوظهور بودن
• جامعه توسعه‌دهندگی کوچک
• سرعت پایین رابط کاربری
• پشتیبانی پایین توسط سایر ابزارهای توسعه

پیش نیاز یادگیری Jetpack Compose چیست ؟

Jetpack Compose ابزاری مدرن برای توسعه رابط کاربری اندروید به حساب می‌آید که فرایند توسعه را بسیار آسان می‌کند. این ابزار در حال حاضر توسط برنامه‌نویسان و شرکت‌های مطرحی همچون گوگل، Airbnb و توییتر در سطح جهان به کار برده می‌شود.

فیلم آموزش برنامه‌نویسی اندروید – پیشرفته در فرادرس

کلیک کنید

برای استفاده از این ابزار مدرن، مطمئناً داشتن دانش و درک برنامه نویسی اندروید لازم است و نیاز هست که تجربه توسعه اپلیکیشن اندروید را داشته باشید. علاوه بر این، داشتن پیش‌نیازهای زیر برای استفاده بهتر از این ابزار ضروری است.

• در حال حاضر، Jetpack Compose مختص زبان کاتلین ارائه شده است. در نتیجه، باید با زبان برنامه نویسی کاتلین کاملاً آشنا باشید.
• باید از آخرین نسخه «اندروید استودیو» (Android Studio) استفاده کنید، زیرا ساخت Compose Activity تنها در آخرین نسخه اندروید استودیو در دسترس است.
• داشتن اطلاعات در خصوص شیوه‌های طراحی رابط کاربری اندروید نیز می‌تواند مفید باشد.

آموزش نصب Jetpack Compose

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

ایجاد پروژه جدید Jetpack Compose در اندروید استودیو

در پنجره جدید باز شده بر روی گزینهEmpty Compose Activity کلیک کرده و دکمهNext را بزنید.

با کلیک بر روی دکمهFinish پروژه اندرویدی مبتنی بر Jetpack Compose راه‌اندازی شده و آماده اجرا است.

افزودن Jetpack Compose به پروژه فعلی

برای افزودن Jetpack Compose به پروژه فعلی و استفاده از امکانات آن، نیاز به اعمال یکسری تغییرات در پروژه فعلی وجود دارد. حداقل نسخه SDK سازگار با Jetpack Compose نسخه ۲۱ است و باید حتماً این مورد را در نظر داشت. برای افزودن Jetpack Compose به پروژه فعلی در گام نخست باید به سراغ فایلbuild.gradle رفت و کدهای زیر را در آن قرار داد.

سپس، در بخش مربوط بهdependencies باید موارد زیر را اضافه کرد.

تمام تغییرات مورد نظر برای استفاده از Jetpack Compose در پروژه اندرویدی اعمال شدند و تنها با استفاده از کدهای کاتلین در Activity اصلی برنامه می‌توان رابط کاربری اپلیکیشن را مبتنی بر این ابزار جدید طراحی پیاده‌سازی کرد.

آموزش گام به گام Jetpack Compose

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

فیلم آموزش برنامه‌نویسی کاتلین برای اندروید – مقدماتی در فرادرس

کلیک کنید

ایجاد پروژه Hello World در Jetpack Compose

برای چاپ شدن عبارت Hello World بر روی صفحه باید کد زیر را در Activity اصلی برنامه قرار داد.

در نمونه کد بالا، درون بدنه کلاسSimpleTextActivity متدonCreate قرار داده شده است. تا اینجای کار همه چیز مشابه قبل است و طراحی رابط کاربری به کمک کیت توسعه قدیمی UI اندروید نیز به همین صورت انجام می‌گرفت.

درون بدنه این تابع از متدBasicText استفاده شده است که یکی از متدهای از پیش تعریف شده Jetpack Compose است. علاوه بر این، برای راحتی کار و عدم نیاز به اجرای مجدد برنامه به منظور نمایش خروجی می‌توان از متد@Preview قبل از تعریف تابع استفاده کرد. در ادامه، نحوه استفاده از متد@Preview در Jetpack Compose آورده شده است.

بعد از تعریف متد@Preview برای توابع می‌توان خروجی نمایشی را همانند تصویر زیر در اندروید استودیو مشاهده کرد.

Modifiers در Jetpack Compose

بعد از آشنایی با نحوه نمایش متن در برنامه اندرویدی با استفاده از ساختار Jetpack Compose در این بخش به این سوال پاسخ داده خواهد شد که کاربرد Modifiers در Jetpack Compose چیست و چگونه می‌توان از آن استفاده کرد.

با استفاده از Modifiersها می‌توان ویژگی‌هایی نظیر رنگ پس‌‌زمینه و «حاشیه» (Padding) را به متن افزود و ظاهر متن را زیباتر کرد. کد زیر چگونگی استفاده از Modifiers برای تغییر رنگ پس زمینه و افزودن حاشیه به متن در Jetpack Compose را نشان می‌دهد.

در نمونه کد بالا، Modifiers به متدBasicText اضافه شده و ویژگی‌های مورد نظر برای زیباسازی متن را مشخص کرده است. این مثال، از متدهایbackground وpadding به ترتیب برای تعیین رنگ پس زمینه و حاشیه متن استفاده کرده است.

نکته جالب توجه در خصوص Modifiers این است که ترتیب متدها در آن بر خروجی تاثیر می‌گذارد. در مثال بالا، ابتدا ویژگیbackground و بعد مشخصهpadding قرار گرفته است. در نتیجه، همان طور که در تصویر بالا مشخص است این مورد سبب می‌شود که رنگ پس زمینه به نواحی حاشیه متن نیز اعمال شود. برای این که رنگ پس زمینه تنها به متن اعمال شود کافی است تا جای این دو مشخصه تغییر کند. در نمونه کد زیر، ترتیب دو ویژگیbackground وpadding تغییر کرده است.

با تغییر ترتیب دو ویژگی فوق خروجی برنامه به صورت زیر خواهد بود.

نمایش دیالوگ هشدار در Jetpack Compose

برای درک بهتر رویکرد «برنامه نویسی اعلانی» (Declarative Programming) می‌توان از مقایسه آن با رویکرد «برنامه نویسی دستوری» (Imperative Programming) استفاده کرد. زیرا، یکی از بهترین راه‌ها برای درک یک مفهوم استفاده از خاصیت تضاد است. رویکرد برنامه نویسی دستوری بیشتر به چگونه انجام شدن عملی می‌پردازد. به عنوان مثال، چگونه باید رابط کاربری خاصی را رندر (Render) کرد. در ادامه، نحوه پیاده‌سازی دیالوگ هشدار در اندروید آورده شده است.

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

در نمونه کد بالا، در صورت برقرار بودن شرط مورد نظر ازAlertDialog پیش‌ فرض موجود در Jetpack Compose برای نمایش دیالوگ هشدار استفاده می‌شود. در این روش برای به‌روزرسانی وضعیت رابط کاربری هیچ کدام از توابعshow یاdismiss فراخوانی نمی‌شوند. علاوه بر این، کد برنامه دیگر به کلاس context در اندروید وابسته نیست.

کاربرد State در Jetpack Compose چیست؟

Jetpack Compose با معرفی قابلیتی تحت عنوان State به دغدغه بسیاری از برنامه‌نویسان اندروید پایان داد. Stateها در Jetpack Compose وضعیت کامپوننت‌های برنامه را مشخص می‌کنند و با استفاده از آن‌ها به آسانی می‌توان رابط کاربری اپلیکیشن را بروزرسانی کرد.

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

در نمونه کد ارائه شده در بالا، متغیری از نوع «تغییر پذیر» (mutable) با نامshowPopup تعریف شده است. علاوه بر این، در کنار این متغیر کلمات کلیدی جالب و جدیدی همچونremember وmutableStateOf نیز دیده می‌شوند که احتمالاً در برنامه نویسی اندروید کمتر با آن‌ها مواجه شده‌اید.

واکنش به تغییر State از ویژگی‌های اصلی Jetpack Compose است. با تغییر مقدار متغیرshowPopupتمام کامپوننت‌ها و بخش‌هایی از برنامه که از این متغیر استفاده کرده‌اند، به صورت خودکار مجدداً ترسیم و بروزرسانی می‌شوند. در مثال فوق، با کلیک کاربر بر روی دکمه مقدار متغیرshowPopup تغییر می‌کند و در نتیجه، رنگ این دکمه سبز می‌شود.

طراحی Layout در Jetpack Compose

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

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

با توجه به تصویر فوق، این کامپوننت از یک ردیف یا Row تشکیل شده است که این ردیف نیز شامل یک تصویر یا ImageView و یک ستون یا Column است. در نهایت، ستون مورد نظر نیز از دو متن یا Text تشکیل شده است. برای پیاده‌سازی این کامپوننت به کمک روش سنتی توسعه رابط کاربری در اندروید باید از عناصری همچونLinearLayout یاRelativeLayout استفاده کرد.

به عنوان مثال، برای پیاده‌سازی کامپوننت فوق در Jetpack Compose به جای استفاده ازLinearLayout می‌توان ازRow یاColumn با توجه به شرایط استفاده کرد. در ادامه، کد مربوط به پیاده‌سازی این کامپوننت به کمک Jetpack Compose آورده شده است.

پیاده سازی List به کمک Jetpack Compose

لیست‌ ویو (ListView) یکی از ویجت‌های پرکاربرد در اپلیکیشن‌های اندرویدی است. با استفاده از این ویجت می‌توان لیستی از آیتم‌ها را در اپلیکیشن نمایش داد. از جمله کاربردهای لیست ویو می‌توان به استفاده از آن در اپلیکیشن‌های مربوط به نمایش لیست مخاطبین، لیست محصولات و لیست شهرها اشاره کرد.

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

با بررسی نمونه کد بالا و کد مربوط به پیاده‌سازی لیست ویو به روش سنتی در اندروید می‌توان متوجه کاهش قابل ملاحظه کدها شد. کاهش میزان کدها و افزایش خوانایی از نکات مثبت استفاده از Jetpack Compose در طراحی رابط کاربری اپلیکیشن‌های اندرویدی است.

طراحی رابط کاربری اپلیکیشن اندروید با Jetpack Compose

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

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

گام اول: ساخت اکتیویتی جدید

در اولین گام باید اکتیویتی جدیدی با نامSuperheroListActivity ایجاد کرد. قطعه کد زیر این اکتیویتی جدید را برای ما ایجاد می‌کند.

گام دوم: طراحی منطق کسب و کار

در ادامه از کلاسViewModel برای پیاده‌سازی منطق کسب و کار برنامه استفاده می‌شود. کلاسViewModel برای نگهداری و مدیریت داده‌‌های مرتبط با کامپوننت‌های رابط کاربری بدون وابستگی به چرخه عمر آن‌ها کاربرد دارد. در ادامه کد مربوط به کلاسSuperheroesViewModel قرار داده شده است.

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

گام سوم: طراحی منطق رابط کاربری

«قابلیت همکاری» (Interoperability) سیستم جدید با سیستم فعلی یکی از سوالاتی است که هنگام معرفی یک فریمورک جدید باید به آن پاسخ داده شود. یکی از نکات مثبت Jetpack Compose قابلیت همکاری آن با روش توسعه سنتی در اندروید است.

منظور از قابلیت همکاری این است که می‌توان از این دو ابزار در کنار یکدیگر و بدون مشکل استفاده کرد. به عنوان مثال، کد زیر نحوه تبدیل یک شی از نوعLiveData را با استفاده از تابعobserveAsState به متغیری از نوعState در Jetpack Compose نشان می‌دهد.

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

در صورتی خالی نبودن شیstate باید لیست شخصیت‌های ابرقهرمانی نمایش داده شود. برای این منظور تابعSuperheroListComponent پیاده‌سازی شده است. در ادامه، کدهای مربوط به پیاده‌سازی این تابع آورده شده است.

تصویر زیر خروجی نهایی مربوط به پیاده‌سازی این صفحه از رابط کاربری اپلیکیشن را نشان می‌دهد.

سوالات متداول در Jetpack Compose

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

فیلم آموزش برنامه‌نویسی اندروید با Kotlin – تکمیلی در فرادرس

کلیک کنید

نسخه API مناسب برای اجرای Jetpack Compose چیست ؟

کاتلین تنها زبان قابل استفاده در Jetpack Compose است، به دلیل این که کلاس‌های موجود در Jetpack Compose با زبان برنامه نویسی کاتلین نوشته شده‌اند. علاوه بر این برای کار کردن با Jetpack Compose به حداقل نسخه ۲۱ یا بالاتر از API اندروید نیاز است.

آیا برنامه‌های ساخته شده با Jetpack Compose سریع تر هستند؟

پارامترهای بسیاری برای سنجش سرعت و عملکرد Jetpack Compose در قیاس با رویکرد سنتی توسعه رابط کاربری اندروید با کدهای XML وجود دارد. در بسیاری از این بخش‌ها Jetpack Compose از سرعت بالاتری برخوردار است.

آیا Jetpack Compose ابزار توسعه چند پلتفرمی محسوب می‌شود؟

Jetpack Compose چیست، کتابخانه یا فریمورک؟

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

جمع‌بندی

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

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