Auto Resizing

مرت فترة جدا طويلة منذُ اخر مقال قمت بكتابته !

حان الوقت للعودة للكتابة مره أخرى 

 

مقالنا اليوم عن الـ Auto Layout

لكن سوف اطرق لعدة مواضيع أخرى وبعض الأمور التي سوف تساعدكم في استخدامه
لذا سوف أقسم المقال لعدة دروس في هذه الدورة 

 

أولا : Auto Resizing

 ماهو الـ Auto Resizing؟
هو أساس الـ Auto Layout، قبل اطلاق الـ Auto Layout وتحديدا في عام 2012 في نسخه Xcode 4.5 تقريبا كان لا يوجد الا الـ Auto Resizing وعند اطلاق الـ iPad في عام 2010 كان يلزم المطورين بعمل نسختين منفصلة من التطبيق نسخه للـ iPhone ونسخة أخرى للـ iPad  والسبب هو عدم وجود الـ Auto Layout ، سوف تتضح هذه النقاط فيما بعد

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

 

كيف استخدمه ؟
يمكن استخدام الـ Auto Resizingعندما تضيف أي عنصر الى الصفحة وبشرط أن لا تضع أي قيود عليه ! هذه أهم نقطه يجب ايضاحها في حال عدم استخدام الـ Auto Layout سوف يظهر الـ Auto Resizing وعند استخدام الـ Auto Layout سوف يختفي الـ Auto Resizing

 

أين تجده ؟

عند تحديد أي عنصر في الشاشة قم بإختيار Show the size inspector (علامة المسطرة) 

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

 

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

 

مبدا عمله ؟

سوف تجد في الصورة السابقه مربع كبير وبدخله مربع صغير وخطوط بشكل علامة + خارج المربع الصغير تشبه هذه العلامة |---| هذه العلامات تمثل موقع العنصر (الأعلى ، اسفل ، يمين ، يسار) وفي داخل المربع الصغير علامة أيضا + ولكن الخطين بالشكل التالي <--> هذه العلامتين تمثل الحجم (العرض والارتفاع)

 

قاعده عامة :

عند تفعيل أي علامة من العلامات السته تجعلها متغيره (Dynamic) وعند عدم تفعيلها تجعلها ثابته (Fixed)

 

أيضا من القواعد :

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

 

واخر قاعده :

يجب أن تعلم بأن الـ Auto Resizing ينفذ اعتماداً على الـ view الذي يحتويه

 

الان لنبدأ في الأمثله :

مثال ١

نريد إضافة UIView باي لون وجعله في منتصف الشاشة وبحجم ثابث !

 

تذكر القواعد

أولا : تذكر القاعدة يجب وضع العنصر في الموقع الذي تريده أن يظهر به ومن ثم تضيف الـAuto Resizing قم بإضافة في منتصف الشاشة(الخطوط الزرقاء سوف تساعدك في تحديد منتصف الشاشة)

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

 

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

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

 

أخيرا : قم بالتجربة بتغيير حجم الشاشة من الأسفل وسوف تجد المربع الأحمر يظل مكانه بهما كانت حجم الشاشة !

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

 

مثال٢ 

ماذا اذا اردنا جعل العنصر يكبر ويصغر اعتمادا على حجم الشاشة ؟ كل الذي تحتاج لفعه هو تفعيل الخيارين الذين في منتصف المربع الصغير

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

 

سوف تلاحظ بان الحجم صحيح بانه يكبر ولكن ليش دائما بشكل مربع وليس بحجم مناسب لحجم الشاشة لذا قد تغير الـ Auto Resizing

كما في الصورة التالية 

 

سوف تجد بأن الحجم مناسب في الـ i phone 8والـ iPhone SE وأيضا الـ iPad ولكن غير مناسب مع الـ iPhone 8 plus والـ iPhone x , xs , xs max وحسب علمي لا يوجد حل للمشكلة هذه الا بالـ Auto Layout في الـ Auto Layout يمكنك بعدة طرق جعل التصميم يتغير بشكل متطابق حسب حجم الجهاز لكن في الـ Auto Resizing التغييرات غير متوقعه 100% قد يظهر بشكل صحيح في جميع الأجهزة وقد يظهر في بعضها وبعضها لا ! هذه احدى العيوب !

 

مثال ٣

ماذا اذا اردنا جعله في اعلى اليمين ؟ فقط قم بتحرك العنصر للموقع الذي تريده ومن ثم جعل الـ Auto Resizing

كما في الصورة التالية

 

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

 

مثال ٤

ماذا اذا اردت جعل العنصر بكامل حجم الشاشة (كمثال اردت إضافة صورة وجعله بكامل حجم الشاشة) في هذه الحالة كل الذي تحتاج عمله هو تكبر العنصر وجعله بكامل حجم الشاشة ومن ثم تفعيل جميع خيارات Auto Resizing

كما في الصورة التالية

 

مثال ٥

ماذا اذا اردت جعل الـ Label في موقع وحجم معين في جميع احجام الشاشات ؟ لانه الـ Label ارتفاعه غير متغير  ففقط نحتاج تغيير العرض وتحديد موقعه 

كما في الصورة التالية 

 

مثال ٦

سوف نقوم بتجربة امر مختلف وهو نفس المثال السابق (مثال ٥) ولكن سوف نقوم بربط الـ Label بملف الاكواد (View Controller) ونضيف نص طويل لنرى هل سوف بتغيير حجم الـ Label ام لا 

  override func viewDidLoad() {      

  super.viewDidLoad()        

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

 

قم بتشغيل التطبيق وسوف تجد الـ Label لم يتغير حجمه ولم يعرض جميع النص بل تم إضافة (...) في نهاية الجملة

 

هل توجد طريقه بجعله يتغير بشكل تلقائي اعتمادا على حجم النص ؟ في الـ Auto Layout يمكنك فعل ذلك لكن في الـ Auto Resizing لا يمكنك تستطيع تكبير ارتفاع الـ Label ولكن في حال كان النص قصير سوف يظل ارتفاع الـ Label كما هو !

 

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

 

وأخيرا نصل لاخر جزئية في الـ Auto Resizing وهي لماذا تم ذكر الـ Auto Resizing مادام يوجد فيه الكثير من العيوب والنواقص ؟

 

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