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

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

الشكل 2. أصبح العرض (ج) مقيَّدًا عموديًا الآن أدناه العرض أ.

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

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

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

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

   Groovy

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

   Kotlin

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

2. أضف المكتبة كتبعية في مستوى الوحدة build.gradle، كما هو موضح في المثال التالي. الأحدث عن ما يظهر في المثال.

   Groovy

   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.

تحويل تنسيق

الشكل 3. القائمة المراد تحويل التخطيط إليه ConstraintLayout

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

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

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

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

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

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

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

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

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

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

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

     

     الشكل 4. التنسيق في نافذة السمات إنشاء الاتصالات.

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

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

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

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

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

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

  

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

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

  

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

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

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

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

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

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

الشكل 7. يعد عائق أفقي الوالد.

موضع الطلب

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

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

الشكل 8. أفقي ورأسي .

محاذاة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 12. طريقة عرض تقتصر على إرشاداتنا.

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

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

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

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

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

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

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

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

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

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

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

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

ضبط حجم العرض

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

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

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

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

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

عيِّن هذه السمة على true للسماح بتغيير البُعد الأفقي إلى واحترام القيود. يتم تلقائيًا ضبط الأداة على WRAP_CONTENT. غير مقيَّدة بالقيود.

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

    يتطلب ذلك بُعدًا dp للحد الأدنى لعرض الملف الشخصي.

  • layout_restrictiontwidth_max

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

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

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

الشكل 15. يتم تعيين العرض على جانب 16:9 مع العرض بناءً على نسبة الطول.

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

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

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

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

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

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

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

كل الهوامش التي توفّرها الأداة هي عوامل تساوي 8 بكسل مستقل الكثافة للمساعدة على مواءمة المشاهدات. إلى توصيات الشبكة المربعة بحجم 8 بكسل مستقل الكثافة في Material Design.

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

الشكل 17. سلسلة أفقية ذات طريقتين.

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

الشكل 18. أمثلة على كل سلسلة والأسلوب.

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

1. ممتد: يتم توزيع مرات المشاهدة بالتساوي بعد توزيع الهوامش . هذا هو الخيار التلقائي.
2. موزّعة في الداخل: يتم إلحاق العرضَين الأول والأخير بـ القيود على كل طرف من نهاية السلسلة، والباقي بالتساوي توزيعها.
3. الوزن: عند ضبط السلسلة على spread أو الانتشار بالداخل، يمكنك ملء المساحة المتبقية من خلال ضبط خانة واحدة أو أكثر. طرق عرض "مطابقة القيود" (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 في دوار الشمس تطبيق تجريبي.