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

القانون الرابع والاخير استخدم الـ UIStackView في أي وقت تستطيع استخدامه !

كما ذكرت الـ StackView هو احدث امر تم اضافته في الـ Xcode تم اضافته في iOS9 مما يعني قبل ٣ سنوات فقط في البداية دعني أريك كيف إضافة عناصر الى الـ StackView

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

من المميزات المفيده في الـ StackView هي اذا كانت العناصر بترتيب افقي سوف يكون الـ StackView تلقائيا بمحور الافقي والعكس صحيح وتستطيع تغيير المحور من خصائص الـ StackView

خصائص الـ StackView

• Axis: وتعني المحور اما افقي Horizontal او عامودي Vertical تغير المحور سوف يغير من ترتيب العناصر داخل الـ StackView وأيضا يتضح لك بأن العناصر يجب أن تكون افقيه او عامودي لاستخدام الـ StackView!
• Alignment: وتعني تراص أو انتظام ، بمعنى كيف يكون تنظيم العناصرداخل الـ StackView يتضح اكثر عندما يكون هناك عنصر على الأقل بحجم اكبر من بقية العناصر فهنا تستطيع تحديد موقع بقيت العناصر هل تصبح بحجم العنصر الأكبر في هذه الحالة تختار Fill او تكون في الأعلى او الأسفل او المنتصف 
• Distribution: وتعني التوزيع ، بمعنى توزيع العناصر (تباعدهم) هل التباعد متساوي ؟ ، هل التباعد يعتمد على مسافة معينه

بما انه هذا اكثر امر سوف تستخدمه عند استخدام الـ StackView
سوف أقوم بشرحه ببعض التفصيل

• Fill: يعتمد على Content Hugging Priority او اختصار CHP العنصر الذي يملك اقل نقطة CHP يكون الأولية له بأنه يأخذ المساحة الأكبر ! ، تذكر هذا الاختصار سوف اعود لشرحه بالتفصيل
• Fill Equally: وتعني جعل المساحة متساوية تماماً بين جميع العناصر داخل الـ StackView
• Fill Proportionally: وتعني باختصار بما أنه هناك مساحة كافية سوف تكون جميع العناصر بحجمها الطبيعي ، لكن اذا لا توجد مساحة كافية سوف يتم تغير حجم العناصر (بصيغة أوضح اذا حجم الشاشة اصغر سوف يتم تغيير احجام العناصر ، اذا حجم الشاشة اكبر سوف تظهر العناصر بحجمها الطبيعي)
• Equal Spacing: وتعني سوف يتم الحفاظ على المسافة في جميع الحالات بدون أن يتم تغيير حجم العناصر قد تستغرب ما الفرق بينه وبين الـ Fill Equally الفرق في حال المسافة كانت كبيره والعناصر تجاوزت مستوى الصفحة عندها فقط سوف يتم تغير حجم عنصر او اكثر بما يعني سوف يحاول الحفاظ على مسافة ثابته بدون تغيير حجم العناصر قدر الإمكان ولكن بالنسبة الى Fill Equally فإنه سوف يقوم بتغيير حجم جميع العناصر 

هذا المقطع يوضح الفرق

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

في العناصر التي في الأعلى جعلتها على وضع Fill Equally ولكن العناصر التي تحت جعلتها على وضع Equal Spacing هل لاحظت الفرق ؟

Equal Centering:

وتعني جعل المسافة متساوية اعتمادا على منتصف كل عنصر فاذا جعلنا المسافة ٢٠ بكسل واذا كان هناك عنصرين وكل عنصر عرضه ٢٠٠ بكسل فإنه سيتم الاعتماد على مسافة ٢٠ بكسل بين منتصف العنصر الأول الي هو يساوي ١٠٠ بكسل ومنتصف العنصر الثاني الي هو يساوي ١٠٠ بكسل المسافة بين منتصف العنصر الأول ومنتصف العنصر الثاني سوف تساوي ٢٠ بكسل واذا اضفنا عنصر ثالث ولكن بمسافة ٣٠٠ بكسل فإنه سوف تحسب مسافة ٢٠ بكسل من منتصفه 
عند مشاهدة النتيجة النهائية بالعين المجردة سوف تلاحظ وجود اختلاف في المساحة بين العناصر بسبب اختلاف حجم العنصر الثالث لانه الحسبة تحسب المسافة من منتصف كل عنصر ، أتمنى انه فكرتها اصبحت واضحه !

اخر خاصية موجودة في الـ StackView هي الـ Spacing

باختصار ماهي المسافة التي تريدها بين العناصر اعتماداً على القيمة المدخلة واعتماد على اختيارك من قائمة الـ Distribution سوف يتم إضافة المسافة

الان سوف اشرح مفهوم الـ Content Hugging Priority او اختصار CHP يمكن تسميتها بالعربي بأولوية نقطة الاحتضان بداية يتوجب عليك معرفة كيف تصل الى معرفة ماهي الـ CHP لأي عنصر تريده

أولا قم بتحديد أي عنصر تريده ومن ثم شاهد الصورة التالية :

كما تلاحظ بأن CHP لكل من العرض والارتفاع يساوي 251 بالنسبة الى الـ Label (هذه هيا القيمة الافتراضية الى الـ Label) مع ملاحظة تختلف القيمة الافتراضية حسب كل عنصر ! عموما ًلجعل الامر واضحاً
سوف أشرحها بشكل عام ومن ثم سوف اقوم بشرحها باستخدام الـ StackView ومنها سوف يتضح كيف يعمل الـ Fill في الـ Distribution
 باختصار افترض وضعت قيود بين عنصرين مرتبطين ببعض ولم تضع قيد في (عرض العنصر ، لم تقم بتثبيت العرض) الان في حالة جعلت الايفون بالوضع الافقي او شغلت التطبيق على شاشة اكبر ماهو العنصر الذي سوف يكبر حجمه ليملأ المساحة الفاضية ؟ اذا اجابتك كل العنصرين سوف يملأان المساحة فهيا إجابة خاطئة لأنك لم تضع قيد Equal widths فلن يحدث ذلك !

اذا ماهو العنصر الذي سوف يملأ بقية المساحة الفارغة ؟

الإجابه اذا كلا العنصرين يملكان نفس الـ CHP فإن الذي سوف يقرره الـ Xcode امراً غير معروفاً  وسوف يجعل أحدا العنصرين يملأ المساحة الفاضية بشكل عشوائي ( حسب ملاحظتي بأن غالباً يكون العنصر الايسر هو من يملأ المساحة الفارغة) لكن بشكل عام احدى العنصرين سوف يملأ المساحة الفارغة

ولكن ماذا اذا اردت التحكم في الامر حسب رغبتك ؟

باختصار اجعل القيمة التي تريدها أن تستغل بقية المساحة هيا القيمة الأصغر ! لاحظ في الفيديو افتراضياً عندما كانت القيمتين تساوي 251 الـ Label الايسر (الأخضر) اخد المساحة الفارغة  لكن عندما قمت بتغيير القيمة بجعل الـ CHP للـ Label (الأخضر) اكبر جعلته بقيمة 252 وبالتالي القيمة الأصغر أصبحت للـ Label (الأحمر) لذلك اصبح الـ Label الايمين (الأحمر) هو الأكبر !

شاهد المقطع

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

نفس المفهوم هذا يطبق مع الـ StackView اذا جعلت الـ StackView في وضع الـ Fill بالنسبة الى الـ Distribution واردت جعل احد العناصر اكبر من بقيت العناصر فقط اجعل قيمة الـ CHP اصغر من بقية العناصر الان سوف اطبق نفس المبدأ لكن مع الـ StackView سوف اضيف ٣ من الـ textfield ومن ثم سوف أقوم بتغيير الـ CHP للعنصر الذي في المنتصف وسوف تلاحظ بأنه اصبح هو الأكبر حجماً

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

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

معلومة :
تستطيع وضع StackView داخل StackView وبداخل أيضا StackView بمعنى اخر تستطيع وضع عدد لا نهاية من الـ StackView داخل بعض وبالتالي تستطيع عمل تصميم معقد بأبسط واسرع طريقة ممكنه وبأقل عدد من القيود
 لكن كما ذكرت سابقاً ليس هناك طريقة واحده لإضافة القيود تستطيع استخدامها في جميع الحالات ! لذلك تحتاج الى استخدام جميع القوانين الذي ذكرتها ودمجها مع بعض في حال احتجت لذلك كأن تضيف StackView بداخل View مثلاً !
 او تضيف عنصرين في StackView وعنصر اخر بدون وضعه في StackView حسب التصميم والحالة تستطيع معرفة متى تستخدم الـ StackView ومتى لا تستطيع استخدامه .