إنشاء واجهة مستخدم متجاوبة باستخدام 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 على مستوى الوحدة، كما هو موضّح في المثال التالي. قد يختلف الإصدار الأحدث عن الإصدار الموضّح في المثال.

   Groovy

   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. في شريط الأدوات أو إشعار المزامنة، انقر على مزامنة المشروع مع ملفات Gradle.

أنت الآن جاهز لإنشاء تخطيطك باستخدام ConstraintLayout.

تحويل تنسيق

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

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

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

إنشاء تخطيط جديد

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

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

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

لإضافة قيد، اتّبِع الخطوات التالية:

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

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

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

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

     

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

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

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

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

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

• انقر على قيد لاختياره، ثم انقر على حذف.

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

  

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

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

  

  الشكل 6. انقر على نقطة ربط خاصة بقيد لحذفه.

إذا أضفت قيودًا متعارضة على طريقة العرض، ستصبح خطوط القيود ملتفة مثل الزنبرك للإشارة إلى القوى المتعارضة، كما هو موضّح في الفيديو 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 على الجانب الأيسر من الحاجز. يتم ضبط الحاجز على "النهاية" (أو الجانب الأيسر في التنسيق من اليمين إلى اليسار) لكل من العرض (أ) والعرض (ب). يتحرّك الحاجز استنادًا إلى ما إذا كان الجانب الأيمن من العرض (أ) أو العرض (ب) هو الأبعد إلى اليمين.

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

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

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

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

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

الشكل 13 يتم حصر العرض C بحاجز، يتحرّك استنادًا إلى موضع وحجم كل من العرض A والعرض B.

ضبط الانحياز للقيود

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

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

ضبط حجم العرض

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

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

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

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

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

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

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

لإنشاء سلسلة، اتّبِع الخطوات التالية، كما هو موضّح في الفيديو 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 في تطبيق العرض التوضيحي Sunflower.