آموزش کار با Jetpack Compose در اندروید

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

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

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

Jetpack Compose چیست؟

Jetpack Compose یک فریمورک مدرن برای ساخت رابط کاربری در اندروید است که بر اساس Declarative UI کار می‌کند.

در روش سنتی:

• شما XML می‌نوشتید
• سپس در Kotlin/Java آن را کنترل می‌کردید

اما در Compose:

• همه‌چیز در Kotlin نوشته می‌شود
• UI بر اساس State ساخته می‌شود

تفاوت Compose با XML

اولین پروژه در Jetpack Compose

برای استفاده از Compose باید آن را در پروژه فعال کنید.

تنظیم Gradle

buildFeatures {
    compose true
}

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.3"
}

ساخت اولین UI با Compose

در Compose به جای XML از تابع استفاده می‌کنیم.

مثال ساده Text

@Composable
fun Greeting() {
    Text(text = "سلام Jetpack Compose")
}

مفهوم مهم: @Composable

هر تابعی که UI تولید کند باید با این annotation مشخص شود:

@Composable
fun MyUI() {
    Text("Hello")
}

ساخت صفحه کامل با Compose

@Composable
fun MainScreen() {

    Column {

        Text(
            text = "صفحه اصلی",
        )

        Button(onClick = {}) {
            Text("کلیک کن")
        }
    }
}

State در Jetpack Compose

یکی از مهم‌ترین مفاهیم در Jetpack Compose مدیریت State است.

مثال State

@Composable
fun Counter() {

    var count by remember { mutableStateOf(0) }

    Column {

        Text("Count: $count")

        Button(onClick = {
            count++
        }) {
            Text("افزایش")
        }
    }
}

remember چیست؟

remember باعث می‌شود مقدار State در هنگام Recomposition حفظ شود.

Column و Row در Compose

Column (عمودی)

Column {

    Text("آیتم 1")

    Text("آیتم 2")
}

Row (افقی)

Row {

    Text("چپ")

    Text("راست")
}

Modifier چیست؟

Modifier در Compose برای:

• اندازه
• padding
• رنگ
• alignment

استفاده می‌شود.

مثال Modifier

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

ساخت Button در Compose

Button(onClick = {}) {

    Text("ثبت")
}

Image در Jetpack Compose

Image(
    painter = painterResource(id = R.drawable.image),
    contentDescription = null
)

LazyColumn (لیست حرفه‌ای)

برای لیست‌ها:

LazyColumn {

    items(100) { index ->

        Text("Item $index")
    }
}

چرا LazyColumn مهم است؟

• بهینه برای لیست‌های بزرگ
• فقط آیتم‌های قابل مشاهده را رندر می‌کند

Navigation در Compose

برای جابه‌جایی بین صفحات از Navigation استفاده می‌شود.

مثال ساده:

NavHost(navController, startDestination = "home") {

    composable("home") {
        HomeScreen()
    }

    composable("detail") {
        DetailScreen()
    }
}

مزایای Jetpack Compose

✅ کدنویسی کمتر

UI و Logic در یک جا

✅ Reactive UI

UI خودکار با تغییر State آپدیت می‌شود

✅ سرعت بالا در توسعه

بدون XML

✅ قابلیت Preview

@Preview
@Composable
fun PreviewUI() {
    Text("Preview")
}

مشکلات رایج در Compose

❌ استفاده اشتباه از State

اگر State درست مدیریت نشود:

• Recomposition زیاد می‌شود

❌ عدم استفاده از remember

باعث reset شدن داده‌ها می‌شود

معماری پیشنهادی

در پروژه‌های حرفه‌ای Compose معمولاً از:

• MVVM
• ViewModel
• StateFlow

استفاده می‌شود.

مثال ViewModel

class MyViewModel : ViewModel() {

    var text by mutableStateOf("Hello")
        private set

    fun update() {
        text = "Updated"
    }
}

اتصال ViewModel به Compose

@Composable
fun Screen(vm: MyViewModel) {

    Text(vm.text)
}

بهترین روش‌ها در Jetpack Compose

✅ UI را کوچک طراحی کنید

هر Composable یک وظیفه

✅ از State مدیریت‌شده استفاده کنید

ViewModel + StateFlow

✅ از Modifier استفاده کنید

برای کنترل Layout

✅ از LazyColumn به جای Column برای لیست

آینده Jetpack Compose

Jetpack Compose به‌سرعت در حال تبدیل شدن به استاندارد اصلی توسعه UI در اندروید است.

بسیاری از پروژه‌های جدید گوگل نیز با Compose ساخته می‌شوند.

جمع‌بندی

در این مقاله یاد گرفتیم که Jetpack Compose چیست و چگونه در توسعه UI مدرن اندروید استفاده می‌شود.

Compose:

• کدنویسی UI را ساده‌تر کرده
• سرعت توسعه را افزایش داده
• و معماری برنامه را تمیزتر کرده است

اگر قصد ورود حرفه‌ای به دنیای اندروید را دارید، یادگیری Jetpack Compose یک ضرورت است، نه انتخاب.