قوانين الـ AutoLayout - القاعدة الأول

الان وبعد معرفة جميع الخيارات المستخدمة في الـ Auto Layout حان الوقت الانتقال لقوانين الـ Auto Layout هذه القوانين سوف تساعدك لفهم كيف يعمل ولتجنبك لأغلب المشاكل الذي يوجهها المبتدئين لكن قبل شرح القواعد في امر يتوجب عليا ذكره لجعلك ترى التغيرات بشكل فوري وهل القيود صحيحة او لا ، (نسبة دقتها ٨٠٪ تقريبا) وتذكر في حالات تكون القيود صحيحة ولكن تظهر هنا بشكل خاطئة فدائما اعتمد على تشغيل التطبيق على احجام مختلفة من الأجهزة للتأكد من القيود أنها صحيحه ١٠٠٪  على أي حال تظل ميزة مفيدة والميزة هيا Preview او بالعربي معاينه منها تقدر تضيف عدة أجهزة وسوا كانت بالوضع الطولي او العرضي لمعرفة هل القيود تظهر بشكل صحيح او لا 

شاهد الصورة المتحركة - انتظر التحميل للمشاهدة

في المقطع

• ضغط على ايقونة Show Assistant Editor
• اخترت Preview
• ضغط على علامة + في الأسفل واضفت جهاز جديد (تستطيع إضافة عدد لا يحصى من الأجهزة)
• غيرت وضع الشاشة لوضع Landscape  يوجد زر للتغير بين الوضعين اسفل الشاشة (غير واضح مع الثيم الأسود)

في هذه الصفحة أي قيود تضيفها سوف تظهر مباشرة هنا أحيانا كما ذكرت سابقا تظهر بشكل خاطئ ولكن اثناء تشغيل التطبيق تظهر بدون مشاكل ! لذلك اعتمد عليها بنسبه ٨٠٪ والأفضل قبل نشر التطبيق تشغيله على احجام أجهزة مختلفة عن طريق السيموليتر للتأكد من القيود انها صحيحه .

قاعدة ١: اضيف القيود من الأسفل للأعلى (من الـ SuperView الى اخر عنصر اضفته) قد لا تتضح فكرة هذه القاعدة من عنوانها ولكن سوف تتضح بالأمثلة

شاهد الصورة المتحركة - انتظر التحميل للمشاهدة

قمت بإضافة قيود 

والخطوط بعد الإضافة لونها أزرق وتعين بأن القيود صحيحة

معنى الخطوط :

• اللون الأزرق : ويعني بأنه القيود صحيحة (لا توجد مشاكل)
• اللون الأحمر : القيود خاطئة ( توجد مشاكل في القيود)
• اللون البرتقالي : القيود سوف تظهر بشكل مختلف اثناء تشغيل التطبيق (السبب قمت بتغيير موقع العنصر بدون تحديث الفريم يتوجب عليك الضغط على زر Update Frames لتحديث القيود )

الآن شاهد الصورة المتحركة - انتظر التحميل للمشاهدة 

في هذا المقطع قمت بتغيير القيود وجعلت كل قيد يساوي 0 في قيد الـ top غيرت من Safe Area الى SuperView لجعل الـ view بكامل الشاشة (في الصور الخرائط والـ view فقط تحتاج تجعله اسفل الـ SuperView غير ما ذكر تجعله اسفل الـ Safe Area بحيث لا يتم التغطية عليه مع شريط الساعة Status Bar)

ملاحظة : الـ Safe Area موجوده في جميع الاتجاهات فوق وتحت ويمين ويسار تم اضافتها منذ الإعلان عن الـ iPhone X عند جعل القيد العلوي (Top) على Safe Area فسوف تتجنب ظهور المحتوى فوق (القذله) Notch او شريط الساعة وأيضا عند وضع القيد السفلي (Bottom) فسوف تتجنب من وضع المحتوى فوق شريط اللمس (بديل زر الـ Home) ونفس الامر مع قيد اليمين واليسار سوف تتجنب تغطية المحتوى اسفل الـ Notch عند التفاف الشاشة بصيغة مختصر الاعتماد على الـ Safe Area سوف يجعلك تدعم الـ  iPhone Xوجميع الأجهزة الجديدة بدون مشاكل  مع العلم في الـ Xcode 10 اصبح تلقائي بمعنى أي قيد تضيفه سوف يعتمد على الـ Safe Area الا اذا قمت بتغيير كما فعلت في الفيديو السابق

المقطع السابق تعلمت فيه كيف تقوم بتغيير القيود بعد اضافتها مع العلم يمكنك الضغط على زر الحذف في الكيبورد حذف القيد المحدد بدلاً من تغييره

الان شاهد الصورة المتحركة - انتظر التحميل للمشاهدة

في هذا المقطع قمت بإضافة View جديد ومن ثم قمت بإضافة قيود له ولاحظت بأن القيود باللون الأزرق وتعني بان القيود تم اضافتها بشكل صحيح ! بعدها ازلت جميع القيود واضفت القيود فقط للـ View الأبيض ولاحظت بأن القيود أصبحت باللون الأحمر !

هذا المقصد من قاعدة الأولى 

“اضيف القيود من الأسفل للأعلى (من الـ SuperView  الى اخر عنصر اضفته)”

في المرة الأولى تعلم بأن الـ SuperView يحتوي على قيود مسبقا ومن ثم قمت بإضافة View باللون الأحمر وأضفت له القيود وبعدها قمت بإضافة View باللون الأبيض وأيضا اضفت له القيود

• SuperView
• View(Red)
• View(White)

القيود تمت اضافتها من الأسفل للأعلى لذلك لم نواجهه مشاكل لكن في المرة الثانية قمت بإزالة جميع القيود تحديدا قيود الـ View الأحمر وأيضا الـ View الأبيض وبعدها اضفت فقط قيود للـ View الأبيض ، بما يعني كسرت هذه القاعدة والنتيجة مشاكل في القيود ! رغم بساطة هذه القاعدة الا انها من اكثر المشاكل شيوعاً عند استخدام الـ Auto Layout في هذا المشروع البسيط من السهل ملاحظة الخطأ  ولكن عندما تكون الصفحة تحتوي على الكثير من العناصر (معقده) من الصعب إيجاد المشكلة !