פיתוח ממשק משתמש רספונסיבי באמצעות ConstraintLayout   בארגז הכלים Android Jetpack.

איור 1. העורך מציג את תצוגה C מתחת לתצוגה A, אבל אין לה אילוץ אנכי.

איור 2. התצוגה C מוגבלת עכשיו אנכית מתחת לתצוגה A.

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

הוספת ConstraintLayout לפרויקט

כדי להשתמש ב-ConstraintLayout בפרויקט, מבצעים את הפעולות הבאות:

1. מוודאים שמאגר maven.google.com מוצהר בקובץ settings.gradle:

   מגניב

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

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

   מגניב

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. בסרגל הכלים או בהתראה על הסנכרון, לוחצים על Sync Project with Gradle Files (סנכרון הפרויקט עם קובצי Gradle).

עכשיו אפשר ליצור את הפריסה באמצעות ConstraintLayout.

המרת פריסה

איור 3. התפריט להמרת פריסה ל-ConstraintLayout.

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

1. פותחים את הפריסה ב-Android Studio ולוחצים על הכרטיסייה Design (עיצוב) בחלק התחתון של חלון העריכה.
2. בחלון Component Tree (עץ הרכיבים), לוחצים לחיצה ימנית על הפריסה ואז על Convert LinearLayout to ConstraintLayout (המרת LinearLayout ל-ConstraintLayout).

יצירת פריסה חדשה

כדי להתחיל קובץ חדש של פריסת אילוצים:

1. בחלון Project (פרויקט), לוחצים על תיקיית המודול ובוחרים באפשרות File > New > XML > Layout XML (קובץ > חדש > XML > פריסת XML).
2. מזינים שם לקובץ הפריסה ומזינים את הערך "androidx.constraintlayout.widget.ConstraintLayout" בשדה Root Tag.
3. לוחצים על סיום.

הוספה או הסרה של אילוץ

כדי להוסיף אילוץ:

1. גוררים תצוגה מהחלון Palette אל אזור העריכה.

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

2. לוחצים על התצוגה כדי לבחור אותה.
3. מבצעים אחת מהפעולות הבאות:
   • לוחצים על נקודת אחיזה של אילוץ וגוררים אותה לנקודת עיגון זמינה. הנקודה הזו יכולה להיות הקצה של תצוגה אחרת, הקצה של הפריסה או קו מנחה. שימו לב: כשגוררים את נקודת האחיזה של האילוץ, בכלי Layout Editor מוצגים עוגנים פוטנציאליים לחיבור ושכבות-על כחולות.

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

     

     איור 4. בקטע פריסה בחלון מאפיינים אפשר ליצור חיבורים.

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

כשיוצרים אילוצים, חשוב לזכור את הכללים הבאים:

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

כדי למחוק אילוץ, אפשר לבצע אחת מהפעולות הבאות:

• לוחצים על אילוץ כדי לבחור אותו, ואז לוחצים על מחיקה.

• מקישים על Control (או על Command ב-macOS) ולוחצים על נקודת עיגון של אילוץ. האילוץ הופך לאדום כדי לציין שאפשר ללחוץ עליו כדי למחוק אותו, כמו שמוצג באיור 5.

  

  איור 5. אילוץ אדום מציין שאפשר ללחוץ עליו כדי למחוק אותו.

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

  

  איור 6. לוחצים על נקודת העיגון של האילוץ כדי למחוק אותו.

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

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

מיקום ההורה

הגבלת הצד של תצוגה לקצה המתאים של הפריסה.

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

איור 7. הגבלה אופקית ביחס לאלמנט ההורה.

מיקום ההזמנה

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

באיור 8, B מוגבל להיות תמיד מימין ל-A, ו-C מוגבל להיות מתחת ל-A. עם זאת, ההגבלות האלה לא מרמזות על יישור, ולכן B עדיין יכולה לנוע למעלה ולמטה.

איור 8. מגבלה אופקית ואנכית.

יישור

מיישרים את הקצה של תצוגה אחת לקצה של תצוגה אחרת.

באיור 9, הצד השמאלי של B מיושר לצד השמאלי של A. אם רוצים ליישר את מרכזי התצוגה, צריך ליצור אילוץ בשני הצדדים.

אפשר להזיז את המיקום של ההתאמה על ידי גרירת התצוגה פנימה מהאילוץ. לדוגמה, באיור 10 מוצג B עם יישור בהזזה של 24dp. ההיסט מוגדר לפי השוליים של התצוגה המוגבלת.

אפשר גם לבחור את כל התצוגות שרוצים ליישר, ואז ללחוץ על יישור בסרגל הכלים כדי לבחור את סוג היישור.

איור 9. אילוץ יישור אופקי.

איור 10. אילוץ יישור אופקי עם היסט.

יישור לפי שנת הבסיס

התאמה של שורת בסיס לטקסט בתצוגה אחת לשורת בסיס לטקסט בתצוגה אחרת.

באיור 11, השורה הראשונה של B מיושרת עם הטקסט ב-A.

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

איור 11. אילוץ של יישור לפי קו בסיס.

הגבלה להנחיה

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

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

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

איור 12. תצוגה שמוגבלת להנחיה.

הגבלה למחסום

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

לדוגמה, באיור 13, התצוגה C מוגבלת לצד ימין של המחסום. המחסום מוגדר ל'סוף' (או לצד ימין, בפריסה משמאל לימין) של תצוגה א' ושל תצוגה ב'. המחסום זז בהתאם לצד הימני של תצוגה א' או של תצוגה ב' שנמצא הכי ימינה.

כדי ליצור מחסום:

1. בסרגל הכלים, לוחצים על הנחיות ואז על הוספת מחסום אנכי או על הוספת מחסום אופקי.
2. בחלון Component Tree, בוחרים את התצוגות שרוצים להוסיף למחסום וגוררים אותן לרכיב המחסום.
3. בוחרים את המחסום מתוך עץ הרכיבים, פותחים את החלון מאפיינים ומגדירים את barrierDirection.

עכשיו אפשר ליצור מגבלה מתצוגה אחרת למחסום.

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

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

איור 13. תצוגה C מוגבלת למחסום, שזז בהתאם למיקום ולגודל של תצוגה A ותצוגה B.

שינוי הטיית האילוץ

כשמוסיפים מגבלה לשני הצדדים של תצוגה, וגודל התצוגה לאותו מאפיין הוא 'קבוע' או 'עוטף תוכן', התצוגה ממוקמת במרכז בין שתי המגבלות עם הטיה של 50% כברירת מחדל. כדי לשנות את ההטיה, גוררים את פס ההזזה של ההטיה בחלון Attributes או גוררים את התצוגה, כמו שמוצג בסרטון 3.

אם רוצים שהתצוגה תתאים את הגודל שלה למגבלות, משנים את הגודל ל'התאמה למגבלות'.

שינוי גודל התצוגה

איור 14. כשבוחרים תצוגה, בחלון Attributes יש אמצעי בקרה לשינוי 1 יחס הגודל, 2 מחיקת אילוצים, 3 מצב הגובה או הרוחב, 4 שוליים ו5 הטיה של האילוצים. אפשר גם להדגיש אילוצים ספציפיים ב-Layout Editor. לשם כך, לוחצים על האילוץ הרצוי ברשימת האילוצים 6.

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

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

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

• קבוע: מציינים מאפיין ספציפי בתיבת הטקסט הבאה או על ידי שינוי הגודל של התצוגה בעורך.
• Wrap Content: התצוגה מתרחבת רק במידה שנדרשת כדי להכיל את התוכן שלה.
• layout_constrainedWidth

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

• התאמת אילוצים: התצוגה מתרחבת ככל האפשר כדי לעמוד באילוצים בכל צד, אחרי שמתחשבים בשוליים של התצוגה. עם זאת, אפשר לשנות את ההתנהגות הזו באמצעות המאפיינים והערכים הבאים. המאפיינים האלה פועלים רק כשמגדירים את רוחב התצוגה ל'התאמה למגבלות':
  • layout_constraintWidth_min

    הרוחב המינימלי של התצוגה הוא dp.

  • layout_constraintWidth_max

    הפעולה הזו מקבלת מאפיין dp לרוחב המקסימלי של התצוגה המפורטת.

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

הגדרת הגודל כיחס

איור 15. התצוגה מוגדרת ליחס גובה-רוחב של 16:9, והרוחב מבוסס על יחס הגובה.

אפשר להגדיר את גודל התצוגה כיחס, כמו 16:9, אם לפחות אחד מהממדים של התצוגה מוגדר כ'התאמה להגבלות' (0dp). כדי להגדיר את היחס, לוחצים על החלפת ההגדרה של יחס גובה-רוחב (הערת הסבר 1 באיור 14) ומזינים את היחס width:height בשדה הקלט שמופיע.

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

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

שינוי השוליים של התצוגה

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

אפשר לשלוט בשוליים של כל תצוגה בחלון Attributes. לשם כך, לוחצים על המספר בשורה שמייצגת כל אילוץ. באיור 14, בתיאור 4 מוצגים השוליים התחתונים שהוגדרו ל-16dp.

איור 16. הלחצן שוליים בסרגל הכלים.

כל השוליים שהכלי מציע הם כפולות של 8dp, כדי לעזור לכם להתאים את התצוגות להמלצות של Material Design לגבי רשת ריבועית של 8dp.

שליטה בקבוצות לינאריות באמצעות שרשרת

איור 17. שרשרת אופקית עם שתי תצוגות.

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

איור 18. דוגמאות לכל סגנון של שרשרת.

אפשר לעצב את השרשרות באחת מהדרכים הבאות:

1. פיזור: הצפיות מתחלקות באופן שווה אחרי שמביאים בחשבון את השוליים. זוהי ברירת המחדל.
2. פיזור בתוך: הצפיות הראשונה והאחרונה מוצמדות למגבלות בכל קצה של השרשרת, ושאר הצפיות מחולקות באופן שווה.
3. משוקלל: אם השרשרת מוגדרת לפיזור או לפיזור פנימי, אפשר למלא את השטח שנותר על ידי הגדרת תצוגה אחת או יותר ל'התאמה למגבלות' (0dp). כברירת מחדל, השטח מחולק באופן שווה בין כל התצוגות שמוגדרות ל'התאמה למגבלות', אבל אפשר להקצות משקל חשיבות לכל תצוגה באמצעות המאפיינים layout_constraintHorizontal_weight ו-layout_constraintVertical_weight. השיטה הזו פועלת באופן דומה ל-layout_weight בפריסה ליניארית: התצוגה עם ערך המשקל הגבוה ביותר מקבלת את המרחב הגדול ביותר, ותצוגות עם אותו משקל מקבלות את אותו המרחב.
4. צפוף: הצפיות מוצגות בצורה צפופה אחרי שמתחשבים בשוליים. כדי לשנות את ההטיה של כל השרשרת – שמאלה או ימינה, למעלה או למטה – משנים את הטיית התצוגה של ה'ראש' בשרשרת.

התצוגה הראשונה בשרשרת – התצוגה הכי ימנית בשרשרת אופקית (בפריסה מימין לשמאל) והתצוגה הכי עליונה בשרשרת אנכית – מגדירה את הסגנון של השרשרת ב-XML. אבל אפשר לעבור בין פריסה, פריסה פנימית וצפיפות על ידי בחירה של תצוגה כלשהי בשרשרת ולחיצה על לחצן השרשרת שמופיע מתחת לתצוגה.

כדי ליצור שרשרת, פועלים לפי השלבים הבאים, כמו שמוצג בסרטון 4:

1. בוחרים את כל התצוגות שרוצים לכלול בשרשור.
2. לוחצים לחיצה ימנית על אחת מהתצוגות.
3. לוחצים על רשתות.
4. בוחרים באפשרות מרכוז אופקי או מרכוז אנכי.

כמה דברים שכדאי לקחת בחשבון כשמשתמשים בשרשורים:

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

יצירת אילוצים באופן אוטומטי

במקום להוסיף אילוצים לכל תצוגה כשממקמים אותה בפריסה, אפשר להעביר כל תצוגה למיקום הרצוי ב-Layout Editor ואז ללחוץ על Infer Constraints (הסקת אילוצים) כדי ליצור אילוצים באופן אוטומטי.

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

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

החיבור האוטומטי מושבת כברירת מחדל. כדי להפעיל אותה, לוחצים על Enable Autoconnection to Parent (הפעלה של חיבור אוטומטי לרכיב אב) בסרגל הכלים של Layout Editor.

אנימציות של תמונות מפתח

בתוך ConstraintLayout, אפשר להנפיש שינויים בגודל ובמיקום של רכיבים באמצעות ConstraintSet ו-TransitionManager.

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

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

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

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

מקורות מידע נוספים

הסמל ConstraintLayout משמש באפליקציית ההדגמה Sunflower.