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

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

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

   Kotlin

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

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

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

يمكنك استخدام القيود لتحقيق أنواع مختلفة من سلوك التنسيق، كما هو описан في الأقسام التالية.

الموضع الأصلي

موضع الطلب

محاذاة

محاذاة القاعدة

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

التقييد بعنصر عائق

تعديل تحيز القيود

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

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

ضبط حجم العرض

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

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

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

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

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

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

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

  • layout_constraintWidth_max

    يأخذ هذا العرض سمة dp لعرض الحد الأقصى للعرض.

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

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

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

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

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

تعديل هوامش العرض

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

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

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

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

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

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

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

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.