جت پک کامپوز(jetpack compose) یک ابزار تقریبا جدید در اندروید هست که امکان طراحی رابط کاربری native رو به شما میده که توسعه UI رو برای شما راحت تر و تسریع میکنه و دیگه نیازی به نوشتن به کدها با استفاده از xml نداریم. این مساله باعث شد این مقاله و مقاله های بعدی رو به آموزش این ابزار قدرتمند بپردازم.
در این آموزش یک سری مباحث ابتدایی رو در jetpack compose به شما آموزش میدم که شما در پایان این آموزش اصول اولیه نوشتن jetpack compose رو درک خواهید کرد و یک برنامه ساده میتونید با اون بنویسید.
برای کار با jetpack compose به صورت 100درصد از زبان کاتلین(kotlin) استفاده میشه در این آموزش فرض رو بر این گرفتم که شما دانش اولیه ای در زبان kotlin به دست آوردید.
قدم اول: یه پروژه جدید ایجاد میکنیم.باید یک Empty Compose Activity ایجاد کنیم .
مراحل ایجاد پروژه رو طبق عکس ها پیش برید.مقدار min sdk رو 21 گذاشتم زبان رو هم که kotlin هست.در نهایت finish رو میزنیم و منتظر میمونیم پروژه build بشه.
پروژه ی شما ایجاد شده:
همان طور که می بینید یک فانکشن Greeting با انوتیشن Composable@ مشخص هست رو داریم که یه تکست ساده در اون قراره داره .در واقع توابع برای نمایش ویو باید با این انوتیشن مشخص بشن.
و برای اینکه در خروجی نمایش داده بشه باید داخل setContent کال بشه.
اون پایین هم یه انوتیشن Preview@ می بینیم که به ما این امکان رو میده در حین طراحی ظاهر اون رو مشاهده بکنیم، برای این کار هر UI که طراحی کردیم رو مثلا اینجا فانکشن Greeting رو داخل اون هم کال کنیم.
که میتونید مثل تصویر بالا طراحی هاتون رو سمت راست صفحه مشاهده بکنید.
خب حالا بریم یک سری مفاهیم اولیه طراحی رو یاد بگیریم.
Column:
خب برای اینکه اجزا رو مثل LinearLayout عمودی(vertical) زیر هم بچینیم از Column استفاده می کنیم:
Row:
و برای اینکه اجزا رو به صورت افقی مثل LinearLayout افقی (horizontal) کنار هم بچینیم از Row استفاده میکنیم:
Button:
دکمه رو با استفاده از Button ایجاد میکنیم و در قسمت زمانی که رویداد کلیک انجام میشود عملیات مورد نظرمون انجام میشود . و با کمک Modifier برای Button خودمون ارتفاع و عرض مشخص کنیم :
Box:
برای اینکه بتونیم در صفحه خود یک کادر درست کنیم از Box استفاده میکنیم و اجزای صفحه رو داخل او قرار میدیم و میتونیم برای اون با استفاده از Modifier عرض و ارتفاع مشخص کنیم یا حتی بک گراند بدیم بهش :
Modifier:
شاید براتون سوال شده باشه که modifier ها اصلا چی هستن، در واقع modifier ها به شما این امکان رو میدن یه نظم و ترتیب خاصی به composable خودتون بدید.چندتا از کارهایی که انجام میده رو اینجا براتون میگم:
تا اینجا یک سری ماهیم اولیه رو یاد گرفتید و میتونید UI های ساده مختلف برای خودتون طراحی کنید درآموزش های بعدی مفاهیم پیشرفته تری رو آموزش میدم.سوالاتتون رو در قسمت کامنت ها بپرسید حتما پاسخ میدم.
