המבנה של עיצוב בנייטיב

העיצובים ב-Jetpack פיתוח נייטיב מורכבים מכמה מבנים ברמה נמוכה וממשקי API קשורים. כאן תוכלו לראות קוד מקור של MaterialTheme ואפשר גם ליישם אותו במערכות עיצוב בהתאמה אישית.

מחלקות של מערכות עיצוב

נושא מורכב בדרך כלל ממספר מערכות שמקבצים ומושגים התנהגותיים. אפשר ליצור מודלים של המערכות האלה באמצעות סיווגים שלהם,

לדוגמה, MaterialTheme כולל Colors (מערכת צבעים), Typography (מערכת טיפוגרפיה), וגם Shapes (מערכת צורה).

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

/* ... */

שילוב מקומי של מערכת עיצוב

מחלקות של מערכות עיצוב מסופקות במרומז לעץ היצירה כ CompositionLocal במקרים שונים. כך אפשר להפנות לערכי נושא באופן סטטי בתוכן קומפוזבילי למשימות ספציפיות.

למידע נוסף על CompositionLocal, כדאי לעיין נתונים בהיקף מקומי בעזרת מדריך של CompositionLocal.

val LocalColorSystem = staticCompositionLocalOf {
    ColorSystem(
        color = Color.Unspecified,
        gradient = emptyList()
    )
}

val LocalTypographySystem = staticCompositionLocalOf {
    TypographySystem(
        fontFamily = FontFamily.Default,
        textStyle = TextStyle.Default
    )
}

val LocalCustomSystem = staticCompositionLocalOf {
    CustomSystem(
        value1 = 0,
        value2 = ""
    )
}

/* ... */

פונקציית עיצוב

פונקציית העיצוב היא נקודת הכניסה וה-API הראשי. הוא בונה מכונות של מערכות העיצוב CompositionLocal – תוך שימוש בערכים אמיתיים בכל לוגיקה הנדרשים — שמסופקים לעץ הקומפוזיציה עם CompositionLocalProvider. הפרמטר content מאפשר לתכנים קומפוזביליים בתוך תכנים קומפוזביליים לגשת לערכי נושאים ביחס להיררכיה.

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}

אובייקט עיצוב

הגישה למערכות עיצוב מתבצעת דרך אובייקט עם מאפייני נוחות. עבור ועקביות, בדרך כלל השם של האובייקט זהה לשם של פונקציית העיצוב. פשוט מקבלים את ההרכב הנוכחי של ההרכב.

// Use with eg. Theme.colorSystem.color
object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}