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

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

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

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

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

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

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

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

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

לסיכום:

• מודификаторים עוטפים מודификатор יחיד או צומת פריסה יחיד.
• צמתים של פריסה יכולים לפרס כמה צמתים צאצאים.

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

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

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

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

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

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

האילוץ יכול להיות אחת מהאפשרויות הבאות:

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

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

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

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

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

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

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

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

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

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