إنشاء واجهة مستخدم سريعة الاستجابة باستخدام ConstraintLayout جزء من Android Jetpack.

تجربة طريقة الإنشاء
Jetpack Compose هي مجموعة أدوات واجهة المستخدم المقترَحة لنظام التشغيل Android. تعرَّف على كيفية استخدام التنسيقات في Compose.

يتيح لك ConstraintLayout إنشاء تنسيقات كبيرة ومعقدة باستخدام عرض هرمي من البداية، بدون مجموعات طرق عرض متداخلة. يشبه الأمر RelativeLayout في أنّه يتم ترتيب جميع طرق العرض وفقًا للعلاقات بين طرق العرض التابعة والتنسيق الرئيسي، لكنّه أكثر مرونة من RelativeLayout وأسهل في الاستخدام مع "محرِّر التنسيق" في "استوديو Android".

تتوفر كل إمكانات ConstraintLayout مباشرةً من الأدوات المرئية في "محرر التنسيق"، لأن واجهة برمجة التطبيقات للتنسيق ومحرر التنسيق تم تصميمهما خصيصًا لبعضهما البعض. يمكنك إنشاء التنسيق باستخدام ConstraintLayout بالكامل من خلال السحب بدلاً من تعديل ملف XML.

توضّح هذه الصفحة كيفية إنشاء تنسيق باستخدام ConstraintLayout في الإصدار 3.0 من "استوديو Android" أو الإصدارات الأحدث. لمزيد من المعلومات عن "محرِّر التنسيق"، راجِع إنشاء واجهة مستخدم باستخدام "محرِّر التنسيق".

للاطّلاع على مجموعة متنوعة من التنسيقات التي يمكنك إنشاؤها باستخدام "ConstraintLayout"، يمكنك الاطّلاع على المشروع "أمثلة على تصميم القيود" على GitHub.

نظرة عامة على القيود

لتحديد موضع طريقة العرض في ConstraintLayout، يجب إضافة قيد أفقي واحد وقيد رأسي واحد على الأقل للعرض. يمثل كل قيد اتصالاً أو محاذاة مع عرض آخر، أو التخطيط الأصلي، أو إرشادات غير مرئية. يحدد كل قيد موضع العرض على المحور الرأسي أو الأفقي. يجب أن يكون لكل طريقة عرض قيد واحد على الأقل لكل محور، ولكن غالبًا ما يكون أكثر أهمية.

عندما تسقط طريقة عرض في "محرر التنسيق"، تظل في المكان الذي تغادره فيه حتى لو لم تكن هناك قيود. الهدف من ذلك هو تسهيل عملية التعديل فقط. إذا لم تكن هناك قيود على طريقة العرض عند تشغيل التنسيق على أحد الأجهزة، يتم رسمها في الموضع [0,0] (في الزاوية العلوية اليسرى).

في الشكل 1، يبدو التخطيط جيدًا في المحرر، ولكن لا يوجد قيد عمودي على العرض "ج". عندما يرسم هذا التخطيط على أحد الأجهزة، يتم عرض C أفقيًا مع الحافتين اليسرى واليمنى للعرض "أ"، ولكنه يظهر في الجزء العلوي من الشاشة لأنه ليس له قيد رأسي.

الشكل 1. يُظهر المحرر طريقة العرض "ج" أسفل A، لكن لا يحتوي على قيد عمودي.

الشكل 2. العرض "ج" مقيد عموديًا الآن أسفل العرض "أ".

على الرغم من أن القيد المفقود لا يتسبب في خطأ في التحويل البرمجي، فإن محرر التنسيق يشير إلى القيود المفقودة كخطأ في شريط الأدوات. لعرض الأخطاء والتحذيرات الأخرى، انقر على عرض التحذيرات والأخطاء . لمساعدتك في تجنب القيود الناقصة، يضيف "محرر التنسيق" تلقائيًا قيودًا بالنيابة عنك باستخدام ميزتَي قيود الاتصال التلقائي واستنتاج الاستنتاج.

إضافة 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-alpha13"
        // To use constraintlayout in compose
        implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13"
    }
    

    Kotlin

    dependencies {
        implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
        // To use constraintlayout in compose
        implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
    }
    
  3. في شريط الأدوات أو إشعار المزامنة، انقر على مزامنة المشروع مع ملفات Gradle.

والآن، أصبحت جاهزًا لإنشاء تنسيقك باستخدام "ConstraintLayout".

تحويل تنسيق

الشكل 3. القائمة المطلوب تحويل التنسيق إلى تنسيق ConstraintLayout.

لتحويل تخطيط حالي إلى تخطيط محدود، اتبع الخطوات التالية:

  1. افتح التنسيق في "استوديو Android" وانقر على علامة التبويب التصميم في أسفل نافذة المحرّر.
  2. في نافذة شجرة المكونات، انقر بزر الماوس الأيمن على التنسيق وانقر على تحويل LinearLayout إلى ConstraintLayout.

إنشاء تنسيق جديد

لبدء ملف تخطيط قيد جديد، اتبع الخطوات التالية:

  1. في نافذة المشروع، انقر على مجلد الوحدة واختَر ملف > جديد > XML > تنسيق XML.
  2. أدخِل اسمًا لملف التنسيق وأدخِل "androidx.restrictiontlayout.Widgetet.ConstraintLayout" لعلامة Root Tag.
  3. انقر على إنهاء.

إضافة قيد أو إزالته

لإضافة قيد، قم بما يلي:

الفيديو 1: ويتم تقييد الجانب الأيسر من العرض بالجانب الأيسر من العنصر الرئيسي.

  1. اسحب عرضًا من نافذة لوحة الألوان إلى المحرِّر.

    عند إضافة ملف شخصي في ConstraintLayout، يتم عرضه في مربّع حدود مع مقابض تغيير الحجم المربّعة في كل زاوية ومقابض قيود دائرية على كل جانب.

  2. انقر على طريقة العرض لاختيارها.
  3. اتّخِذ أحد الإجراءَين أدناه:
    • انقر على مؤشر قيود واسحبه إلى نقطة ارتساء متاحة. يمكن أن تكون هذه النقطة حافة عرض آخر أو حافة التنسيق أو الإرشادات. لاحظ أنّه أثناء سحب مقبض القيد، يعرض "محرِّر التنسيق" علامات ارتساء الاتصال المحتملة والتراكبات الزرقاء.
    • انقر على أحد أزرار إنشاء ربط في قسم التنسيق ضمن نافذة السمات، كما هو موضّح في الشكل 4.

      الشكل 4. يتيح لك قسم التصميم في نافذة السمات إنشاء عمليات الربط.

عند إنشاء القيد، يمنحه المحرر هامشًا تلقائيًا لفصل طريقتي العرض.

عند إنشاء قيود، تذكر القواعد التالية:

  • يجب أن يكون لكل طريقة عرض قيودين على الأقل: أحدهما أفقي والآخر رأسي.
  • يمكنك إنشاء قيود فقط بين مؤشر القيود ونقطة ارتساء تتشارك المستوى نفسه. المستوى العمودي - الجانب الأيمن والأيسر من العرض - يمكن تقييده فقط بمستوى عمودي آخر، ويمكن أن تقصر الخطوط الأساسية فقط على الأسس الأخرى.
  • يمكن استخدام كل مؤشر قيد الاستخدام لقيد واحد فقط، ولكن يمكنك إنشاء قيود متعددة من طرق عرض مختلفة لنقطة الارتساء نفسها.

يمكنك حذف قيد من خلال تنفيذ أي من الإجراءات التالية:

  • انقر على أحد القيود لاختياره، ثم انقر على حذف.
  • Control-النقر على (Command-النقر على نظام التشغيل macOS) على مراسي القيد. ويتحوّل القيد إلى اللون الأحمر للإشارة إلى أنّه يمكنك النقر عليه لحذفه، كما هو موضّح في الشكل 5.

    الشكل 5. ويشير القيد الأحمر إلى أنّه يمكنك النقر لحذفه.

  • في قسم التصميم في نافذة السمات، انقر على علامة ارتساء قيد، كما هو موضح في الشكل 6.

    الشكل 6. انقر على علامة ارتساء قيد لحذفها.

الفيديو 2: إضافة قيد يعارض أحد القيود الحالية.

إذا أضفت قيودًا متعارضة على العرض، تصبح خطوط القيد ملتفة مثل الربيع للإشارة إلى القوى المعارضة، كما هو موضّح في الفيديو 2. يكون التأثير أكثر وضوحًا عند تعيين حجم العرض على "ثابت" أو "التفاف المحتوى"، وفي هذه الحالة يتم توسيط العرض بين القيود. إذا أردت بدلاً من ذلك أن يوسّع العرض حجمه لاستيفاء القيود، بدِّل الحجم إلى "مطابقة القيود". إذا كنت تريد الاحتفاظ بالحجم الحالي مع تحريك العرض بحيث لا يتم توسيطه، عدِّل انحياز القيد.

يمكنك استخدام القيود لتحقيق أنواع مختلفة من سلوك التنسيق، كما هو موضّح في الأقسام التالية.

الوظيفة الرئيسية

قيّد جانب العرض بالحافة المقابلة للتخطيط.

في الشكل 7، يرتبط الجانب الأيسر من العرض بالحافة اليسرى للتخطيط الرئيسي. يمكنك تحديد المسافة من الحافة بالهامش.

الشكل 7. قيدًا أفقياً على العنصر الرئيسي.

موضع الطلب

حدد ترتيب الظهور لطريقتين، إما عموديًا أو أفقيًا.

في الشكل 8، يتم تقييد B بحيث تكون دائمًا على يمين A، ويتم تقييد C أسفل A. ومع ذلك، فإن هذه القيود لا تشير إلى المواءمة، لذلك لا يزال بإمكان "ب" التحرك لأعلى ولأسفل.

الشكل 8. تمثّل هذه السمة قيدًا أفقيًا وعموديًا.

محاذاة

محاذاة حافة العرض مع حافة عرض آخر.

في الشكل 9، تتم محاذاة الجانب الأيسر من B إلى الجانب الأيسر من A. إذا كنت تريد محاذاة مراكز العرض، فأنشئ قيدًا على كلا الجانبين.

يمكنك معادلة المحاذاة عن طريق سحب العرض إلى الداخل من القيد. على سبيل المثال، يوضح الشكل 10 B بمحاذاة إزاحة 24dp. يتم تحديد الإزاحة من خلال هامش العرض المقيد.

يمكنك أيضًا اختيار جميع طرق العرض التي تريد محاذاتها، ثم النقر على محاذاة في شريط الأدوات لتحديد نوع المحاذاة.

الشكل 9. قيد المحاذاة الأفقية.

الشكل 10. تمثّل هذه السمة قيدًا على المحاذاة الأفقية.

محاذاة خط الأساس

محاذاة خط العرض مع خط الأساس في طريقة عرض أخرى

في الشكل 11، تتم محاذاة السطر الأول من B مع النص في A.

لإنشاء قيد مرجعي، انقر بزر الماوس الأيمن على طريقة عرض النص التي تريد فرض قيود عليها، ثم انقر على إظهار القاعدة الأساسية. بعد ذلك، انقر على الخط القاعدي للنص واسحب الخط إلى خط الأساس آخر.

الشكل 11. تمثّل هذه السمة قيدًا على المحاذاة لخط الأساس.

التقييد بإرشادات

يمكنك إضافة إرشادات عمودية أو أفقية تتيح لك تضييق نطاق طرق العرض ولا تظهر لمستخدمي التطبيق. يمكنك وضع الإرشادات داخل التخطيط بناءً على وحدات بكسل مستقلة الكثافة أو نسبة مئوية متعلقة بحافة التخطيط.

لإنشاء إرشادات، انقر على إرشادات في شريط الأدوات، ثم انقر على إضافة إرشادات عمودية أو إضافة إرشادات أفقية.

اسحب الخط المنقط لإعادة تحديد موضعه، وانقر على الدائرة الموجودة على حافة الإرشادات لتبديل وضع القياس.

الشكل 12. طريقة العرض مقيَّدة بالإرشادات.

التقييد بحاجز

على غرار الإرشادات، فإن الحاجز هو خط غير مرئي يمكنك تقييد العروض عليه، باستثناء الحاجز لا يحدد موضعه الخاص. بدلاً من ذلك، يتحرك موضع الحاجز بناءً على موضع وجهات النظر الموجودة بداخله. ويكون هذا مفيدًا عندما تريد تقييد طريقة العرض بمجموعة من طرق العرض بدلاً من عرض واحد محدد.

على سبيل المثال، في الشكل 13 طريقة العرض C يتم تقييدها على الجانب الأيمن من الحاجز. يتم تعيين الحاجز على "النهاية" (أو الجانب الأيمن، بتنسيق من اليسار إلى اليمين) لكل من العرض أ والعرض ب. يتحرك الحاجز اعتمادًا على ما إذا كان الجانب الأيمن من الرؤية أ أو العرض ب هو أبعد ما يكون على اليمين.

لإنشاء عائق، اتبع الخطوات التالية:

  1. انقر على الإرشادات في شريط الأدوات، ثم انقر على إضافة حاجز عمودي أو إضافة حاجز أفقي.
  2. في نافذة شجرة المكوّنات، اختَر طرق العرض التي تريدها داخل الإطار الحاجز واسحبها إلى المكوِّن.
  3. اختَر الحاجز من شجرة المكونات، وافتح نافذة السمات ، ثم اضبط barrierDirection.

يمكنك الآن إنشاء قيد من طريقة عرض أخرى إلى الحاجز.

يمكنك أيضًا تقييد طرق العرض داخل الحاجز. بهذه الطريقة، يمكنك محاذاة جميع وجهات النظر في الحاجز مع بعضها البعض، حتى لو كنت لا تعرف العرض الأطول أو الأطول.

يمكنك أيضًا تضمين إرشادات داخل الحاجز لضمان وضع "الحد الأدنى" للحاجز.

الشكل 13. يتم تقييد العرض "ج" بحاجز يتحرك بناءً على موضع وحجم كل من العرض "أ" والعرض "ب".

ضبط تحيز القيد

عند إضافة قيد على كلا جانبي العرض، ويكون حجم العرض للبُعد نفسه إما "ثابت" أو "التفاف محتوى"، يصبح العرض بين القيدين بتحيز بنسبة 50% افتراضيًا. يمكنك ضبط الانحياز عن طريق سحب شريط تمرير الانحياز في نافذة السمات أو من خلال سحب طريقة العرض، كما هو موضّح في الفيديو 3.

إذا أردت بدلاً من ذلك توسيع حجم طريقة العرض لاستيفاء القيود، بدِّل الحجم إلى "مطابقة القيود".

الفيديو 3: تعديل تحيز القيد.

ضبط حجم العرض

الشكل 14. عند اختيار ملف شخصي، تتضمّن نافذة السمات عناصر تحكّم لنسبة الحجم 1، و2 حذف القيود، و3 وضع الارتفاع أو العرض، و4 هوامش، وانحياز القيود 5. يمكنك أيضًا تمييز القيود الفردية في "محرِّر التنسيق" من خلال النقر عليها في قائمة القيود 6.

يمكنك استخدام مقابض الزوايا لتغيير حجم العرض، ولكن هذا يؤدي إلى ترميز الحجم - لا يتم تغيير حجم طريقة العرض حسب المحتوى المختلف أو أحجام الشاشة. لاختيار وضع مختلف لحجم الشاشة، انقر على عرض وافتح نافذة السمات على الجانب الأيسر من المحرر.

بالقرب من أعلى نافذة السمات، يوجد عارض طريقة العرض، والذي يتضمَّن عناصر تحكُّم للعديد من سمات التنسيق، كما هو موضَّح في الشكل 14. لا يتوفر هذا إلا للعروض في تخطيط محدود.

يمكنك تغيير الطريقة التي يتم بها حساب الارتفاع والعرض بالنقر على الرموز المشار إليها في وسيلة الشرح 3 في الشكل 14. وتمثل هذه الرموز وضع الحجم على النحو التالي. انقر فوق الرمز للتبديل بين هذه الإعدادات:

  • ثابت: حدِّد سمة معيّنة في مربّع النص التالي أو من خلال تغيير حجم العرض في المحرِّر.
  • التفاف المحتوى: يمكن توسيع طريقة العرض حسب الحاجة فقط لتلائم المحتوى.
    • layout_restrictionedwidth
    • اضبط السمة على true للسماح بتغيير البعد الأفقي بحيث يراعي القيود المفروضة. وفقًا للإعدادات التلقائية، لا يتم فرض قيود على التطبيق المصغّر الذي يتم ضبطه على WRAP_CONTENT.

  • قيود المطابقة: يمكن توسيع الملف الشخصي بأكبر قدر ممكن من أجل استيفاء القيود على كلّ جانب، بعد مراعاة هوامش الملف الشخصي. مع ذلك، يمكنك تعديل هذا السلوك باستخدام السمات والقيم التالية. لا تسري هذه السمات إلا عند ضبط عرض طريقة العرض على "مطابقة القيود":
    • layout_Restrictt width_min

      ويتطلّب ذلك بُعد dp كحدّ أدنى للعرض.

    • layout_restrictiont width_max

      ويستغرق هذا بُعد dp كحد أقصى لعرض الملف الشخصي.

    ومع ذلك، إذا كان للبُعد المحدّد قيد واحد فقط، سيتم توسيع العرض ليتناسب مع محتواه. يتيح لك استخدام هذا الوضع على الارتفاع أو العرض أيضًا ضبط نسبة الحجم.

ضبط الحجم كنسبة مئوية

الشكل 15. يتم ضبط العرض على نسبة عرض إلى ارتفاع 16:9 مع عرض استنادًا إلى نسبة الارتفاع.

يمكنك ضبط حجم العرض على نسبة مثل 16:9، في حال ضبط واحد على الأقل من أبعاد العرض على "مطابقة القيود" (0dp). ولتفعيل هذه النسبة، انقر على تبديل قيد نسبة العرض إلى الارتفاع (وسيلة الشرح 1 في الشكل 14) وأدخِل نسبة width:height في الإدخال الذي يظهر.

إذا تم ضبط كل من العرض والارتفاع على "مطابقة القيود"، يمكنك النقر على تبديل قيد نسبة العرض إلى الارتفاع لتحديد البُعد الذي يستند إلى نسبة الآخر. يشير فاحص العرض إلى البعد الذي تم ضبطه كنسبة من خلال توصيل الحواف المتناظرة بخط ثابت.

على سبيل المثال، إذا تم ضبط كلا الجانبين على "مطابقة القيود"، انقر على تبديل قيد نسبة العرض إلى الارتفاع مرّتين لضبط العرض ليكون نسبة الارتفاع. يعتمد الحجم الكامل على ارتفاع العرض، والذي يمكن تحديده بأي شكل، كما هو موضح في الشكل 15.

ضبط هوامش العرض

لجعل طرق العرض متباعدة بشكل متساوٍ، انقر على الهامش في شريط الأدوات لتحديد الهامش التلقائي لكل طريقة عرض تضيفها إلى التنسيق. أي تغيير تجريه على الهامش الافتراضي ينطبق فقط على المشاهدات التي تضيفها من ذلك الوقت فصاعدًا.

يمكنك التحكم في الهامش لكل عرض في نافذة السمات من خلال النقر على الرقم الموجود على السطر الذي يمثل كل قيد. في الشكل 14، يوضّح وسيلة الشرح 4 أنّ الهامش السفلي مضبوطًا على 16 بكسل مستقل الكثافة.

الشكل 16. زر الهامش في شريط الأدوات.

جميع الهوامش التي توفّرها الأداة هي عوامل تبلغ 8 بكسل مستقل الكثافة (dp) للمساعدة في توافق طرق العرض مع توصيات الشبكة المربّعة بحجم 8 بكسل مستقل الكثافة في Material Design.

التحكّم في المجموعات الخطية باستخدام سلسلة

الشكل 17. سلسلة أفقية مع طريقتَي عرض.

السلسلة هي مجموعة من طرق العرض المرتبطة ببعضها البعض مع قيود وضع ثنائي الاتجاه. يمكن توزيع العروض داخل السلسلة إما عموديًا أو أفقيًا.

الشكل 18. أمثلة على كل نمط سلسلة

يمكن تصميم السلاسل بإحدى الطرق التالية:

  1. موزّعة: يتم توزيع المشاهدات بالتساوي بعد احتساب الهوامش. هذا هو الخيار التلقائي.
  2. موزّعة في الداخل: يتم تثبيت العرض الأول والأخير بالقيود المفروضة على كل طرف من السلسلة، ويتم توزيع باقي المشاهدات بالتساوي.
  3. مرجّح: عند ضبط السلسلة على موزّع أو موزّعة في الداخل، يمكنك ملء المساحة المتبقية من خلال ضبط طريقة عرض واحدة أو أكثر على "مطابقة القيود" (0dp). وبشكلٍ تلقائي، يتم توزيع المساحة بالتساوي بين كل طريقة عرض يتم ضبطها على "مطابقة القيود"، ولكن يمكنك تحديد ترجيح للأهمية لكل طريقة عرض باستخدام السمتَين layout_constraintHorizontal_weight وlayout_constraintVertical_weight. يعمل ذلك بالطريقة نفسها المتّبَعة مع layout_weight في تنسيق خطي: تحصل طريقة العرض ذات أعلى قيمة وزن على أكبر مساحة، في حين أنّ الملفات الشخصية التي لها الوزن نفسه تحصل على المساحة نفسها.
  4. مجمّعة: يتم تجميع المشاهدات معًا بعد احتساب الهوامش. ويمكنك تعديل انحياز السلسلة بأكملها، سواء لليسار أو اليمين، أو لأعلى أو لأسفل، من خلال تغيير الانحياز في طريقة العرض "الرأس" للسلسلة.

إنّ عرض "الرأس" للسلسلة - العرض في أقصى اليسار في سلسلة أفقية (بتنسيق من اليسار إلى اليمين) والعرض الأعلى في السلسلة العمودية - يحدد نمط السلسلة في XML. مع ذلك، يمكنك التبديل بين spread وspreadداخل ومعبأ عن طريق اختيار أي طريقة عرض في السلسلة والنقر على زر السلسلة الذي يظهر أسفل العرض.

لإنشاء سلسلة، قم بما يلي، كما هو موضح في الفيديو 4:

  1. اختر جميع طرق العرض المراد تضمينها في السلسلة.
  2. انقر بزر الماوس الأيمن على إحدى طرق العرض.
  3. اختَر السلاسل.
  4. اختَر توسيط أفقيًا أو توسيط عموديًا.

الفيديو 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 في تطبيق Sunflower التجريبي.