تعرف على مكونات الـ Auto Layout

الان وبعد اخدنا لفكرة عامة عن الـ Auto Resizing

حان الوقت الانتقال لموضوع الـ Auto Layout كما ذكرت سابقا الـ Auto Layout تم اضافته منذ 2012 وتحديدا عند الإعلان عن الـ iphone 5 بحجم شاشة مختلف عن الـ iphone 4

الـ Auto Layout سبب في نقلة نوعيه كبيره وفي تسهيل على المطورين إضافة القيود بحيث اصبح بإمكانهم وضع قيود معقده وبسهولة قبل أن اتطرق لاهم قوانينه عند فهمها سوف تسهلك التعامل معاه سوف ابدا بشرح اهم النقاط 

بدايتنا لنفهم معنى الرموز والخيارات 

في الـ storyboard سوف تجد عدة ايقونات في اسفل الصفحة

الايقونة الأولى :

عباره عن خطين عاموديه وفي المنتصف علامة مثلث يطلق عليها resolve auto layout issues ومن اسمها وظيفتها حل مشاكل الـ Auto Layout

الخيارات الموجودة كما في الصورة التالية :

بداية سوف تلاحظ بأنه الخيارات مقسمه لقسمين

• القسم الأول: selected views وتعني العناصر المحددة سوف يتم تنفيذ عليها أي امر تختاره من القائمة
• القسم الثاني: All views in view controller ومعناها جميع العناصر الموجودة سوف يتم تطبيق عليها أي امر تختاره

الخيارات هيا :

Update constraints ومعناها تحديث القيود تستخدم عندما تقوم بوضع قيود على العنصر ومن ثم تغير من حجمه او موقعه سوف تجد بأن الخطوط تغيرت من الأزرق الى البرتقالي اذا اردت أن تحدث القيود تقوم بالضغط على هذا الخيار

في حال أردت أن تعيد العنصر للقيود السابقة تضغط على الايقونة  الأخيرة الي عباره عن علامة سهم بشكل دائرة Update Frames او تقوم بالتراجع بالضغط على cmd + z

نعود للخيارات

سوف تجد خيارين

• Add missing constraints 
• Reset to suggested constraints

 كلاهما يقومان بإضافة قيود مقترحه الأول يضيف قيود الناقصة او يضيف جميع القيود في حال لم تضغط أي قيود والثاني يقوم بإضافة او تغير القيود الى قيود جديدة

وظيفتهم مشابهه بشكل كبير وكلهما لا يعتمد عليهم غالبا سوف يضيف قيود غير صحيحه او غير الذي تريده أحيانا تكون استخدام هذه الخيارات مفيدة وتسرع العمل 

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

الخيار الأخير هو Clear constraints

ووظيفته هو حذف جميع القيود يستخدم في حال لم تعلم ماهي المشكلة وتريد إعادة إضافة جميع القيود من جديد سوا للعنصر المحدد او لجميع العناصر

وأيضا يستخدم في حال اردت إضافة Auto Resizing لانه كما ذكرت سابقا يجب إزالة جميع القيود للعنصر لاستخدام الـ Auto Resizing 

ولكن العكس غير صحيح في حال استخدمت الـ Auto Resizing تستطيع إضافة الـ Auto Layout وسوف يقوم بتجاهل الـ Auto Resizing

الايقونة الثانية :

عباره عن خطين عاموديه وبينهم مربع في المنتصف يطلق عليها Add New Constraints هذه اهم ايقونة ومنها تضيف القيود

الخيارات الموجودة كما في الصورة التالية :

1. إضافة قيد لفوق Top
2. إضافة قيد لليمين Trailing
3. إضافة قيد للأسفل Bottom
4. إضافة قيد لليسار Leading
5. تثبيت العرض Width
6. تثبيت الارتفاع Height
7. جعل عنصرين محدده أو اكثر بنفس العرض Equal Widths
8. جعل عنصرين محدده أو اكثر بنفس الإرتفاع Equal Heights
9. جعل العنصر يكبر او يصغر بنسبه معينه Aspect Ratio
10. إضافة القيود بالضغط على زر Add Constraints او تستطيع الضغط على زر الرجوع في الكيبورد لإضافتهم بدون الحاجة للضغط على هذا الزر

هل تلاحظ السهم عند الخيارات 1,2,3,4؟

هذا السهم سوف تحتاج الى استخدامه لتحديد هل تريد أن يكون القيد مرتبط بأي عنصر هل هو بالعنصر الأول او الثاني ؟

عند عدم وجود عناصر أخرى سوف يكون هناك خيارين الأول ربطه بالـ view والأخر Save Area في اغلب الاحول يتوجب عليك ربطه بالـ Save Area

لانه مثلا اذا كان هناك label لا تريد أنه يكون الـ label في فوق شريط الساعة  او فوق النوتش في الـ iPhone X ولكن عند إضافة صورة او خريطة الأفضل

هو ربطه بالـ View بحيث تغطي جميع الشاشة

هذه صورة للخيارات الذي سوف تظهر اعتمادا على العناصر الموجودة في الصفحة
كما تلاحظ هناك عنصر Label محتواه hi there ظاهر ضمن الخيارت والسبب هو لانه العنصر الحالي اسفل عنصر الـ Lable

الايقونة الثالثه :

عبراه عن مستطيلين فوق بعض يطلق عليه Align وتعني اصطفاف 

الخيارات الموجودة كما في الصورة التالية :

القسم هذا لا يستخدم بكثره فيه غير خيارين وهما

• Horizontally in Container 
• Vertically in Container

تفعيلهم مع بعض سوف يجعل العنصر في منتصف الصفحة

بقية الخيارات  لا تستخدم غالبا  لكن فكرتها التالي يتوجب عليك تحديد عنصرين على الأقل عنصر واحد على الأقل يجب ان يحتوي على قيود مسبقا

العنصر الاخر يجب ان يكون هناك قد Top بينه وبين العنصر السابق (في حالة اردت استخدام Leading/ Trailing edge)

ومن ثم تستطيع اختيار أي خيار من الخيارات التي في الاعلى كمثال اذا اخترت Leading Edges سوف يجعل العنصرين محاذاتهم من اليسار لليمين

تبقى ٣ خيارات

• Horizontal Center 
• Vertical Center
• Frist Baselines

الخيارات هذه تستخدم لتوسيط عنصر فوق عنصر اخر

مثلا عندك label وأيضا view تريد جعل الـ label في منتصف الـ view فهنا سوف تفعل الخيارين

• Horizontal Center 
• Vertical Center

ولكن اذا اردت جعل الـ label في بداية حافة الـ view بمعنى اخر جعله فوقه تماماً فهنا سوف تستخدم 

• Frist Baselines

الايقونة الرابعه :

عباره عن مربع وبداخلها سهم الى الأسفل يطلق عليها Embed In ووظيفتها إضافة العناصر المحددة الى عنصر اخر

الخيارات الموجودة كما في الصورة التالية :

اهم الخيارات هيا

• View ( سيتم شرحه لاحقاً)
• StackView ( سيتم شرحه لاحقاً)
• وأيضا هناك الـ Scroll View ووظيفته إضافة شريط تمرير وعناصر مختلفة (لن أذكره في هذا الدرس)