בקטע 'כתיבה', אפשר לשרשר כמה מקשי צירוף יחד כדי לשנות את המראה תחושה של קומפוזביליות. שרשראות הצירוף האלה יכולות להשפיע על המגבלות שעברו לתכנים קומפוזביליים, שמגדירים גבולות רוחב וגובה.
בדף הזה נסביר איך מגבילי התאמה בשרשרת משפיעים על האילוצים, וכתוצאה מכך מדידה ומיקום של תכנים קומפוזביליים.
מגבילי התאמה בעץ ממשק המשתמש
כדי להבין איך מגבילי ההתאמה משפיעים זה על זה, כדאי להמחיש איך הם מופיעים בעץ ממשק המשתמש, שנוצר במהלך שלב היצירה. עבור תוכלו לקרוא מידע נוסף בקטע יצירה מוזיקלית.
בעץ ממשק המשתמש, אפשר לראות באופן חזותי את המגבילים כצומתי wrapper לפריסה צמתים:
הוספה של יותר ממאפיין אחד של תוכן קומפוזבילי יוצרת שרשרת של מגבילים. מתי
ליצור שרשרת של מספר רכיבי שינוי, כל צומת של הצירוף עוטף את שאר השרשרת
וצומת הפריסה שבתוכו. לדוגמה, כשיוצרים שרשרת של clip
size
, הצומת של הצירוף clip
שמסביב לצומת הצירוף size
,
שאחר כך עוטף את הצומת של הפריסה Image
.
בשלב הפריסה, האלגוריתם שעובר על העץ נשאר ללא שינוי, הוא גם מקבל ביקור בכל צומת של צירוף. כך אפשר לשנות את הגודל הדרישות והמיקום של הצירוף או צומת הפריסה שהוא כולל.
כפי שמוצג באיור 2, ההטמעה של התכנים הקומפוזביליים Image
ו-Text
שהם מכילים שרשרת של רכיבי שינוי שעוטפים צומת פריסה יחיד.
של Row
ו-Column
הם פשוט צמתים בפריסה שמתארת איך
כדי להזמין את הילדים.
לסיכום:
- מגבילי התאמה גורפים צומת של מקש צירוף או פריסה יחיד.
- צמתים של פריסה יכולים לפרוס מספר צומתי צאצא.
בקטעים הבאים מתואר איך להשתמש במודל התודעתי הזה כדי שרשרת משנה ואיך היא משפיעה על הגודל של תכנים קומפוזביליים.
מגבלות בשלב הפריסה
שלב הפריסה מבוסס על אלגוריתם שמורכב משלושה שלבים כדי למצוא כל פריסה רוחב, גובה וקואורדינטה x ו-y של הצומת:
- מדידת צאצאים: צומת מודד את הצאצאים שלו, אם יש כאלה.
- בחירת גודל משלו: על סמך המדידות האלה, צומת מחליט בעצמו גודל.
- מיקום צאצאים: כל צומת צאצא ממוקם ביחס לצומת שלו המיקום.
בעזרת Constraints
אפשר למצוא את הגדלים המתאימים לצמתים במהלך שני הצמתים הראשונים
באלגוריתם. האילוצים מגדירים את גבולות המינימום והמקסימום
הרוחב והגובה של הצומת. כשהצומת קובע את הגודל שלו, הגודל שלו נמדד
צריכים להיות בטווח הגדלים הזה.
סוגי מגבלות
האילוץ יכול להיות אחת מהאפשרויות הבאות:
- מוגבל: לצומת יש רוחב וגובה מינימליים ומקסימליים.
- ללא גבולות: הצומת לא מוגבל לגודל כלשהו. הרוחב המקסימלי וגם גבולות הגובה מוגדרים לאינסוף.
- מדויקת: הצומת נדרש לעמוד בדרישת גודל מדויקת. המינימום והגבולות המקסימליים מוגדרים לאותו ערך.
- שילוב: הצומת מורכב משילוב של סוגי האילוצים שלמעלה. לדוגמה, אילוץ יכול להגביל את הרוחב ובמקביל לאפשר גובה מקסימלי בלתי מוגבל, או להגדיר רוחב מדויק אבל להגדיר גובה מוגבל.
הקטע הבא מתאר איך האילוצים האלה מועברים מהורה לילדים.
איך מגבלות מועברות מהורה לילד
במהלך השלב הראשון של האלגוריתם המתואר בקטע מגבלות בפריסה שלב, האילוצים מועברים מהורה לילד בעץ ממשק המשתמש.
כשצומת הורה מודד את הצאצאים שלו, הוא מספק את האילוצים האלה לכל כדי שהצופים ידעו כמה גדולים או קטנים הם יכולים להיות. לאחר מכן, כש מחליט את גודלו, הוא גם פועל בהתאם למגבלות שהעבירו ההורים שלו.
ככלל, האלגוריתם פועל באופן הבא:
- כדי לקבוע את הגודל בפועל שברצונך לתפוס, הצומת של הרמה הבסיסית (root) בעץ ממשק המשתמש ומודדת את הצאצאים שלו ומעבירה את אותן מגבלות אל הצאצא הראשון שלו.
- אם הילד או הילדה הם תכונת שינוי שלא משפיעה על המדידה, היא מעבירה את מגבלות להתאמה הבאה. המגבלות מועברות למטה רשת כפי שהיא, אלא אם מתקבל ערך לשינוי שמשפיע על המדידה. לאחר מכן, גודלם משתנה בהתאם.
- לאחר הגעה לצומת שאין לו צאצאים (נקרא 'עלה' צומת), הוא קובע את גודלו על סמך המגבלות שכבר הועברו, הפונקציה מחזירה את הגודל הזה להורה שלו.
- ההורה משנה את המגבלות שלו בהתאם למדידות של הילד או הילדה, קורא לצאצא הבא עם המגבלות המותאמות האלה.
- לאחר שכל הצאצאים של הורה נמדדים, הצומת ההורה מחליט על בגודל האישי שלו, ומעביר אותו להורה שלו.
- כך מתבצעת חצייה של העץ כולו לעומק. בסופו של דבר, כל הצמתים החליטה על גודלם, ושלב המדידה הושלם.
אפשר לראות דוגמה מפורטת יותר במאמר מגבלות וסדר מגביל. וידאו.
מגבילי התאמה שמשפיעים על מגבלות
למדנו בקטע הקודם שמגבילים מסוימים יכולים להשפיע על האילוץ גודל. בקטעים הבאים מתוארים שינויים ספציפיים שמשפיעים על מגבלות בפועל.
ערך הצירוף של 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) )
קטע הקוד הזה יפיק את הפלט הבא:
- מגביל
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) )
קטע הקוד הזה יפיק את הפלט הבא:
- מגביל
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) )
קטע הקוד הזה יפיק את הפלט הבא:
- הצירוף
clip
לא משנה את המגבלות.- תכונת הצירוף
padding
מפחיתה את המגבלות המקסימליות. - מקש הצירוף
size
מגדיר את כל המגבלות כ-100dp
. - השדה
Image
פועל בהתאם למגבלות האלה ומדווח בגודל של100
עד100dp
. - הצירוף
padding
מוסיף10dp
בכל הגדלים, כך שהוא מגדיל את הרוחב והגובה של20dp
. - בשלב השרטוט, הצירוף
clip
פועל על קנבס של120
מאת120dp
. לכן, היא יוצרת מסכה של עיגול בגודל הזה. - לאחר מכן, המגביל
padding
מטמיע את התוכן שלו ב-10dp
לכל הגדלים, כך מקטין את גודל הקנבס ל-100
ב-100dp
. - השדה
Image
מצויר באזור העריכה הזה. התמונה נחתכה על סמך המעגל המקורי של120dp
, כך שהפלט הוא תוצאה לא עגולה.
- תכונת הצירוף