الـ Size Classes

الان وبعد أن اصحبنا متمكنين من الـ Auto Layout حان الوقت التحدث عن موضوع تابع للـ  Auto Layout وهو الـ Size Classes

ماهو الـ Size Classes ؟

هل لاحظت بعض التطبيقات تكون عبارة عن نسخة واحده فقط ولكن تعمل في الـ iPhone وأيضا الـ iPad واهم منذ ذلك هو رغم انه تطبيق واحد الا انه التصميم مختلف تماماً بين النسختين ! 
هذه فائدة الـ Size Classes تذكر الـ iPad ليس مجرد iPhone بشاشة كبيرة ! بل جهاز منفصل بذاته بشاشة كبيرة وبخصائص فريدة به ، وكمطور يتوجب عليك استغلال المساحة التي يوفرها لك
لجعل تطبيقك ببعد مختلف وليس مجرد نسخه iPhone بحجم اكبر !

مفهوم الـ Size Classes

هو تقسم الأجهزة والأوضاع الى ٤ اقسام مختلفة

في الـ iPhone:

عندما يكون الجهاز بالوضع العامودي
 الارتفاع : Regular، العرض : Compact 
الاختصار يكون wC x hR

W تعني العرض Width
H تعني الارتفاع Hight

عندما يكون الـ iPhone بوضع الافقي

جميع الـ iPhone

يكونوا :

الارتفاع Compact، العرض : Compact 
الاختصار wC x hC

فقط أجهزة الـ plus وأيضا الـ S Max
يكونوا :

الارتفاع : Compact، العرض : Regular 
الاختصار wR x hC

بالنسبة الى الـ iPad:

عندما يكون بالوضع العامودي او العرضي (شاشة كاملة): 
الارتفاع : Regular، العرض : Regular 
الاختصار يكون wR x hR

لكن عندما يكون في وضع اكثر من النصف حجم الشاشة (اثناء تشغيل تطبيقين يكون حجم تطبيقك اخد الحيز الأكبر) 
الارتفاع : Regular، العرض : Regular 
الاختصار يكون wR x hR

و عندما يكون في وضع نصف او اقل من نصف الشاشة (اثناء تشغيل تطبيقين)

يكون :

الارتفاع : Regular، العرض : Compact 
الاختصار يكون wC x hR

W تعني العرض Width
H تعني الارتفاع Hight

بمعنى اخر عندما يكون في وضع تشغيل تطبيقين يصبح بحجم الـ iPhone بالوضع العمودي !

هل لاحظت كلامي السابق  ؟
 بدأت دائما بذكر الارتفاع اولاً السبب هو لجعلك تفهم كيف تقرا الصورة المختصرة التي سوف تشرحلك احجم الـ Size Classes باختصار وفي صورة وحدة

الان وقد فهمت مفاهيم الـ Size Classes ومعرفتك السابقة بالـ Auto Layout اذا يتبقى فقط التطبيق  كيف تنتقل بين الأوضاع الأربعة للـ Size Classes ؟
 قمت بإضافة View احمر وأيضا Label وقمت بإضافة القيود مسبقاً

الان في المقطع التالي : سوف أقوم بتغيير قيود نسخة الـ iPad مع جعل نسخة الـ iPhone كما هيا !

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

هل لاحظت ماذا فعلت ؟

• أولا : لاني اريد تغيير القيود الـ iPad فقمت بإختيار الـ iPad في اسفل الشاشة
• ثانيا : ضغط على زر Very for Traits واخترت Width و Height بمعنى wR x hR
• ثالثا : ازلت قيد الـ Top من الـ View الأحمر وغيرت موقعه ومن ثم اضفت قيد الـ Bottom له
• رابعا : ضغط زر الـ   Done Varying
• خامسا : رجعت الى حجم الـ iPhone لأريك بأن الـ iPhone ظل بنفس قيوده السابقة رغم تغيير قيود الـ iPad

هذه هي الطريقة باختصار لاستخدام الـ Size Classes!  
الامر سهل اليس كذلك ؟  

عندما تكون في وضع الـ Size Classes تستطيع تغيير القيود ، تستطيع أيضا حذف القيود كما فعلت أيضا تستطيع إضافة عناصر أخرى لم تكن موجودة ! بما يعني تصبح في وضع معزول تماما على الـ Auto Layout الأساسية  !
 تذكر عندما تضغط الـ Auto Layout بشكل عام فانت تضعها على جميع الأجهزة نفس القيود سوف تطبق على جميع الأجهزة والأحجام المختلفة ! 
لذلك تحتاج الى استخدام الـ Size Classes لجعلها تبدوا بشكل افضل ومختلف بما يعني تجربة استخدام افضل للمستخدمين 

الان سوف اشرح جزئية أخرى :

وهيا كيف تغيير حجم الخطوط بحيث تظهر في الـ iPad بحجم اكبر وتصبح مقروءة في الشاشات الكبيرة ! الطريقة أيضا سهلة ولست بحاجة لدخول وضع الـ Very for Traits 
لكن يتوجب عليك تذكر معنى الرموز التي ذكرتها في البداية تذكر الـ iPad يكون wR x hR بما يعني Regular x Regular

الان شاهد المقطع 

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

هل لاحظت؟ 

هناك زر + موجود بجانب الـ Font عند ضغطه واختار Regular x Regular تستطيع إضافة حجم خط مختلف فقط للـ iPad اذا لم يكن واضحاً في الفيديو تستطيع مشاهدته في الصورة التالية

قد تكون لاحظت زر الـ + موجود في عدة خصائص وليس فقط للـ Font!

الإجابة هيا كما توقعتها 

في أي مكان تجد زر الـ + تستطيع إضافة خصائص خاصة بمعنى أخرى زر الـ + زر من الـ Size Classes هذا يعني تسطيع إضافة لون خط مختلف ، تستطيع إخفاء قيود معينه تستطيع إضافة لون خلفية مختلفة وهكذا
 اعتقد بأن الامور الان أصبحت واضحه  بمعرفتك لما ذكرته هنا وأيضا بمعرفتك للـ Auto Layout تستطيع أن تبدع وان تضيف خصائص مختلفة حسب نوع وحجم الشاشة
 فقط تحتاج الى التجربة لاستيعاب الفكرة اكثر !

وبكذا أكون انتهيت من الدورة والحمد لله 

هذه الدورة استغرقت مني أسبوع كامل و قرابة ٦٠٠٠ كلمة و ٤١ صورة ثابته وصورة متحركة

أتمنى أن تكون مفيدة لكم جميعاً 

شكرا لقراتكم ودعمكم

نراكم في موضوع او دورة أخرى إن شاء الله