قوانين الـ AutoLayout - أمور إضافية

أمور إضافية : 

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

الان ماذا تريد ؟

تريد أن تجعل صفحة الـ Profile تظهر بشكل صحيح في جميع الأجهزة وأيضا حجم الصورة تظهر بشكل مناسب اعتماداً على حجم الشاشة قد يبدو الامر معقداً ولكن الامر اسهل بما تتصور !
 سوف نستفيد من ميزة Multiplier ميزة ضمن الـ Auto Layout الفكرة هيا جعل حجم الصورة المستخدم ٣٠٪ من حجم الـ Popup بمعنى حجم الصورة جزء من حجم صفحة الـ Profile 
قمت بمحاكات شكل صفحة الـ Profile او ان صح التعبير الـ Popup
بعمل مستطيل طويل باللون الأحمر في منتصف الصفحة واضفت مربع صغير في اعلى الصفحة باللون الأخضر دلاله على صورة المستخدم 

الان سوف اضيف القيود للمستطيل الأحمر

شاهد المقطع :

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

ومن ثم سوف أقوم بإضافة القيود للمستطيل الأخضرلاحظ كيف اضفت قيود العرض والارتفاع وكيف ربطته بالمربع الأحمر ! ومن ثم قمت بتغير القيمة الـ Multiplier من 1الى 0.3 وتمثل الـ 30%

ملاحظة : علقت على زر shift في الكيبورد لإضافة اكثر من قيد  الذي اضفتهم هم 

• Top
• Equal Height
• Equal Width
• وأخيرا ضغط على Add Missing Constraint

لانه باقي قيد واحد وحقيقة لم يضبط معي الا باستخدام الخيار هذا القيد الناقص وهو Center Vertcally

شاهد المقطع :

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

اعتقدت وضحت الفكرة الان ، جعلت المربع الأخضر بنفس الارتفاع وبنفس العرض ولكن بنسبة مختلفة وهيا ٣٠٪ من حجمه ! بما يعني اذا صغر حجم المربع الأحمر سوف يصغر المربع الأخضر بنسبة ٣٠٪
ونفس الشي اذا كبر راح يكبر بنسبة ٣٠٪

الخطوة السابقة سببت مشكلة !

وهيا  تغيير حجم المربع الاخضر بسبب جعله مساوي لحجم المستطيل الأحمر تغير شكله من مربع الى مستطيل ! الحل هو تغيير نسبة الارتفاع من  30% الى 20% لجعل بشكل مربع بدلاً من المستطيل فكل الذي نحتاجه هو تعديل نسبة الارتفاع وعمل Update Frame

شاهد المقطع :

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

الان تستطيع مشاهدة النتيجة في جميع الاجهزة وسوف تجدها تظهر بشكل مناسب !
ولكن عند تشغيله في الـ iPhone X سوف تلاحظ وجود مشكلة 

هل تستطيع معرفتها وحلها ؟
فقط تحتاج تعدل بعض القيود لجعلها تعمل

سوف اجعل هذه الخطوة تحدي لك لتحلها =)