تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

أنشئ واجهة مستخدم متجاوبة باستخدام ConstraintLayout جزء من Android Jetpack.

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

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

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

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

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

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

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

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

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

الشكل 2. أصبح العرض "ج" الآن مقيَّدًا عموديًا أسفل طريقة العرض "أ".

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

إضافة ConstraintLayout إلى مشروعك

لاستخدام ConstraintLayout في مشروعك، يمكنك المتابعة كما يلي:

تأكَّد من الإفصاح عن مستودع maven.google.com في ملف settings.gradle:

رائع

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

Kotlin

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

أضِف المكتبة كملحق في ملف 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")
}

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

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

تحويل تنسيق

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

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

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

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

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

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

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

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

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

اسحب طريقة عرض من نافذة اللوحة إلى المحرِّر.

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

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

عند وضع القيود، تذكر القواعد التالية:

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

يمكنك حذف قيد من خلال القيام بأي مما يلي:

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

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

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

الفيديو 2. إضافة قيد يناقض أحد القيود الموجودة.

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

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

الموضع الرئيسي

حصر جانب العرض على الحافة المقابلة للتصميم.

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

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

موضع الطلب

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

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

الشكل 8. وهي قيد أفقي وعمودي.

محاذاة

محاذاة حافة طريقة العرض مع الحافة نفسها لعرض آخر.

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

يمكنك معادلة المحاذاة عن طريق سحب العرض للداخل من القيد. على سبيل المثال، يُظهر الشكل 10 الخلية B مع محاذاة إزاحة تبلغ 24 بكسل مستقل الكثافة. يتم تحديد الإزاحة من خلال هامش العرض المقيَّد.

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

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

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

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

محاذاة الخط القاعدي للنص لطريقة العرض مع الخط القاعدي للنص لطريقة عرض أخرى.

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

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

الشكل 11. قيد محاذاة خط الأساس.

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

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

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

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

الشكل 12. تمثّل هذه السمة طريقة عرض تقتصر على إرشادات معيّنة.

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

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

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

ولإنشاء حاجز، اتّبِع الخطوات التالية:

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

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

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

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

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

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

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

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

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

ضبط حجم العرض

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

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

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

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

ثابت: حدِّد سمة معيّنة في مربّع النص التالي أو من خلال تغيير حجم العرض في المحرِّر.
التفاف المحتوى: لا يتم توسيع العرض إلا بقدر ما يتناسب مع محتواه.

layout_limitededwidth

اضبط القيمة على true للسماح بتغيير البُعد الأفقي لمراعاة القيود. وفقًا للإعدادات التلقائية، لا يتم وضع قيود على الأداة المضبوطة على WRAP_CONTENT.

قيود المطابقة: يتم توسيع العرض قدر الإمكان لتلبية القيود المفروضة على كل جانب، بعد أخذ هوامش المشاهدة في الاعتبار. ومع ذلك، يمكنك تعديل هذا السلوك باستخدام السمات والقيم التالية. لا يتم تطبيق هذه السمات إلا عند ضبط عرض العرض على "قيود المطابقة":
- layout_limitedtwidth_min
  يتطلب ذلك بُعدًا dp للحد الأدنى لعرض الملف الشخصي.
- layout_restrictiontwidth_max
  يأخذ ذلك البُعد dp للحد الأقصى لعرض الملف الشخصي.
ومع ذلك، إذا كان البُعد المحدَّد يتضمّن قيدًا واحدًا فقط، سيتم توسيع العرض لتلائم محتواه. ويتيح لك أيضًا استخدام هذا الوضع سواء بالارتفاع أو العرض ضبط نسبة الحجم.

ملاحظة: لا يمكنك استخدام match_parent لأي ملف شخصي في ConstraintLayout. بدلاً من ذلك، استخدِم "قيود المطابقة" (0dp).

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

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

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

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

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

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

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

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

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

جميع الهوامش التي توفرها الأداة هي عوامل تبلغ 8 بكسل مستقل الكثافة للمساعدة في مواءمة عروضك مع توصيات الشبكة المربعة التي تبلغ دقتها 8 بكسل مستقل الكثافة في التصميم المتعدد الأبعاد.

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

الشكل 17. وهي سلسلة أفقية مع عرضَين.

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

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

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

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

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

لإنشاء سلسلة، اتّبِع الخطوات التالية، كما هو موضّح في الفيديو 4:

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

الفيديو 4. إنشاء سلسلة أفقية.

إليك بعض النقاط التي يجب مراعاتها عند استخدام السلاسل:

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

إنشاء القيود تلقائيًا

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

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

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

يتم إيقاف الاتصال التلقائي تلقائيًا. فعِّل هذه الميزة بالنقر على تفعيل الاتصال التلقائي بعنصر رئيسي في شريط أدوات "محرِّر التنسيق".

الصور المتحركة في الإطار الرئيسي

ضمن ConstraintLayout، يمكنك تحريك التغييرات على حجم العناصر وموضعها باستخدام الترميزَين ConstraintSet وTransitionManager.

ConstraintSet هو عنصر خفيف يمثّل القيود والهوامش والمساحة المتروكة لجميع العناصر الثانوية في ConstraintLayout. عند تطبيق ConstraintSet على ConstraintLayout معروض، يعدّل التنسيق القيود المفروضة على كل عناصره الثانوية.

لإنشاء صورة متحركة باستخدام ConstraintSet، حدِّد ملفي تنسيق يعملان كإطار رئيسي للبدء والنهاية للصورة المتحركة. يمكنك بعد ذلك تحميل ConstraintSet من ملف الإطار الرئيسي الثاني وتطبيقه على ConstraintLayout المعروض.

ملاحظة: تضيف الصور المتحركة في ConstraintSet صورًا متحركة بحجم العناصر الفرعية وموضعها فقط. ولا تحرّك سمات أخرى، مثل اللون.

يوضح مثال الرمز التالي كيفية تحريك زر واحد إلى أسفل الشاشة.

// 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>

ملاحظة: في الإصدار 3.6 من "استوديو Android" والإصدارات الأحدث، يمكن أن تحل ميزة ربط العرض محل مكالمات findViewById(). ويوفّر أيضًا أمان نوع وقت التجميع للرمز البرمجي الذي يتفاعل مع طرق العرض. ننصحك باستخدام ربط العرض بدلاً من findViewById().

مصادر إضافية

يتم استخدام ConstraintLayout في التطبيق التجريبي Sunflower.