الموضوع: شرح الـ Size Classes
عرض مشاركة واحدة
  #1  
قديم 05-28-2021, 03:33 AM
الصورة الرمزية الادارة كريم
الادارة كريم 
مشرف سابق
 
تاريخ التسجيل: May 2021
الدولة: مصر
المشاركات: 397
معدل تقييم المستوى: 22
الادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to beholdالادارة كريم is a splendid one to behold


افتراضي الـ 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 تستطيع أن تبدع وان تضيف خصائص مختلفة حسب نوع وحجم الشاشة
فقط تحتاج الى التجربة لاستيعاب الفكرة اكثر !


الموضوع الأصلي : الـ Size Classes || الكاتب : الادارة كريم || المصدر : منتدى مجمع التطوير

 

رد مع اقتباس