لایه‌بندی معماری Jetpack Compose

این صفحه یک نمای کلی سطح بالا از لایه‌های معماری تشکیل‌دهنده Jetpack Compose و اصول اصلی‌ای که طراحی آن را شکل می‌دهند ارائه می‌کند.

Jetpack Compose یک پروژه یکپارچه و تک‌بخشی نیست؛ بلکه از چندین ماژول ساخته شده که کنار هم قرار می‌گیرند تا یک stack کامل را تشکیل دهند. درک ماژول‌های مختلفی که Jetpack Compose را می‌سازند به شما کمک می‌کند:

• از سطح abstraction مناسب برای ساخت اپلیکیشن یا کتابخانه خود استفاده کنید.
• بفهمید چه زمانی می‌توانید برای کنترل یا سفارشی‌سازی بیشتر به یک سطح پایین‌تر بروید.
• وابستگی‌های خود را کاهش دهید.

لایه‌ها

لایه‌های اصلی Jetpack Compose عبارت‌اند از:

هر لایه روی لایه‌های پایین‌تر ساخته شده است و با ترکیب قابلیت‌ها، componentهای سطح بالاتری ایجاد می‌کند. هر لایه بر اساس APIهای عمومی لایه‌های پایین‌تر ساخته می‌شود تا مرزهای ماژول‌ها حفظ شود و در صورت نیاز بتوانید هر لایه را جایگزین کنید.

بیایید این لایه‌ها را از پایین به بالا بررسی کنیم.

Runtime

این ماژول پایه‌های اصلی runtime مربوط به Compose را فراهم می‌کند؛ مانند remember، mutableStateOf، annotation به نام @Composable و SideEffect.

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

UI

لایه UI از چندین ماژول تشکیل شده است؛ مانند ui-text، ui-graphics، ui-tooling و موارد دیگر.

این ماژول‌ها پایه‌های toolkit رابط کاربری را پیاده‌سازی می‌کنند؛ مانند LayoutNode، Modifier، input handlerها، layoutهای سفارشی و drawing.

اگر فقط به مفاهیم پایه‌ای یک UI toolkit نیاز دارید، می‌توانید روی این لایه کار کنید.

Foundation

این ماژول building blockهای مستقل از design system را برای Compose UI فراهم می‌کند؛ مانند Row، Column، LazyColumn، تشخیص gestureهای خاص و موارد دیگر.

اگر می‌خواهید design system مخصوص خودتان را بسازید، می‌توانید روی لایه Foundation کار کنید.

Material

این ماژول پیاده‌سازی سیستم Material Design را برای Compose UI فراهم می‌کند؛ از جمله سیستم theming، componentهای style شده، ripple indicationها و iconها.

اگر در اپلیکیشن خود از Material Design استفاده می‌کنید، روی این لایه کار کنید.

اصول طراحی

یکی از اصول راهنمای Jetpack Compose این است که به‌جای چند component بزرگ و یکپارچه، قابلیت‌های کوچک و متمرکز ارائه دهد که بتوان آن‌ها را کنار هم قرار داد یا compose کرد.

این رویکرد چند مزیت دارد.

کنترل

Componentهای سطح بالاتر معمولاً کارهای بیشتری را برای شما انجام می‌دهند، اما میزان کنترل مستقیم شما را محدود می‌کنند. اگر به کنترل بیشتری نیاز داشته باشید، می‌توانید به سطح پایین‌تر بروید و از componentهای سطح پایین‌تر استفاده کنید.

برای مثال، اگر بخواهید رنگ یک component را animate کنید، ممکن است از API به نام animateColorAsState استفاده کنید:

val color = animateColorAsState(if (condition) Color.Green else Color.Red)

اما اگر لازم باشد component همیشه از رنگ خاکستری شروع شود، نمی‌توانید این کار را با این API انجام دهید. در عوض، می‌توانید به سطح پایین‌تر بروید و از API به نام Animatable استفاده کنید:

val color = remember { Animatable(Color.Gray) }

LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // تنظیم LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}

@Composable
fun GradientButton(
    // …
    background: List<Color>,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(
                Brush.horizontalGradient(background)
            )
    ) {
        CompositionLocalProvider(/* … */) { // تنظیم LocalContentAlpha مربوط به Material
            ProvideTextStyle(MaterialTheme.typography.button) {
                content()
            }
        }
    }
}

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // هیچ componentای از Material استفاده نشده است
        content()
    }
}