מגבלות וסדר מגביל

ב-Compose, אפשר לשרשר כמה משנים כדי לשנות את המראה והתחושה של רכיב שאפשר להרכיב. שרשראות של מגדירי התנהגות יכולות להשפיע על האילוצים שמועברים לרכיבים הניתנים להרכבה, שמגדירים את הגבולות של הרוחב והגובה.

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

גורמי שינוי בעץ ממשק המשתמש

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

בעץ ממשק המשתמש, אפשר לראות את שינויי המאפיינים כצמתי wrapper עבור צמתי הפריסה:

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

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

כפי שמוצג באיור 2, ההטמעה של רכיבי ה-Composable‏ Image ו-Text עצמם מורכבת משרשרת של משנים שעוטפים צומת פריסה יחיד.

ההטמעות של Row ושל Column הן צמתי פריסה שמתארים איך לפרוס את הצמתים הצאצאים שלהם.

לסיכום:

• המאפיין modifiers עוטף צומת יחיד של modifier או layout.
• צמתי פריסה יכולים לפרוס כמה צמתי צאצא.

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

אילוצים בשלב הפריסה

בשלב הפריסה, אלגוריתם בן שלושה שלבים מוצא את הרוחב, הגובה וקואורדינטות ה-x וה-y של כל צומת פריסה:

1. מדידת ילדים: צומת מודד את הצמתים המשניים שלו, אם יש כאלה.
2. קביעת גודל עצמאי: על סמך המידות האלה, הצומת קובע את הגודל שלו.
3. מיקום ילדים: כל צומת צאצא ממוקם ביחס למיקום של הצומת עצמו.

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

סוגים של אילוצים

אילוצים יכולים להיות אחד מהסוגים הבאים:

• מוגבל: ל-node יש רוחב וגובה מקסימליים ומינימליים.

• Unbounded: הגודל של הצומת לא מוגבל. הגבולות המקסימליים של הרוחב והגובה מוגדרים כאינסוף.

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

• שילוב: הצומת פועל לפי שילוב של סוגי האילוצים הקודמים. לדוגמה, אפשר להגביל את הרוחב ולאפשר גובה מקסימלי לא מוגבל, או להגדיר רוחב מדויק אבל לספק גובה מוגבל.

בקטע הבא מוסבר איך ההגבלות האלה מועברות מהורה לצאצא.

איך אילוצים מועברים מרכיב ראשי לרכיב משני

במהלך השלב הראשון של האלגוריתם שמתואר בקטע Constraints in the layout phase, ההגבלות מועברות מהרכיב הראשי לרכיב המשני בעץ ממשק המשתמש.

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

באופן כללי, האלגוריתם פועל כך:

1. כדי להחליט על הגודל שהוא רוצה לתפוס, צומת הבסיס בעץ ממשק המשתמש מודד את הצמתים הצאצאים שלו ומעביר את אותן מגבלות לצומת הצאצא הראשון שלו.
2. אם רכיב הצאצא הוא משנה שלא משפיע על המדידה, הוא מעביר את האילוצים למשנה הבא. האילוצים מועברים בשרשרת של משני המדידה כמו שהם, אלא אם מגיעים למשנה מדידה שמשפיע על המדידה. לאחר מכן, הגודל של האילוצים משתנה בהתאם.
3. אחרי שמגיעים לצומת שאין לו צאצאים (שנקרא 'צומת עלה'), הוא מחליט על הגודל שלו על סמך האילוצים שהועברו, ומחזיר את הגודל הזה להורה שלו.
4. האלמנט ההורה מתאים את המגבלות שלו על סמך המידות של אלמנט הצאצא, וקורא לאלמנט הצאצא הבא עם המגבלות המותאמות האלה.
5. אחרי שמודדים את כל הילדים של הורה מסוים, צומת ההורה מחליט על הגודל שלו ומעביר את המידע הזה להורה שלו.
6. כך, כל העץ נסרק לעומק. בסופו של דבר, כל הצמתים מחליטים על הגודל שלהם, ושלב המדידה מסתיים.

דוגמה מפורטת מופיעה בסרטון Constraints and modifier order.

משנים שמשפיעים על אילוצים

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

הערך המקדם size

המשנה size מציין את הגודל המועדף של התוכן.

לדוגמה, עץ ממשק המשתמש הבא צריך להיות מוצג בקונטיינר של 300dp בגודל 200dp. האילוצים מוגבלים, כך שהרוחב יכול להיות בין 100dp ל-300dp, והגובה יכול להיות בין 100dp ל-200dp:

המשנה size מתאים את האילוצים הנכנסים כך שיתאימו לערך שמועבר אליו. בדוגמה הזו, הערך הוא 150dp:

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

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

הערך המקדם requiredSize

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

כשהגודל מועבר חזרה במעלה העץ, צומת הצאצא ימוקם במרכז השטח הזמין:

הערכים המקדימים width ו-height

המשנה size משנה את הרוחב והגובה של האילוצים. בעזרת המשנה width אפשר להגדיר רוחב קבוע אבל להשאיר את הגובה לא מוגדר. באופן דומה, בעזרת התאמת height, אפשר להגדיר גובה קבוע אבל לא להגדיר רוחב:

הערך המקדם sizeIn

המשנה sizeIn מאפשר להגדיר מגבלות מדויקות של מינימום ומקסימום לרוחב ולגובה. כדאי להשתמש בהרחבה sizeIn אם רוצים שליטה מדויקת במגבלות.

דוגמאות

בקטע הזה מוצג ומוסבר הפלט מכמה קטעי קוד עם משנים משורשרים.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

קטע הקוד הזה יוצר את הפלט הבא:

• המשנה fillMaxSize משנה את האילוצים כך שגם הרוחב וגם הגובה המינימליים יהיו הערך המקסימלי – 300dp ברוחב ו-200dp בגובה.
• למרות שהמשנה size רוצה להשתמש בגודל 50dp, הוא עדיין צריך לפעול בהתאם לאילוצים המינימליים של הגודל. לכן, ערך התיקון size יפיק גם את גבולות האילוץ המדויקים של 300 עד 200, ויתעלם מהערך שצוין בערך התיקון size.
• הגודל של Image הוא 300 על 200, והוא מועבר במעלה העץ.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

קטע הקוד הזה יוצר את הפלט הבא:

• המשנה fillMaxSize מתאים את המגבלות כדי להגדיר את הרוחב והגובה המינימליים לערך המקסימלי – 300dp ברוחב ו-200dp בגובה.
• המשנה wrapContentSize מאפס את האילוצים המינימליים. לכן, אם fillMaxSize יצר אילוצים קבועים, wrapContentSize מאפס אותם בחזרה לאילוצים מוגבלים. הצומת הבא יכול עכשיו לתפוס שוב את כל המרחב, או להיות קטן יותר מכל המרחב.
• המשנה size מגדיר את המגבלות לערכים מינימליים ומקסימליים של 50.
• הערך Image מומר לגודל של 50 על 50, והמשנה size מעביר את הערך הזה.
• למשנה wrapContentSize יש מאפיין מיוחד. הוא לוקח את רכיב הבן שלו וממקם אותו במרכז הגבולות המינימליים הזמינים שהועברו אליו. הגודל שמועבר לרכיבי ההורה שווה לגבולות המינימליים שהועברו לרכיב.

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

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

קטע הקוד הזה יוצר את הפלט הבא:

• המשנה clip לא משנה את האילוצים.
• המשנה padding מקטין את המגבלות המקסימליות.
• המשנה size מגדיר את כל האילוצים ל-100dp.
• הפונקציה Image פועלת בהתאם למגבלות האלה ומחזירה גודל של 100dp על 100dp.
• המשנה padding מוסיף 10dp לכל הצדדים של הגודל שמדווח על ידי התג Image, כך שהפריסה עם הריווח מדווחת על רוחב וגובה של 120dp.
• עכשיו, בשלב הציור, מקש הצירוף clip פועל על בד ציור בגודל 120dp על 120dp. הוא יוצר מסכת עיגול בגודל הזה.
• המשנה padding מוסיף שוליים של 10dp לכל הצדדים של התוכן, וכך מקטין את גודל אזור הציור של Image ל-100dp על 100dp.
• הציור של Image מתבצע בקנבס הקטן יותר. התמונה נחתכת על סמך העיגול המקורי של 120dp, ולכן התוצאה לא עגולה.