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

قاعدة ٢: الـ Auto Layout يحتاج الى ٤ قيود ليكون راضياً ( يحتاج يعلم الموقع x,y وأيضا الحجم الطول والعرض)

هذه القاعده واضحه اضيف اربعه قيود لتجعل الـ Auto Layout راضياً

هنا راح اطبق ثلاثة أفكار مختلفة

في اول مقطع فقط سوف اضيف top , bottom , leading , trailing والي هيا قيود (فوق ، تحت ، يسار ، يمين)

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

سوف تلاحظ بأن المربع يتغير حجمه اعتمادا على حجم الشاشة ويميل الى المستطيل في الشاشات الاخرى وهذا بسبب الـ leading , trailing يسببوا في انكماش العنصر من الجانبين عند فتح اختيار الـ ipad سوف تلاحظ بأنه شكل مربع على أي حال هذه الطريقة غير فعالة اذا اردت ان يظل بشكل مربع في جميع الشاشات

في ثاني مقطع سوف أقوم بتثبيت حجم المربع وبالتالي سوف يظل بنفس الحجم في جميع الشاشات مهما كان حجمها

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

في ثالث مقطع سوف تلاحظ بأن المربع يظل بشكل المربع ولكن حجمه يتغير اعتمادا على حجم الشاشة والفضل يعود لميزة الـ Aspect Ratio

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

هل لاحظت ماهو النمط ؟ جميع القيود التي وضعتها عباره عن ٤ قيود فقط الأربعة قيود مثلة امرين حددت الحجم والموقع أيضا اختلاف القيود أدت لنتائج مختلفة تماماً  تذكر عندما تكسر القيود تستطيع إصلاحها فقط بتغير طريقة اضافتك للقيود

ملاحظة : كسر القيود تعني بأن تضيف قيود وتعمل بشكل صحيح على مقاس الشاشة الذي اضفت عليها القيود ( القيود باللون الأزرق) ولكن عند تغيير حجم الشاشة سوا باختيار حجم شاشة اكبر او حجم شاشة اصغر تجد بأن القيود أصبحت باللون الأحمر !

وتعني بوجود مشكلة في القيود (انكسرت القيود) ، وايضا لاحظ بأن جميعها الامر المشترك بينهم كان وجود قيد الـ top لأني اردت ان اجعله في اعلى الصفحة 

أفكار أخرى

في حال اردت ان تجعل العنصر في منتصف الصفحة ولا ولا يتغير حجمه ففقط تحتاج تثبت الطول والعرض وأيضا تضيف الـ Horizontally in Container و Vertically in Container

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

تذكر اذا اردت ان تجعل عنصر في منتصف الشاشة تماماً لابد من استخدام Horizontally in Container و Vertically in Container

هل جميع العناصر تحتاج الى ٤ قيود ؟

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

• Lable
• Button
• Switch
• Segmented Controller

تستطيع إضافة حجم لها وتغيير حجمها أيضا لكن بشكل عام اذا فقط اضفت موقع x,yفهو امراً كافياً لاحظت من جميع الفيديوهات السابقة كان التعامل فقط مع عنصر واحد الغرض منه هو توضيح القيود فسوا كان هناك عنصر واحد او عدة عناصر يظل الامر نفسه

اخر مثال سوف اتطرق لموضوع معين

وهو كيف إضافة label وأيضا تغيير حجمه اعتمادا على محتواه فاذا كان المحتوى طويل يصبح من عدة اسطر من الأمور المستخدمه بكثره خصوصا في الـ Tableview والـ Collectionview عند عمل Custom Cell بطبيعة الحال فعند جلب بيانات من الانترنت فانت لا تعلم ماهو حجمها

في هذا المقطع التالي

سوف استخدم ٢ من الـ label احدهم لن اغير محتواه والأخر سوف اغير محتواه اثناء عمل التطبيق الفكرة هيا تغيير محتوى label 1 بدون التأثير عن label 2

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

لاحظت في الفيديو اضفت قيود فوق ويمين وثبت العرض بالنسبة للـ label الأحمر ولكن في الـ label الأخضر وضعت قيود (فوق ، يسار ، يمين) بدون تثبيت العرض وأيضا غيرت الـ Lines الى 0 ثبت العرض للـ label الأحمر لاني لا اريد أن يتغير حجمه اعتمادا على حجم الشاشة ولكن الـ label الأخضر اريد أن يتغير حجمه وأيضا عند وضع Lines الى 0 فمعناه اذا لم تجد مساحة كافيه فأجعل النص على عدة اسطر الان قم بربط الـ label الأخضر واضيف نص طويل لترى النتيجة

import UIKit



class ViewController: UIViewController {



    @IBOutlet weak var label1: UILabel!

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        label1.text = "Let us test If the label can stay in his position"

    }

ماذا اذا اردت جعلهم متساويين في الحجم ؟

في طرقتين 

الأولى عن طريق تحديد العنصرين ومن ثم وضع قيد equal widths

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

الطريقة الثانية عن طريق الضغط على زر control والسحب من العنصر الأول الى العنصر الثاني ومن ثم اختيار equal widths

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

في أفكار أخرى كثيره لكن اعتقد بأنه هذه الأفكار كافيه