Size Class: ما هو، فئات الحجم Compact و Regular في iOS
Size Class هي آلية في iOS للتخطيط التكيفي تقسم جميع الأجهزة إلى فئتين لكل محور: Compact (ضيق/قصير) و Regular (واسع/طويل). تحدد مجموعات هذه القيم كيفية عرض الواجهة على iPhone و iPad و Mac Catalyst و CarPlay. وفقًا لـ Apple Human Interface Guidelines، 2024، يتيح Size Class بناء storyboard واحد لجميع الأجهزة باستخدام Auto Layout و UITraitCollection. يعمل النظام على جميع أجهزة iOS بدءًا من iOS 8.
النقاط الرئيسية
- Size Class هو نظام تصنيف حجم في iOS بقيمتين لكل محور: Compact (مضغوط) و Regular (كامل الحجم).
- Size Class الأفقي على iPhone في الوضع العمودي هو Compact، وعلى iPad — Regular. العمودي هو Regular على جميع أجهزة iPhone باستثناء SE.
- UITraitCollection هي واجهة برمجية للحصول على Size Class الحالي والاستجابة لتغييرات مجموعة السمات في وقت التشغيل.
- Interface Builder يتيح تكوين القيود ورؤية العناصر لكل مجموعة Size Class باستخدام أداة Vary for Traits.
- التخطيط التكيفي باستخدام Size Class يستبدل storyboards منفصلة لـ iPhone و iPad — ملف واحد يتكيف مع جميع الأجهزة.
ما هو Size Class؟
Size Class هو تصنيف تجريدي للشاشة في iOS، قدمته Apple في iOS 8 لتوحيد التخطيط التكيفي. بدلاً من التحقق من طراز جهاز محدد، يحدد Size Class خاصيتين: المساحة الأفقية والعمودية المتاحة. تأخذ كل خاصية واحدة من قيمتين — Compact (مساحة محدودة) أو Regular (مساحة كافية). تشكل مجموعة هذه القيم trait collection، والتي تُمرر لجميع عناصر الواجهة.
التاريخ والغرض
قبل Size Class، كان المطورون ينشئون storyboards منفصلة لـ iPhone و iPad أو يستخدمون فحوصات UI_USER_INTERFACE_IDIOM() في الكود. أدى هذا إلى تكرار الكود، وتضخم storyboards، وصعوبات في دعم أحجام الشاشات الجديدة. حل Size Class المشكلة بتقديم نظام عالمي: يقوم المطور بتكوين الواجهة لـ 4 مجموعات Compact/Regular، ويختار iOS تلقائيًا المجموعة المناسبة. مع ظهور Split View على iPad وأحجام iPhone المختلفة، أصبح النظام لا غنى عنه للتخطيط التكيفي.
كيف يعمل Size Class
Size Class يتم حسابه بواسطة iOS بناءً على عرض وارتفاع الشاشة الحاليين، مع مراعاة الاتجاه وتعدد المهام. القيم ليست مرتبطة ببكسلات محددة — إنها فئة منطقية. على سبيل المثال، iPhone 16 Pro في الوضع العمودي له Compact أفقي و Regular عمودي. نفس iPhone في الوضع الأفقي — Compact على كلا المحورين. iPad في Split View مع تطبيق على 1/3 الشاشة يحصل على Compact أفقي، على الرغم من أنه في وضع ملء الشاشة هو Regular. يقوم النظام تلقائيًا بتحديث Size Class عند تغيير الاتجاه أو Split View.
ما هي فئات الحجم الموجودة
Size Class يستخدم أربع مجموعات من قيمتين على محورين. لكل مجموعة تطبيقها الخاص حسب نوع الجهاز واتجاهه. فهم هذه المجموعات هو أساس تصميم واجهة تكيفية لـ iOS. يغطي النظام جميع أجهزة Apple الحالية: iPhone و iPad و Mac Catalyst و CarPlay. توصي Apple ببدء التصميم بمجموعة wAny hAny (التخطيط الأساسي) والتحسين لمجموعات محددة.
أربع مجموعات من Size Class
wCompact hRegular — iPhone في الوضع العمودي (باستثناء Plus/Max في بعض الحالات). wCompact hCompact — iPhone SE/6/7/8 في الوضع الأفقي. wRegular hRegular — iPad في ملء الشاشة بأي اتجاه، iPhone Plus/Max في الوضع الأفقي. wRegular hCompact — iPad في الوضع الأفقي بمحتوى ضيق. تحدد كل مجموعة أي القيود والعناصر نشطة. يمكن للمطور تعيين المظهر لكل مجموعة بشكل منفصل في Interface Builder.
Size Class لـ Mac Catalyst
على Mac Catalyst، Size Class دائمًا wRegular hRegular — واجهة كاملة الحجم. هذا يعني أن إصدار Mac من تطبيق iPad يحصل على أقصى مساحة. يمكن للمطور استخدام فحوصات إضافية عبر UIScreen.traitCollection.userInterfaceIdiom لتمييز Mac عن iPad. يعمل Size Class على Mac بشكل مستقر، لكن تطبيقات Catalyst غالبًا ما تتطلب تكيفًا إضافيًا للماوس ولوحة المفاتيح يتجاوز Size Class.
كيف يؤثر Size Class على التخطيط التكيفي
Size Class يحدد أي قيود Auto Layout نشطة، وأي عناصر الواجهة مرئية، وكيف يتم ترتيب subviews. يمكن للمطور تعيين قيود مختلفة لـ Size Classes مختلفة، ويقوم iOS بتبديلها تلقائيًا عند تغيير trait collection. على سبيل المثال، على iPad (wRegular hRegular) يتم عرض جدول مع التفاصيل في Master-Detail، على iPhone (wCompact hRegular) — في Navigation Stack. هذا هو السيناريو الرئيسي للتخطيط التكيفي مع Size Class.
تعيين وإزالة القيود
في Interface Builder، يختار المطور مجموعة Size Class عبر زر Vary for Traits ويضيف قيودًا يجب أن تنطبق فقط على هذه المجموعة. القيود المعينة لـ wAny hAny تنطبق دائمًا. القيود المعينة لمجموعة محددة تنشط فقط عندما يتطابق Size Class. إذا لم تكن هناك قيود خاصة لمجموعة، يتم استخدام القيود الأساسية. عند تغيير Size Class، يقوم iOS بتحريك الانتقال بين مجموعات القيود.
إخفاء وإظهار العناصر
علامة Installed في Interface Builder تتيح إخفاء العناصر لـ Size Classes محددة. يحدد المطور عنصرًا كـ Uninstalled للمجموعة المحددة. على سبيل المثال، زر Details مرئي فقط على iPad (wRegular hRegular)، ومخفي على iPhone. هذا أبسط من إدارة isHidden في الكود. للإخفاء البرمجي، يتم تجاوز traitCollectionDidChange أو استخدام طريقة willTransition، مع التحقق من Size Class الحالي.
استخدام Size Class في Interface Builder
Interface Builder يوفر الأداة المرئية Vary for Traits للعمل مع Size Class. يختار المطور المجموعة المطلوبة (العرض والارتفاع)، ويعرض Interface Builder معاينة للشاشة لتلك المجموعة. جميع تغييرات القيود والأحجام والخطوط والرؤية التي تتم في هذا الوضع تنطبق فقط على Size Class المحدد. الخروج من الوضع يحفظ الإعدادات. هذا النهج يستبدل الحاجة إلى كتابة كود التكيف لأجهزة مختلفة.
العمل خطوة بخطوة في Interface Builder
لـ تكوين Size Class في Interface Builder، يفتح المطور storyboard، ويختار view controller، وينقر على زر Vary for Traits في اللوحة السفلية. ثم يختار Width (Compact أو Regular أو Any) و Height (Compact أو Regular أو Any). تتحول الواجهة إلى وضع التحرير للمجموعة المحددة. جميع تغييرات القيود وإضافة أو إزالة العناصر تنطبق فقط على هذه المجموعة. بعد الانتهاء من الإعداد، يخرج المطور من الوضع — يتم حفظ التغييرات للمجموعة المحددة من Size Class.
أفضل الممارسات
توصي Apple بالبدء بتخطيط أساسي لـ wAny hAny (المجموعة الأساسية التي تغطي جميع الأجهزة). ثم تحسين التخطيط للمجموعات التي تسبب مشاكل: wCompact hRegular (iPhone في الوضع العمودي) و wRegular hRegular (iPad). لا يُنصح بتكوين كل مجموعة — فقط تلك التي ينهار فيها التخطيط. التكوين المفرط يعقد الصيانة. لضبط الخطوط بدقة، استخدم Dynamic Type بدلاً من Size Class: تتكيف الخطوط تلقائيًا مع حجم الشاشة.
Size Class في الكود: UITraitCollection
UITraitCollection هي فئة iOS تحتوي على Size Class الحالي وخصائص البيئة الأخرى (force touch، مقياس العرض، idiom واجهة المستخدم). كل UIView و UIViewController له traitCollection خاص به، موروث من الأصل. يحصل المطور على Size Class عبر traitCollection.horizontalSizeClass و traitCollection.verticalSizeClass، واللتان تعيدان UIUserInterfaceSizeClass (.compact أو .regular أو .unspecified). يتم تتبع تغييرات Size Class بتجاوز traitCollectionDidChange.
مثال: تبديل التخطيط في الكود
تأمل مثالاً لتكييف تخطيط UICollectionView مع Size Class. على iPad (wRegular hRegular) استخدم UICollectionViewCompositionalLayout بعمودين، على iPhone (wCompact hRegular) — بعمود واحد. يتحقق الكود من Size Class الأفقي ويختار التخطيط المناسب. عند التدوير أو الانتقال إلى Split View، يستدعي iOS traitCollectionDidChange، ويقوم وحدة التحكم بتبديل التخطيط مع الحركة.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}الاستجابة لتغييرات trait collection
طريقة traitCollectionDidChange تُستدعى عند أي تغيير في Size Class: تدوير الجهاز، الدخول/الخروج من Split View، توصيل شاشة خارجية. في هذه الطريقة، يقوم المطور بتحديث التخطيط، وإعادة تحميل المجموعات، وتحديث أولويات القيود، أو تغيير رؤية العناصر. من المهم التحقق مما إذا كان Size Class قد تغير بالفعل، وليس خاصية أخرى: قارن traitCollection.horizontalSizeClass مع previousTraitCollection?.horizontalSizeClass. يمنع التحسين عمليات إعادة الرسم غير الضرورية عند تغيير force touch أو مقياس العرض.
خصائص Size Class على الأجهزة المختلفة
أجهزة Apple المختلفة لها مجموعات Size Class مختلفة، ويجب على المطور مراعاة هذه الخصائص. iPhone في الوضع العمودي — wCompact hRegular، في الوضع الأفقي — يعتمد على الطراز: iPhone SE/6/7/8 (wCompact hCompact)، iPhone X والأحدث (wCompact hCompact أو wCompact hRegular حسب المحتوى). iPad في وضع ملء الشاشة — wRegular hRegular، في Split View — يمكن أن يكون wCompact hRegular (1/3 شاشة) أو wRegular hRegular (2/3 شاشة). Mac Catalyst — دائمًا wRegular hRegular.
iPhone: جميع الأحجام
على iPhone، Size Class مستقر لمعظم الطرازات، لكن هناك فروق دقيقة. iPhone Plus (6+ و 7+ و 8+) و Max (X و XS و 11 Pro و 13–16 Pro Max) في الوضع الأفقي لديهم wRegular hCompact — مثل iPad mini. هذا يتيح وضع المحتوى في عمودين على iPhones الكبيرة في الوضع الأفقي. iPhone SE (الجيل 1–3) في الوضع الأفقي — wCompact hCompact. Size Class العمودي على جميع iPhones في الوضع العمودي هو Regular، باستثناء iPhone SE في الوضع الأفقي حيث هو Compact. الأفقي دائمًا Compact للوضع العمودي والأفقي (باستثناء Plus/Max في الوضع الأفقي).
iPad و Split View
iPad في وضع ملء الشاشة — wRegular hRegular، مما يوفر أقصى مرونة للتخطيط. في Split View، يتغير السلوك: إذا كان التطبيق يشغل 1/3 الشاشة (Slide Over أو Split عند 1/3)، يصبح Size Class الأفقي Compact، على الرغم من أن العمودي يظل Regular. عند 2/3 الشاشة — wRegular hRegular. يجب على المطور اختبار الواجهة في جميع أوضاع Split View، حيث يتغير Size Class ديناميكيًا. توصي Apple باستخدام Size Class مع UISplitViewController لسلوك متناسق على iPad.
الأسئلة الشائعة
كيف يختلف Size Class عن نقطة التوقف (breakpoint) في CSS؟
Size Class هو نظام متقطع بـ 4 مجموعات، بينما نقاط التوقف في CSS هي نظام مستمر بعدد تعسفي من النقاط. Size Class يتجرد من أحجام الشاشات المحددة، مجمعًا الأجهزة حسب السلوك. نقاط توقف CSS مرتبطة بالبكسلات، Size Class — بالفئات المنطقية Compact/Regular.
لماذا iPhone Plus في الوضع الأفقي لديه Size Class Regular أفقي؟
iPhone Plus/Max في الوضع الأفقي لديه عرض شاشة كافٍ لعرض المحتوى في عمودين (مثل iPad mini). Apple تعين Regular أفقيًا ليتمكن المطور من استخدام تخطيط متعدد الأعمدة دون فحوصات إضافية. هذا استثناء من قاعدة Compact لـ iPhone.
هل يمكن تغيير Size Class برمجيًا؟
Size Class يتم تحديده بواسطة iOS بناءً على خصائص الجهاز الفعلية ولا يمكن تغييره من كود التطبيق. يمكن للمطور فقط التفاعل مع القيمة الحالية. يمكن لواجهة النظام تجاوز Size Class للعناصر النظامية، لكن هذا مستحيل في التطبيق.
كيف يعمل Size Class مع SwiftUI؟
SwiftUI لا يستخدم Size Class مباشرة — بدلاً من ذلك، يستخدم المطور المُعدِل @Environment(\.horizontalSizeClass) لقراءة القيمة الحالية. يقدم SwiftUI أدوات عالية المستوى: Size Classes و AnyLayout مع بروتوكول Layout للتخطيط التكيفي.
هل يتم تحديث Size Class عند توصيل شاشة خارجية؟
نعم، عند توصيل شاشة خارجية عبر Stage Manager أو Sidecar، يقوم iOS بتحديث Size Class. الشاشة الخارجية تحصل عادةً على wRegular hRegular، بينما تحتفظ الشاشة الرئيسية بـ Size Class الخاص بها. يتم استدعاء traitCollectionDidChange للنوافذ على كل شاشة بشكل مستقل.
الملخص
- Size Class هو نظام تصنيف شاشة iOS بقيمتين Compact/Regular لكل محور، بإجمالي 4 مجموعات.
- iPhone في الوضع العمودي — wCompact hRegular. iPad في وضع ملء الشاشة — wRegular hRegular. iPhone Plus/Max في الوضع الأفقي — wRegular hCompact.
- Interface Builder يوفر Vary for Traits للتكوين المرئي للقيود والرؤية لكل Size Class.
- UITraitCollection هي API برمجية لقراءة Size Class عبر horizontalSizeClass و verticalSizeClass. يتم تتبع التغييرات في traitCollectionDidChange.
- Split View على iPad يغير Size Class ديناميكيًا: عند 1/3 شاشة يصبح الأفقي Compact، مما يتطلب تكييف التخطيط.
- SwiftUI يوفر @Environment(\.horizontalSizeClass) لقراءة Size Class و AnyLayout للتبديل بين التخطيطات في وقت التشغيل.
- يوصى بالبدء بتخطيط لـ wAny hAny، ثم التكييف لـ wCompact hRegular (iPhone) و wRegular hRegular (iPad)، دون تحميل المجموعات المتبقية.
سنقوم بتطوير تطبيق جوال جاهز
تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.
اقرأ أيضًا