تغيير الحجم: Hug وFill وFixed وWrap

صار صف العادة يرصّ نفسه، لكن اختبره بطريقة صوفيا: اسحب frame شاشة Today ليصبح أعرض. تبقى الصفوف على عرضها القديم، تاركة شريطًا فارغًا من الشاشة على اليمين. اسحبه ليصبح أضيق فتسقط أزرار التعليم خارج الحافّة. حُلّت مشكلة التراصّ؛ أما الأحجام فلا.

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

Hug وFill وFixed

تضبط الحجم من عناصر التحكم في العرض والارتفاع في الشريط الجانبي الأيمن. هناك ثلاثة خيارات.

Hug contents يجعل الـ frame بحجم أبنائه مع الـ padding بالضبط. الشريحة التي تحتضن محتواها تكبر حين تتغيّر تسميتها من “Daily” إلى “Weekends”. الـ frames والنصوص وحدها يمكنها الاحتضان، لأنها وحدها لها محتوى.

Fill container يجعل الابن يأخذ كل المساحة المتاحة في أبيه ذي الـ Auto layout على ذلك المحور. وإذا كان أخوان كلاهما على Fill، يتقاسمان المساحة بالتساوي.

Fixed يضبط حجمًا دقيقًا لا يتغيّر أبدًا. الأيقونات وزر التعليم ثابتة على 32 × 32 لأن هدف النقر في زر التعليم يجب ألّا يكبر أو يصغر مع النص المجاور له.

إعدادات صف العادة في Steady هي:

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

يفرض Figma قاعدة واحدة نيابة عنك: لا يمكن للأب أن يحتضن ابنًا يملؤه على المحور نفسه، لأن كلًّا منهما سينتظر قياس الآخر. إذا ضبطت ابنًا على Fill container، يحوّل Figma الأب من Hug إلى Fixed على ذلك المحور.

الحدّ الأدنى والأقصى

قد ينتج Fill وHug أحجامًا سخيفة في الحالات القصوى. الزر بعرض كامل يبدو جيدًا على الهاتف ومضحكًا بعرض 1,000 px على جهاز لوحي. والشريحة التي تحتضن تسمية من حرف واحد قد تصبح أضيق من رأس الإصبع.

تضع خيارات الحدّ الأدنى والأقصى للعرض والارتفاع (تجدها في القوائم المنسدلة للعرض والارتفاع) هذه الحدود. يستخدم Steady:

• زر Save habit: ‏Fill container، مع max width 480، فيتوقّف عن النمو على الأجهزة اللوحية.
• الشريحة: Hug contents، مع min width 64، فتبقى التسميات القصيرة هدفًا مريحًا للمس.
• حقل النص: Fill container، مع min width 200، فلا ينهار أبدًا في تخطيط ضيّق.

الـ Wrap

شرائح التكرار في لوحة New habit مصفوفة أفقيًا. “Daily, Weekdays, Weekends, Custom” تتّسع عند 393 px لكن ليس عند 320 px أو بالألمانية. فعّل Wrap للصف، فتنتقل الشرائح التي لا تتّسع إلى سطر جديد بدل أن تفيض. وقت كتابة هذا الدرس، يتيح لك الـ frame الملتفّ ضبط المسافة بين الأسطر بشكل منفصل عن الـ gap بين العناصر؛ استخدم الـ 8 px نفسها لتشكّل الشرائح شبكة منتظمة.

الـ Wrap لمجموعات العناصر المتشابهة مثل الشرائح أو الوسوم أو الصور الشخصية. لا تجعل صف العادة يلتفّ: ففي شاشة ضيّقة سينزل زر التعليم إلى سطر خاص به.

إخراج طبقة من الـ flow

أحيانًا يجب ألّا يشارك ابن واحد في الـ flow أصلًا: شارة لهب صغيرة على زاوية أيقونة العادة، أو نقطة تشير إلى تذكير غير مقروء. حدّده وفعّل Ignore auto layout (كان اسمه absolute position حتى وقت قريب، لذا تستخدم الشروحات القديمة ذلك الاسم). تبقى الطبقة داخل الـ frame لكنها تتوقّف عن التأثير في إخوتها، وتضعها بالـ constraints، هنا Right وTop، فتلتصق بالزاوية حين يتغيّر حجم الأيقونة.

صارت صفوفك تتكيّف مع العرض والمحتوى. في الدرس التالي تمنح كل تلك الفجوات والـ paddings نظامًا، فتصبح 12 و16 و24 قرارات بدل أن تكون تخمينات.