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

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

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

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

שכבות

השכבות העיקריות של Jetpack Compose הן:

איור 1. השכבות העיקריות של Jetpack Compose.

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

זמן ריצה

במודול הזה מוסבר על היסודות של זמן הריצה של Compose, כמו remember,‏ mutableStateOf,‏ @Composable‏ annotation ו-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 אפשר לראות איך יוצרים מערכת עיצוב בהתאמה אישית.