פיתוח ממשק משתמש רספונסיבי באמצעות ConstraintLayout חלק מ-Android Jetpack.

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

איור 2. עכשיו תצוגה ג' מוגבלת אנכית למטה בתצוגה א'.

למרות שאילוץ חסר לא גורם לשגיאת הידור, הפריסה לפי ה-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.0-alpha14"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
   }
   

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

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

המרת פריסה

איור 3. התפריט שאליו רוצים להמיר פריסה ConstraintLayout

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

1. פותחים את הפריסה ב-Android Studio ולוחצים על הכרטיסייה עיצוב בחלק בחלק התחתון של חלון העורך.
2. בחלון רכיבי עץ, לוחצים לחיצה ימנית על הפריסה ואז המרה של פריסה לינארית ל-ConstraintLayout.

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

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

1. בחלון Project, לוחצים על תיקיית המודול ובוחרים קובץ > חדש > XML > פריסת XML.
2. מזינים שם לקובץ הפריסה ומזינים "androidx.constraintlayout.widget.ConstraintLayout" בשביל Root תיוג.
3. לוחצים על סיום.

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

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

1. גוררים תצוגה מהחלון פלטה לעורך.

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

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

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

     

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

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

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

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

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

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

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

  

  איור 5. מגבלה אדומה שאפשר ללחוץ עליהן כדי למחוק אותו.

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

  

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

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

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

מיקום ההורה

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

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

איור 7. אילוץ אופקי את ההורה.

מיקום ההזמנה

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

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

איור 8. אופקי ואנכי אילוץ.

יישור

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

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

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

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

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

איור 10. היסט אופקי מגבלת יישור.

יישור קו הבסיס

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

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

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

איור 11. התאמה בסיסית אילוץ.

הגבלה להנחיה

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

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

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

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

להגביל למחסום

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

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

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

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

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

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

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

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

כוונון ההטיה של האילוץ

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

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

התאמה של גודל התצוגה

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

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

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

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

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

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

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

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

  • layout_constraintWidth_max

    נדרש מימד dp לרוחב המקסימלי של התצוגה.

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

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

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

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

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

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

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

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

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

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

כל שולי הרווח שהכלי מציע הם גורמים של 8dp כדי ליישר קו להמלצות לרשת ריבועית בגודל 8dp של Material Design.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אנימציות עם תמונות מפתח

בתוך 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 נמצא בשימוש ב- חמנית אפליקציית ההדגמה (דמו).