در دنیای توسعه اندروید، ساخت رابط کاربری حرفه‌ای، روان و قابل نگهداری اهمیت بسیار زیادی دارد. گوگل برای ساده‌تر کردن فرآیند توسعه UI مجموعه‌ای از کتابخانه‌ها و ابزارها را تحت عنوان Jetpack ارائه کرده است.

کامپوننت‌های رابط کاربری Jetpack به توسعه‌دهندگان کمک می‌کنند تا:

• کدنویسی تمیزتری داشته باشند
• رابط‌های کاربری مدرن بسازند
• مدیریت State را بهتر انجام دهند
• توسعه اپلیکیشن را سریع‌تر کنند
• با معماری‌های مدرن سازگار باشند

در این مقاله با مهم‌ترین کامپوننت‌های رابط کاربری اندروید Jetpack آشنا می‌شویم و کاربرد هرکدام را بررسی می‌کنیم.

Jetpack چیست؟

Android Jetpack مجموعه‌ای از کتابخانه‌ها، ابزارها و معماری‌های رسمی گوگل برای توسعه اندروید است.

Jetpack چند بخش اصلی دارد:

• UI
• Architecture
• Foundation
• Behavior

در این مقاله تمرکز ما روی بخش UI است.

مهم‌ترین کامپوننت‌های رابط کاربری Jetpack

مهم‌ترین ابزارهای UI در Jetpack:

Jetpack Compose

Jetpack Compose جدیدترین سیستم ساخت رابط کاربری اندروید است که به‌صورت Declarative طراحی شده.

در Compose به‌جای XML با Kotlin رابط کاربری می‌سازیم.

مزایای Compose

• کدنویسی کمتر
• توسعه سریع‌تر
• انیمیشن آسان
• مدیریت State بهتر
• هماهنگی کامل با Kotlin
• Preview زنده

اولین Composable

@Composable
fun Greeting() {

    Text(text = "Hello Android")

}

استفاده در Activity

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Greeting()
        }
    }

}

@Composable
fun Counter() {

    var count by remember {
        mutableStateOf(0)
    }

    Button(
        onClick = {
            count++
        }
    ) {

        Text("Count : $count")

    }

}

LazyColumn

جایگزین RecyclerView در Compose:

LazyColumn {

    items(users) { user ->

        Text(user.name)

    }

}

Navigation Component

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

مزایای Navigation

• مدیریت BackStack
• ارسال آرگومان
• Deep Link
• انیمیشن
• مدیریت Fragmentها

افزودن Dependency

implementation("androidx.navigation:navigation-fragment-ktx:2.9.0")
implementation("androidx.navigation:navigation-ui-ktx:2.9.0")

ساخت NavHost

<navigation>

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.test.HomeFragment" />

</navigation>

findNavController().navigate(
    R.id.profileFragment
)

NavHost(
    navController = navController,
    startDestination = "home"
) {

    composable("home") {
        HomeScreen()
    }

}

فعال‌سازی

buildFeatures {
    viewBinding true
}

استفاده

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

    binding = ActivityMainBinding.inflate(layoutInflater)

    setContentView(binding.root)

}

مزایای ViewBinding

• جلوگیری از NullPointer
• سرعت بیشتر
• تایپ ایمن
• کدنویسی تمیزتر

DataBinding

Data Binding Library امکان اتصال مستقیم داده به UI را فراهم می‌کند.

فعال‌سازی

buildFeatures {
    dataBinding true
}

<layout>

    <data>

        <variable
            name="user"
            type="com.test.User"/>

    </data>

    <TextView
        android:text="@{user.name}" />

</layout>

RecyclerView

RecyclerView برای نمایش لیست‌های بزرگ استفاده می‌شود.

Adapter ساده

class UserAdapter :
    RecyclerView.Adapter<UserAdapter.ViewHolder>()

مزایای RecyclerView

• بهینه‌سازی حافظه
• عملکرد سریع
• پشتیبانی از ViewType
• انیمیشن

Paging Library

Paging Library برای بارگذاری داده‌ها به‌صورت صفحه‌ای استفاده می‌شود.

مزایای Paging

• مصرف کمتر RAM
• مناسب APIهای بزرگ
• اسکرول روان
• Load خودکار

نمونه PagingSource

class UserPagingSource :
    PagingSource<Int, User>()

ConstraintLayout

ConstraintLayout یکی از قدرتمندترین Layoutهای اندروید است.

مزایا

• کاهش Nested Layout
• عملکرد بهتر
• طراحی Responsive
• Chain و Guideline

مثال

<Button
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

MotionLayout

MotionLayout برای ساخت انیمیشن‌های پیچیده استفاده می‌شود.

قابلیت‌ها

• Transition
• Gesture Animation
• KeyFrame
• Animation حرفه‌ای

مثال MotionScene

<Transition
    motion:constraintSetStart="@id/start"
    motion:constraintSetEnd="@id/end"/>

Palette API

Palette رنگ‌های اصلی تصویر را استخراج می‌کند.

کاربردها

• ساخت Theme پویا
• تغییر رنگ Toolbar
• ساخت UI هوشمند

مثال

Palette.from(bitmap).generate { palette ->

    val color = palette?.vibrantSwatch?.rgb

}

Material Design Components

Material Components for Android مجموعه‌ای از کامپوننت‌های طراحی متریال است.

کامپوننت‌های مهم

بهترین معماری UI در اندروید

ترکیب پیشنهادی مدرن:

• MVVM
• Jetpack Compose
• Navigation
• Hilt
• ViewModel
• StateFlow
• Repository Pattern

Compose یا XML؟

آیا XML منسوخ می‌شود؟

فعلا خیر.

بسیاری از پروژه‌های بزرگ هنوز از XML استفاده می‌کنند اما آینده اندروید به سمت Compose حرکت می‌کند.

نکات مهم در طراحی UI اندروید

1. Responsive طراحی کنید

برای:

• موبایل
• تبلت
• Foldable

2. Dark Mode را پشتیبانی کنید

3. انیمیشن بیش‌ازحد استفاده نکنید

4. Accessibility را فراموش نکنید

مثل:

• contentDescription
• فونت مناسب
• کنتراست رنگ

جمع‌بندی

Android Jetpack تحول بزرگی در توسعه رابط کاربری اندروید ایجاد کرده است.

امروزه توسعه‌دهندگان اندروید با استفاده از ابزارهایی مثل:

• Jetpack Compose
• Navigation Component
• RecyclerView
• Paging Library
• MotionLayout

می‌توانند اپلیکیشن‌هایی حرفه‌ای، سریع و مدرن تولید کنند.