שכבות ארכיטקטוניות ב-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. רכיב Material 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 אפשר לראות איך יוצרים מערכת עיצוב בהתאמה אישית.