Android و Jetpack Compose؛ UI بدون XML جنگلی

اینجا کاتلین می‌ره روی گوشی و UI رو با کد تمیز می‌سازه.

درس 16 از 20

Compose چیه؟

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

مثال را با چند مقدار دیگر هم امتحان کن؛ چون برنامه‌نویسی با نگاه کردن یاد گرفته نمی‌شود، با خراب کردن و درست کردن جا می‌افتد.

نکته کاربردی: این بخش اسکلت ذهنی درس را می‌سازد. وقتی بدانی این قطعه دقیقاً چه مسئله‌ای را حل می‌کند، بعداً موقع پروژه فقط syntax حفظی تحویل نمی‌دهی؛ تصمیم درست می‌گیری. این توضیح قرار است دید پروژه‌ای بدهد، نه اینکه فقط تعریف کتابی حفظ کنی.

Composable ساده

تابع‌هایی که UI تولید می‌کنن با `@Composable` مشخص می‌شن. هر composable بهتره کوچک، خوانا و قابل ترکیب باشه؛ مثل لگو، نه مثل بتن یک‌تکه.

مثال را با چند مقدار دیگر هم امتحان کن؛ چون برنامه‌نویسی با نگاه کردن یاد گرفته نمی‌شود، با خراب کردن و درست کردن جا می‌افتد.

Composable

@Composable
fun Greeting(name: String) {
    Text(text = "سلام $name")
}

خروجی یا نتیجه اجرا

روی صفحه متن «سلام Ali» یا هر اسمی که پاس بدهی نمایش داده می‌شود.

نکته کاربردی: اینجا باید به رفتار کد نگاه کنی، نه فقط ظاهرش. مقدارها را عوض کن و دوباره اجرا بگیر تا دستت بفهمد برنامه چطور واکنش نشان می‌دهد. اگر خروجی با چیزی که انتظار داشتی فرق کرد، اول مقدار متغیرها و مسیر اجرا را چک کن؛ ۹۰٪ باگ‌های اول راه همین‌جا قایم شده‌اند.

State در Compose

وقتی state تغییر کنه، Compose UI رو دوباره می‌سازه. باید state رو درست نگه داری تا UI مثل آدم واکنش نشون بده.

مثال را با چند مقدار دیگر هم امتحان کن؛ چون برنامه‌نویسی با نگاه کردن یاد گرفته نمی‌شود، با خراب کردن و درست کردن جا می‌افتد.

remember state

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("کلیک‌ها: $count")
    }
}

خروجی یا نتیجه اجرا

هر بار روی Button بزنی عدد کلیک‌ها یکی بیشتر می‌شود؛ خروجی بصری است نه کنسولی.

نکته کاربردی: این الگو در پروژه واقعی زیاد تکرار می‌شود. از همین حالا تمیز و خوانا بنویس تا بعداً موقع دیباگ، خودت به خودت فحش ندهی. اگر خروجی با چیزی که انتظار داشتی فرق کرد، اول مقدار متغیرها و مسیر اجرا را چک کن؛ ۹۰٪ باگ‌های اول راه همین‌جا قایم شده‌اند.

لیست ساده

برای لیست‌ها از `LazyColumn` استفاده می‌کنی؛ چون اگر هزار آیتم داری، قرار نیست همه با هم بیفتن روی دوش گوشی بیچاره.

مثال را با چند مقدار دیگر هم امتحان کن؛ چون برنامه‌نویسی با نگاه کردن یاد گرفته نمی‌شود، با خراب کردن و درست کردن جا می‌افتد.

LazyColumn

@Composable
fun LanguageList(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            Text(text = item)
        }
    }
}

خروجی یا نتیجه اجرا

یک لیست عمودی از آیتم‌ها روی صفحه ساخته می‌شود.

نکته کاربردی: نکته حرفه‌ای این است که Kotlin معمولاً راه کوتاه‌تر دارد، ولی کوتاه‌تر همیشه بهتر نیست. اول خوانایی، بعد زرنگ‌بازی. اگر خروجی با چیزی که انتظار داشتی فرق کرد، اول مقدار متغیرها و مسیر اجرا را چک کن؛ ۹۰٪ باگ‌های اول راه همین‌جا قایم شده‌اند.

نتیجه این درس 🎯

Compose یعنی UI را با خود Kotlin بسازی، نه با XMLهای جنگلی. state را بفهمی، نصف مسیر ساخت UIهای تعاملی را رفته‌ای.

تمرین! 🧠

یک composable بنویس که عنوان دوره و تعداد درس‌ها را نمایش دهد.

جواب تمرین

@Composable
fun CourseCard(title: String, lessons: Int) {
    Column {
        Text(text = title)
        Text(text = "تعداد درس‌ها: $lessons")
    }
}

خروجی جواب

خروجی بصری: یک کارت ساده با عنوان دوره و تعداد درس‌ها.