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

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

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

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

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

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

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

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

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

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

לסיכום:

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

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

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

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

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

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

סוגי מגבלות

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

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

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

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

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

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

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

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

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

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

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, ולכן הפלט הוא לא עיגול.