שכבות ארכיטקטוניות ב-Jetpack פיתוח נייטיב

בדף הזה יש סקירה כללית של השכבות הארכיטקטוניות שמרכיבות את Jetpack Compose, ושל העקרונות המרכזיים שמשפיעים על העיצוב הזה.

‫Jetpack Compose הוא לא פרויקט מונוליטי יחיד, אלא הוא נוצר ממספר מודולים שמשולבים יחד כדי ליצור סטאק מלא. הבנה של המודולים השונים שמרכיבים את Jetpack Compose מאפשרת לכם:

• שימוש ברמת ההפשטה המתאימה כדי לבנות את האפליקציה או הספרייה
• להבין מתי אפשר 'לרדת' לרמה נמוכה יותר כדי לקבל יותר שליטה או התאמה אישית
• צמצום יחסי התלות

שכבות

השכבות העיקריות של Jetpack פיתוח נייטיב הן:

איור 1. השכבות העיקריות של Jetpack פיתוח נייטיב.

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

זמן ריצה

המודול הזה מספק את היסודות של זמן הריצה של Compose, כמו remember,‏ mutableStateOf,‏ @Composable‏ SideEffect. אפשר לבנות ישירות על השכבה הזו אם אתם צריכים רק את היכולות של Compose לניהול העץ, ולא את ממשק המשתמש שלה.

UI

שכבת ממשק המשתמש מורכבת מכמה מודולים (ui-text,‏ ui-graphics,‏ ui-tooling וכו'). המודולים האלה מיישמים את היסודות של ערכת הכלים לממשק המשתמש, כמו LayoutNode, Modifier, גורמי handler של קלט, פריסות מותאמות אישית וציור. אפשר להשתמש בשכבה הזו אם אתם צריכים רק מושגים בסיסיים של ערכת כלים לממשק משתמש.

Foundation

המודול הזה מספק אבני בניין אגנוסטיות למערכת עיצוב עבור ממשק המשתמש של Compose, כמו Row ו-Column,‏ LazyColumn, זיהוי של תנועות מסוימות וכו'. אפשר לבנות על שכבת הבסיס כדי ליצור מערכת עיצוב משלכם.

חומר

המודול הזה מספק הטמעה של מערכת Material Design עבור Compose UI, ומספק מערכת ערכות נושא, רכיבים מעוצבים, אינדיקציות של אפקט הגלים וסמלים. כשמשתמשים ב-Material Design באפליקציה, כדאי לבנות על השכבה הזו.

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

עיקרון מנחה ב-Jetpack Compose הוא לספק חלקי פונקציונליות קטנים וממוקדים שאפשר להרכיב (או ליצור) יחד, במקום כמה רכיבים מונוליטיים. לגישה הזו יש כמה יתרונות.

בקרה

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

לדוגמה, אם רוצים להנפיש את הצבע של רכיב, אפשר להשתמש ב-API‏ animateColorAsState:

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

עם זאת, אם אתם רוצים שהרכיב תמיד יתחיל באפור, לא תוכלו לעשות זאת באמצעות ה-API הזה. במקום זאת, אפשר להשתמש ב-API ברמה נמוכה יותר: Animatable

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}
ArchitectureLayering.kt

ממשק ה-API ברמה הגבוהה יותר, animateColorAsState, מבוסס על ממשק ה-API ברמה הנמוכה יותר, Animatable. השימוש ב-API ברמה נמוכה יותר מורכב יותר, אבל מאפשר יותר שליטה. בוחרים את רמת ההפשטה שהכי מתאימה לצרכים שלכם.

התאמה אישית

הרכבת רכיבים ברמה גבוהה יותר מאבני בניין קטנות יותר מקלה בהרבה על התאמה אישית של רכיבים אם יש צורך בכך. לדוגמה, שימו לב להטמעה של Button שמופיעה בשכבת Material:

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // set LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}
ArchitectureLayering.kt

Button מורכב מ-4 רכיבים:

1. חומר Surface שמספק את הרקע, הצורה, טיפול בלחיצות וכו'.

2. ‫A CompositionLocalProvider שמשנה את האלפא של התוכן כשהלחצן מופעל או מושבת

3. ‫A ProvideTextStyle מגדיר את סגנון הטקסט שיוגדר כברירת מחדל

4. רכיב Row מספק את מדיניות פריסת ברירת המחדל לתוכן של הלחצן

השמטנו חלק מהפרמטרים וההערות כדי שהמבנה יהיה ברור יותר, אבל הרכיב כולו הוא רק כ-40 שורות קוד כי הוא פשוט מרכיב את 4 הרכיבים האלה כדי להטמיע את הלחצן. רכיבים כמו Button מציגים רק פרמטרים מסוימים, כדי לאפשר התאמות אישיות נפוצות בלי להציף את הרכיב ביותר מדי פרמטרים שיהפכו את השימוש בו למסובך יותר. לדוגמה, רכיבי Material מציעים התאמות אישיות שצוינו במערכת Material Design, ולכן קל לפעול לפי העקרונות של Material Design.

עם זאת, אם רוצים לבצע התאמה אישית מעבר לפרמטרים של רכיב מסוים, אפשר לרדת רמה ולבצע פיצול של רכיב. לדוגמה, ב-Material Design מצוין שללחצנים צריך להיות רקע בצבע אחיד. אם אתם צריכים רקע עם מעבר צבעים, האפשרות הזו לא נתמכת על ידי הפרמטרים Button. במקרה כזה, אפשר להשתמש בהטמעה של Material Button כהפניה ולבנות רכיב משלכם:

@Composable
fun GradientButton(
    // …
    background: List<Color>,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(
                Brush.horizontalGradient(background)
            )
    ) {
        CompositionLocalProvider(/* … */) { // set material LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                content()
            }
        }
    }
}
ArchitectureLayering.kt

ההטמעה שלמעלה ממשיכה להשתמש ברכיבים משכבת Material, כמו המושגים של Material בנושא שקיפות התוכן הנוכחי וסגנון הטקסט הנוכחי. עם זאת, הוא מחליף את החומר Surface בRow ומעצב אותו כדי להשיג את המראה הרצוי.

אם אתם לא רוצים להשתמש בכלל במושגים של Material, למשל אם אתם בונים מערכת עיצוב מותאמת אישית משלכם, אתם יכולים להשתמש רק ברכיבים של שכבת הבסיס:

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // No Material components used
        content()
    }
}
ArchitectureLayering.kt

ב-Jetpack Compose, השמות הכי פשוטים שמורים לרכיבים ברמה הכי גבוהה. לדוגמה, ‫androidx.compose.material.Text מבוסס על ‫androidx.compose.foundation.text.BasicText. כך תוכלו לספק הטמעה משלכם עם השם הכי קל לזיהוי אם אתם רוצים להחליף רמות גבוהות יותר.

בחירת ההפשטה הנכונה

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

לדוגמה, אם רוצים להוסיף תמיכה במחוות לרכיב מותאם אישית, אפשר ליצור אותו מאפס באמצעות Modifier.pointerInput, אבל יש רכיבים אחרים ברמה גבוהה יותר שנבנו על בסיס הרכיב הזה, שיכולים להיות נקודת התחלה טובה יותר. לדוגמה, Modifier.draggable,‏ Modifier.scrollable או Modifier.swipeable.

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

מידע נוסף

אפשר לראות דוגמה ליצירת מערכת עיצוב בהתאמה אישית בדוגמה של Jetsnack.