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

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

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

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

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

   Groovy

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

   Kotlin

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

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

   מגניב

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

   Kotlin

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

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

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

המרת פריסה

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

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

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

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

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

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

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

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

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

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

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

     

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

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

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

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

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

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

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

  

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

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

  

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

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

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

מיקום ההורה

מיקום ההזמנה

יישור

יישור לפי ערך הבסיס

הגבלה להנחיה

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

שינוי ההטיה של האילוצים

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

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

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

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

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

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

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

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

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

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

  • layout_constraintWidth_max

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

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

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

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

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

לדוגמה, אם מגדירים את שני האגפים ל"match limits" (מגבלות התאמה), לוחצים על Toggle Aspect יחס גובה-רוחב כדי להגדיר את הרוחב כיחס של הגובה. הגודל הכולל נקבע לפי גובה התצוגה, שאפשר להגדיר בכל דרך, כפי שמוצג באיור 15.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אנימציות של תמונות מפתח (keyframe)

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

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

כדי ליצור אנימציה באמצעות ConstraintSet, צריך לציין שני קובצי פריסה שמייצגים את נקודות ה-keyframe של ההתחלה והסיום של האנימציה. לאחר מכן תוכלו לטעון 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.