جت پک کامپوز ( jetpack compose ) فریمورک رابط کاربری جدید برای توسعه دهندگان اندروید میباشد که باعث میشود بتوانید اپلیکیشن های مدرن و زیبا بسازید و کدنویسی تمیزتر و کمتری داشته باشید.

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

 

جت پک کامپوز یا Jetpack Compose دقیقا چیست ؟ 

اگر قبلا برنامه نویسی اندروید کار کرده باشید مخصوصا در زمانی که جاوا روی بورس بود حتما دیده اید که طراحی رابط کاربری (ui) اپ ها را با استفاده از XML میساختیم که کاملا جدا از کدهای منطقی یعنی اکتیویتی هایی که به زبان java یا kotlin بود.

اما تفاوت jetpack compose  با طراحی اپلیکیشن ها به روش قبلی این است که دیگر نیاز به XML نداریم و همه چیز درون یک فایل kotlin طراحی میشود یعنی ما قسمت جدایی برای ui نداریم. جالبه نه ؟‌

ما قبلا چیزایی به اسم  XML برای layout, style, typography, color و elements ها داشتیم  که باعث درهم برهم شدن پروژه های اندرویدی ما میشد ولی الان دیگه اونا نیستن و خیلی ساده و راحت همشون رو با جت پک کامپوز میتونیم پیاده سازی کنیم. 

در کد زیر یک Text جدید ساختیم که یک متن روی صفحه نمایش میده خیلی ساده و شیک :‌

@Composable
fun Composable() {
    Text("Hello World!")
}

دیگه مواردی مثل views, TextViews, buttons, LinearLayouts و ... که قبلا در برنامه نویسی اندروید استفاده میکردیم دیگر وجود ندارند. اپلیکیشن های ساخته شده با جت پک کامپوز با توابع Composable تولید میشن نه با توابع View .

توابع comsable در پایین فایل کاتلین و درون @Composable نوشته میشه که با استفاده از این توابع المان های UI ساخته میشه . شما میتوانید از Composable های از پیش تعریف شده استفاده کنید یا جدیدش را خلق کنید و استفاده کنید.

در واقع جت پک کامپوز از دیگر فریمورک ها مثل Flutter و React native الگوبرداری شده و اگر با فلاتر کار کرده باشید متوجه خواهید شد که جنبه های مختلف جت پک کامپوز مشابه همان برنامه نویسی اپ ها با فلاتر است.

از آنجایی که اپ های جت پک کامپوز فقط با زبان کاتلین نوشته میشود شما میتوانید UI اپ خود را با ویژگی های کاتلینی بسازید که قبلا به آن عادت کردید ! 

@Composable
fun Title(message: String?) {
  if(message == null) {
    Text("error")
  } else {
    Text(message)
  }
}

جت پک کامپوز باعث ساده شدن کد ها و همچنین افزایش سرعت برنامه نویسی اپلیکیشن های موبایلی شده است و پتانسیل زیادی دارد که آینده ی برنامه نویسی اپ های موبایل باشد.

 

نحوه ی استفاده از Jetpack Compose در اندروید استودیو

برای شروع کار با جت پک کامپوز ( jetpack compose ) باید به موارد زیر دقت کنید و آنها را پیش از شروع داشته باشید : 

1. آخرین نسخه ی محیط اندروید استودیو را نصب کنید.
2. پروژه ی جدید را در محیط Android Studio بسازید.
3. توجه کنید که موقع ساختن پروژه minSdk باید روی اندروید نسخه ی ۵ یا Api 21 یا بالاتر باشد.
4. وابستگی های مربوط به جت پک را به build.gradle اضافه کنید :‌

// build.gradle.kts
implementation("androidx.compose.ui:ui:1.0.1")
implementation("androidx.compose.ui:ui-tooling:1.0.1")
implementation("androidx.compose.foundation:foundation:1.0.1")
implementation("androidx.compose.material:material:1.0.1")

بعد از اینکه موارد بالا را انجام دادید و عمل Sync پروژه را درون محیط اندروید استودیو انجام دادید حالا شما میتوانید از Api های مربوط به جت پک کامپوز استفاده کنید.

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

اگر در اندروید استودیو شما موقع ساخته شدن پروژه جدید صفحه ی زیر را مشاهده میکنید با انتخاب گزینه ی Empty Activity که آیکون جت پک کامپوز نیز روی آن میباشد میتوانید یک پروژه برپایه ی جت پک کامپوز بسازید و دیگر نیاز به اضافه کردن وابستگی ها گردل نیست :‌

 

همچنین ما در فصل ۹ ام دوره ی آموزش کامل کاتلین که در همین سایت برگزار شده به بحث آموزش جت پک کامپوز از صفر تا صد پرداخته ایم و اگر دوست داشتید میتوانید دوره را از اینجا ببینید.

پس از ساختن اولین پروژه و باز کردن Activity اصلی برنامه دیگر خبری از صدا زدن فایل layout نیست همه چیز درون همان فایل کاتلینی است.

شما داخل onCreate با یک متود جدیدی به اسم setContent روبرو هستید که وظیفه ی آن ساختن UI شماست و به راحتی داخل همین قسمت رابط کاربری اپ و صد البته عملکرد آن UX را میسازید.

نمونه کد زیر عبارت Hello World را در صفحه ی اپ چاپ میکند :‌

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

 

یادگیری پایه های جت پک کامپوز ( Jetpack Compose ) 

اضافه کردن Text خالی به اپلیکیشن :

اگر دوست دارید Text جدید به  اپ خود اضافه کنید خیلی ساده میتونید از کامپوز Text استفاده کنید کد زیر را ببینید :‌

setContent {
 Text(text = "Hello World")
}

متود Text یک متود کاتلین هست که به شما اجازه میدهد علاوه بر نمایش متن ویژگی های خاص نیز به آن اضافه کنید تا نحوه ی نمایش متن را تنظیم کنید. برای مثال :‌

setContent {
 Text(
   text = "Hello World",
   fontWeight = FontWeight.Bold,
   maxLines = 1,
   overflow = TextOverflow.Ellipsis
 )
}

 

اضافه کردن Button : 

برای نمایش یک دکمه در اپ خود میتوانید از کامپوز مربوط به Button استفاده کنید :‌

Button(onClick = {}) {
 Text("Button Text")
}

در کد بالا Button یک مثال خود است تا به شما نشان دهد در جت پک کامپوز چطور المان ها UI از هم ارث بری می کنند. متن روی دکمه یک Text دیگر است که محتوای دکمه را نمایش میدهد.

 

بحث Column و Row در جت پک کامپوز :

برای اینکه بتوانیم مشخص کنید المان های ما روی صفحه چطور چیده شوند از دو عبارت Column  و Row استفاده میکنیم. فرض کنید چند Text یا button داشته باشیم و بخواهیم در کنار هم بچینیم . آیا این المان ها بصورت افقی در کنار هم هستند یا عمودی‌؟ چیزی که Row بودن یا Column بودن تعیین میکند.

اگر از Column استفاده کنید المان ها بصورت عمودی در کنار هم چیده میشوند : 

Column(
 modifier = Modifier.fillMaxSize(1f),
 verticalArrangement = Arrangement.Center,
 horizontalAlignment = Alignment.CenterHorizontally
) {
 Text(
   text = "Hello World",
   fontWeight = FontWeight.Bold,
   maxLines = 1,
   overflow = TextOverflow.Ellipsis
 )

 Button(onClick = {}) {
   Text("Button Text")
 }
}

و نتیجه :‌

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

Row(
 modifier = Modifier.fillMaxSize(1f),
 verticalAlignment = Alignment.CenterVertically,
 horizontalArrangement = Arrangement.Center
) {
 Text(
   text = "Hello World",
   fontWeight = FontWeight.Bold,
   maxLines = 1,
   overflow = TextOverflow.Ellipsis
 )

 Button(onClick = {}) {
   Text("Button Text")
 }
}

و نتیجه :‌

سخن پایانی : 

اگر برنامه نویس اندروید هستید و با شیوه های قدیمی مثل استفاده از XML برنامه نویسی میکنید پیشنهاد میکنیم به جت پک کامپوز مهاجرت کنید و برای یادگیری این بحث جدید زمان بگذارید.

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