فکر کردن در Compose

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

الگوی برنامه‌نویسی اعلانی

در گذشته، سلسله‌مراتب View در اندروید به‌صورت یک درخت از ویجت‌های رابط کاربری نمایش داده می‌شد. وقتی وضعیت برنامه به دلیل مواردی مانند تعامل کاربر تغییر می‌کرد، سلسله‌مراتب رابط کاربری نیز باید به‌روزرسانی می‌شد تا داده فعلی را نمایش دهد. رایج‌ترین روش برای به‌روزرسانی UI این بود که درخت View را با توابعی مثل findViewById() پیمایش کنیم و سپس نودها را با فراخوانی متدهایی مانند button.setText(String)، container.addChild(View) یا img.setImageBitmap(Bitmap) تغییر دهیم. این متدها وضعیت داخلی ویجت را تغییر می‌دهند.

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

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

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

نمونه‌ای از یک تابع Composable

با استفاده از Compose، می‌توانید رابط کاربری خود را با تعریف مجموعه‌ای از توابع Composable بسازید. این توابع داده دریافت می‌کنند و عناصر UI تولید می‌کنند. برای مثال، یک ویجت Greeting یک مقدار از نوع String دریافت می‌کند و یک ویجت Text تولید می‌کند که پیام خوشامدگویی را نمایش می‌دهد.

شکل ۱. یک تابع Composable که داده دریافت می‌کند و از آن برای رندر کردن یک ویجت متنی روی صفحه استفاده می‌کند.

چند نکته مهم درباره این تابع:

Annotation: این تابع با annotation به نام @Composable مشخص شده است. همه توابع Composable باید این annotation را داشته باشند. این annotation به کامپایلر Compose اطلاع می‌دهد که این تابع قرار است داده را به رابط کاربری تبدیل کند.

ورودی داده: تابع داده دریافت می‌کند. توابع Composable می‌توانند پارامتر بپذیرند و این پارامترها به منطق برنامه اجازه می‌دهند UI را توصیف کند. در این مثال، ویجت ما یک String دریافت می‌کند تا بتواند با نام کاربر به او خوشامد بگوید.

نمایش UI: تابع متن را در رابط کاربری نمایش می‌دهد. این کار را با فراخوانی تابع Composable به نام Text() انجام می‌دهد که در واقع عنصر متنی UI را ایجاد می‌کند. توابع Composable با فراخوانی سایر توابع Composable، سلسله‌مراتب UI را تولید می‌کنند.

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

ویژگی‌ها: این تابع سریع، idempotent و بدون side-effect است.

تابع وقتی چند بار با یک آرگومان یکسان فراخوانی شود، رفتار یکسانی دارد و از مقادیر دیگری مانند متغیرهای global یا فراخوانی random() استفاده نمی‌کند.

تابع UI را بدون هیچ side-effect توصیف می‌کند؛ یعنی بدون تغییر دادن propertyها یا متغیرهای global.

به‌طور کلی، همه توابع Composable باید با این ویژگی‌ها نوشته شوند؛ دلایل آن در بخش Recomposition توضیح داده می‌شود.

تغییر الگوی ذهنی به سمت روش اعلانی

در بسیاری از ابزارهای رابط کاربری دستوری و شیءگرا، شما UI را با ساختن یک درخت از ویجت‌ها مقداردهی اولیه می‌کنید. معمولاً این کار را با inflate کردن یک فایل XML layout انجام می‌دهید. هر ویجت وضعیت داخلی خودش را نگه می‌دارد و متدهای getter و setter ارائه می‌کند تا منطق برنامه بتواند با آن ویجت تعامل داشته باشد.

در رویکرد اعلانی Compose، ویجت‌ها نسبتاً بدون State هستند و توابع setter یا getter ارائه نمی‌کنند. در واقع، ویجت‌ها به‌عنوان object در اختیار شما قرار نمی‌گیرند. شما UI را با فراخوانی همان تابع Composable با آرگومان‌های متفاوت به‌روزرسانی می‌کنید. این کار ارائه State به الگوهای معماری مانند ViewModel را ساده‌تر می‌کند. سپس Composableهای شما مسئول هستند هر بار که داده قابل مشاهده تغییر می‌کند، وضعیت فعلی برنامه را به UI تبدیل کنند.

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

وقتی کاربر با UI تعامل می‌کند، UI رویدادهایی مانند onClick ایجاد می‌کند. این رویدادها باید منطق برنامه را مطلع کنند تا منطق برنامه بتواند State اپلیکیشن را تغییر دهد. وقتی State تغییر کند، توابع Composable دوباره با داده جدید فراخوانی می‌شوند. این باعث می‌شود عناصر UI دوباره رسم شوند. این فرایند Recomposition نام دارد.

شکل ۳. کاربر با یک عنصر UI تعامل کرده و باعث ایجاد یک رویداد شده است. منطق برنامه به آن رویداد پاسخ می‌دهد، سپس در صورت نیاز، توابع Composable به‌صورت خودکار با پارامترهای جدید دوباره فراخوانی می‌شوند.

محتوای پویا

از آنجایی که توابع Composable به‌جای XML با Kotlin نوشته می‌شوند، می‌توانند مانند هر کد Kotlin دیگری پویا باشند. برای مثال، فرض کنید می‌خواهید یک UI بسازید که به فهرستی از کاربران خوشامد بگوید:

@Composable
fun Greeting(names: List<String>) {
    for (name in names) {
        Text("Hello $name")
    }
}

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {
    Button(onClick = onClick) {
        Text("I've been clicked $clicks times")
    }
}

@Composable
fun SharedPrefsToggle(
    text: String,
    value: Boolean,
    onValueChanged: (Boolean) -> Unit
) {
    Row {
        Text(text)
        Checkbox(checked = value, onCheckedChange = onValueChanged)
    }
}

/**
 * نمایش فهرستی از نام‌ها که کاربر می‌تواند روی آن‌ها کلیک کند، همراه با یک header
 */
@Composable
fun NamePicker(
    header: String,
    names: List<String>,
    onNameClicked: (String) -> Unit
) {
    Column {
        // این بخش وقتی [header] تغییر کند recomposition می‌شود،
        // اما وقتی [names] تغییر کند recomposition نمی‌شود
        Text(header, style = MaterialTheme.typography.bodyLarge)
        HorizontalDivider()

        // LazyColumn نسخه Compose از RecyclerView است.
        LazyColumn {
            items(names) { name ->
                // وقتی [name] یک آیتم به‌روزرسانی شود،
                // adapter مربوط به آن آیتم recomposition می‌شود.
                NamePickerItem(name, onNameClicked)
            }
        }
    }
}

/**
 * نمایش یک نام که کاربر می‌تواند روی آن کلیک کند.
 */
@Composable
private fun NamePickerItem(name: String, onClicked: (String) -> Unit) {
    Text(name, Modifier.clickable(onClick = { onClicked(name) }))
}

@Composable
fun ListComposable(myList: List<String>) {
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Column {
            for (item in myList) {
                Text("Item: $item")
            }
        }
        Text("Count: ${myList.size}")
    }
}

@Composable
fun ListWithBug(myList: List<String>) {
    var items = 0

    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Column {
            for (item in myList) {
                Card {
                    Text("Item: $item")
                    items++ // اجتناب کنید! این یک side-effect ناشی از recomposition شدن Column است.
                }
            }
        }
        Text("Count: $items")
    }
}

@Composable
fun ButtonRow() {
    MyFancyNavigation {
        StartScreen()
        MiddleScreen()
        EndScreen()
    }
}