نوشتن کدهای تمیز و کارآمد، کلید موفقیت در توسعه اندروید است و extension functions به ما کمک می‌کنند که قابلیت‌های کلاس‌های موجود را بدون تغییر دادن آن‌ها گسترش دهیم. برای توسعه‌دهندگان Jetpack Compose، این extension functions به‌ویژه می‌توانند به بهبود واکنش‌پذیری و کارایی رابط کاربری (UI) کمک کنند. همچنین برای مواقعی که هنوز با سیستم نمایشی (view system) کار می‌کنید، چند extension functions ضروری را هم بررسی می‌کنیم که کد شما را در آنجا نیز ساده‌تر کند.

در این مقاله، پنج extension functions برتر را که هر توسعه‌دهنده Jetpack Compose باید در جعبه‌ابزارش داشته باشد، بررسی می‌کنیم و همچنین پنج extension functions اضافی برای کار با سیستم نمایشی معرفی می‌کنیم.

پنج Extension Functions برتر برای Jetpack Compose

۱. Modifier.clickableWithRipple

اثر ریپِل (Ripple effect) یکی از جنبه‌های کلیدی طراحی متریال است که به کاربران نشان می‌دهد یک آیتم قابل کلیک است. در حالی که Modifier.clickable در Jetpack Compose یک اثر کلیک پایه‌ای را ارائه می‌دهد، اضافه کردن اثر ریپِل می‌تواند بازخورد بهتری برای UI فراهم کند. این extension function اضافه کردن اثر ریپِل به هر کامپوننت قابل کلیک را ساده می‌کند.

fun Modifier.clickableWithRipple(onClick: () -> Unit): Modifier {
    return this.clickable(
        indication = rememberRipple(), // نشانه‌گذاری ریپِل
        interactionSource = remember { MutableInteractionSource() }, // مدیریت تعاملات چندگانه
        onClick = onClick
    )
}

مثال استفاده:

Text(
     text = "Click Me",
     modifier = Modifier.clickableWithRipple {
         println("Text clicked!")
     }
 )

۲. LazyColumn.scrollToTop

در Jetpack Compose، LazyColumn معمولاً برای نمایش لیست‌ها استفاده می‌شود. اما برگشت به بالای لیست کار ساده‌ای نیست. این extension function به شما این امکان را می‌دهد که مستقیماً scrollToTop() را روی یک LazyListState فراخوانی کنید.

suspend fun LazyListState.scrollToTop() {
    animateScrollToItem(0)
}

مثال استفاده:

val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        Text(text = "Item #$index")
    }
}

// Trigger the scroll to top
LaunchedEffect(Unit) {
    listState.scrollToTop()
}

۳. Modifier.roundedBackgroundWithPadding

این extension function به شما اجازه می‌دهد که گوشه‌های گرد و padding را به هر کامپوننت قابل ترکیب (composable) در یک خط اضافه کنید و کد تکراری را ساده‌تر کنید.

fun Modifier.roundedBackgroundWithPadding(
    backgroundColor: Color,
    cornerRadius: Dp,
    padding: Dp
): Modifier {
    return this
        .background(backgroundColor, shape = RoundedCornerShape(cornerRadius))
        .padding(padding)
}

مثال استفاده:

Text(
    text = "Rounded Background with Padding",
    modifier = Modifier.roundedBackgroundWithPadding(
        backgroundColor = Color.LightGray,
        cornerRadius = 12.dp,
        padding = 8.dp
    )
)

۴. Modifier.showIf

این extension function برای تغییر دید (visibility) با استفاده از یک شرط بولی به کار می‌آید و زنجیره‌ی مودفایر را تمیز نگه می‌دارد و از استفاده مستقیم از شرط‌های if در کامپوننت جلوگیری می‌کند.

fun Modifier.showIf(condition: Boolean): Modifier {
    return if (condition) this else Modifier.size(0.dp)
}

مثال استفاده:

Text(
    text = "Conditionally Visible",
    modifier = Modifier.showIf(isVisible)
)

اگر isVisible نادرست باشد، کامپوننت Text به‌طور مؤثر مخفی می‌شود.

۵. Modifier.animateVisibility

برای ایجاد یک اثر محو شدن (fade-in) و محو شدن (fade-out) بر اساس یک شرط دید، از این extension function animateVisibility استفاده کنید. این تابع از alpha برای نمایش یا پنهان کردن تدریجی کامپوننت استفاده می‌کند.

fun Modifier.animateVisibility(isVisible: Boolean): Modifier {
    return if (isVisible) {
        this.alpha(1f)
    } else {
        this.alpha(0f)
    }
}

مثال استفاده:

Text(
    text = "Animated Visibility",
    modifier = Modifier.animateVisibility(isVisible)
)

 پنج Extension Functions ضروری برای View System

۱. View.visible() / View.gone()

تغییر بین VISIBLE و GONE یکی از کارهای رایج است. این extension functions کار تغییر دید را به‌طور مستقیم روی یک View ساده‌تر می‌کنند.

fun View.visible() {
    this.visibility = View.VISIBLE
}

fun View.gone() {
    this.visibility = View.GONE
}

مثال استفاده:

myView.visible() // نمایش view
myView.gone() // پنهان کردن view با تنظیم آن به GONE

۲. View.showIf(condition: Boolean)

مشابه تابع showIf در Jetpack Compose، این extension function دید یک View را بر اساس یک شرط بولی تغییر می‌دهد.

fun View.showIf(condition: Boolean) {
    this.visibility = if (condition) View.VISIBLE else View.GONE
}

مثال استفاده:

myView.showIf(isDataAvailable)

۳. TextView.setTextColorRes(resId: Int)

تنظیم رنگ‌ها با استفاده از شناسه‌های منابع (resource IDs) به حفظ ثبات کمک می‌کند. این extension function اجازه می‌دهد که یک رنگ منبع را به‌طور مستقیم روی یک TextView تنظیم کنید و خوانایی را بهبود ببخشید.

fun TextView.setTextColorRes(@ColorRes resId: Int) {
    this.setTextColor(ContextCompat.getColor(context, resId))
}

مثال استفاده:

kotlin

myTextView.setTextColorRes(R.color.primaryColor)

۴. EditText.clearText()

پاک کردن یک EditText کار رایجی است که معمولاً با تنظیم یک رشته خالی انجام می‌شود. این extension function کد را تمیز و بیانگر نگه می‌دارد.

fun EditText.clearText() {
    this.setText("")
}

مثال استفاده:

myEditText.clearText() // پاک کردن متن در EditText

۵. ImageView.loadImage(url: String)

بارگذاری تصاویر با کتابخانه‌هایی مثل Glide یا Coil ساده‌تر شده است. این extension function Glide را ادغام می‌کند و به شما این امکان را می‌دهد که تصاویر را به‌طور مستقیم با یک URL بارگذاری کنید.

fun ImageView.loadImage(url: String) {
    Glide.with(this.context)
        .load(url)
        .into(this)
}

مثال استفاده:

myImageView.loadImage("https://example.com/image.jpg")

نتیجه‌گیری

Extension functions ابزار قدرتمندیدر توسعه اندروید هستند که به شما این امکان را می‌دهند که کدهای تمیزتر و بیانی‌تری بنویسید. با گنجاندن این توابع، می‌توانید فرآیند توسعه را ساده‌تر کنید و کار با Jetpack Compose و همچنین سیستم نمایشی سنتی را راحت‌تر کنید.