Size Class: چیست، کلاسهای اندازه Compact و Regular در iOS
Size Class — مکانیزمی در iOS برای layout تطبیقی است که همه دستگاهها را در هر محور به دو دسته تقسیم میکند: Compact (باریک/کوتاه) و Regular (عریض/بلند). ترکیب این مقادیر تعیین میکند که رابط کاربری در iPhone، iPad، Mac Catalyst و CarPlay چگونه نمایش داده شود. طبق Apple Human Interface Guidelines, 2024، Size Class امکان ساخت یک storyboard برای همه دستگاهها را با استفاده از Auto Layout و UITraitCollection فراهم میکند. این سیستم از iOS 8 در همه دستگاههای iOS کار میکند.
نکات اصلی
- Size Class — سیستم طبقهبندی اندازه در iOS با دو مقدار در هر محور: Compact (فشرده) و Regular (اندازه کامل).
- Size Class افقی در iPhone در حالت عمودی — Compact، در iPad — Regular. عمودی — در همه iPhoneها به جز SE Regular.
- UITraitCollection — رابط برنامهنویسی برای دریافت Size Class فعلی و واکنش به تغییرات trait collection در زمان اجرا.
- Interface Builder امکان پیکربندی constraints و visibility عناصر را برای هر ترکیب Size Class با ابزار Vary for Traits فراهم میکند.
- layout تطبیقی مبتنی بر Size Class جایگزین storyboardهای جداگانه برای iPhone و iPad میشود — یک فایل با همه دستگاهها سازگار میشود.
Size Class چیست؟
Size Class — طبقهبندی انتزاعی صفحه در iOS است که توسط Apple در iOS 8 برای یکپارچهسازی layout تطبیقی معرفی شد. به جای بررسی مدل خاص دستگاه، Size Class دو ویژگی را تعیین میکند: فضای موجود در افق و عمود. هر ویژگی یکی از دو مقدار را میگیرد — Compact (فضای محدود) یا Regular (فضای کافی). ترکیب این مقادیر trait collection را تشکیل میدهد که به همه عناصر رابط کاربری منتقل میشود.
تاریخچه و هدف
پیش از ظهور Size Class، توسعهدهندگان storyboardهای جداگانه برای iPhone و iPad میساختند یا از بررسیهای UI_USER_INTERFACE_IDIOM() در کد استفاده میکردند. این منجر به تکرار کد، حجیم شدن storyboardها و دشواری در پشتیبانی از اندازههای جدید صفحه میشد. Size Class با ارائه یک سیستم جهانی مشکل را حل کرد: توسعهدهنده رابط کاربری را برای ۴ ترکیب Compact/Regular پیکربندی میکند و iOS به طور خودکار مناسب را انتخاب میکند. با ظهور Split View در iPad و اندازههای مختلف iPhone، این سیستم برای layout تطبیقی ضروری شد.
Size Class چگونه کار میکند
Size Class توسط iOS بر اساس عرض و ارتفاع صفحه فعلی با در نظر گرفتن جهت و چندوظیفگی محاسبه میشود. مقادیر به پیکسلهای خاصی وابسته نیستند — این یک دسته منطقی است. برای مثال، iPhone 16 Pro در حالت عمودی دارای Compact افقی و Regular عمودی است. همان iPhone در حالت افقی — Compact در هر دو محور. iPad در Split View با برنامهای که ۱/۳ صفحه را میگیرد، Compact افقی دریافت میکند، هرچند در حالت تمام صفحه — Regular. سیستم به طور خودکار Size Class را هنگام تغییر جهت یا Split View بهروزرسانی میکند.
چه کلاسهای اندازهای وجود دارد
Size Class از چهار ترکیب دو مقدار در دو محور استفاده میکند. هر ترکیب بسته به نوع دستگاه و جهت آن کاربرد خاص خود را دارد. درک این ترکیبها اساس طراحی رابط کاربری تطبیقی برای iOS است. سیستم همه دستگاههای فعلی Apple را پوشش میدهد: iPhone، iPad، Mac Catalyst و CarPlay. Apple توصیه میکند طراحی را با ترکیب wAny hAny (layout پایه) شروع کرده و برای ترکیبهای خاص دقیقتر کنید.
چهار ترکیب Size Class
wCompact hRegular — iPhone عمودی (به جز Plus/Max در برخی موارد). wCompact hCompact — iPhone SE/6/7/8 افقی. wRegular hRegular — iPad تمام صفحه در هر جهت، iPhone Plus/Max در حالت افقی. wRegular hCompact — iPad در حالت افقی با محتوای باریک. هر ترکیب تعیین میکند کدام constraints و عناصر فعال هستند. توسعهدهنده میتواند ظاهر هر ترکیب را جداگانه در 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 چگونه بر layout تطبیقی تأثیر میگذارد
Size Class تعیین میکند کدام Auto Layout-constraints فعال هستند، کدام عناصر رابط کاربری قابل مشاهده هستند و subviewها چگونه چیده میشوند. توسعهدهنده میتواند constraints مختلفی برای Size Classهای مختلف تنظیم کند و iOS هنگام تغییر trait collection به طور خودکار آنها را سوئیچ میکند. برای مثال، در iPad (wRegular hRegular) جدول با جزئیات در Master-Detail نمایش داده میشود، در iPhone (wCompact hRegular) — در Navigation Stack. این سناریوی اصلی layout تطبیقی با Size Class است.
تنظیم و حذف constraints
در Interface Builder، توسعهدهنده ترکیب Size Class را از طریق دکمه Vary for Traits انتخاب میکند و constraintsهایی را اضافه میکند که فقط برای این ترکیب باید کار کنند. constraints تنظیم شده برای wAny hAny همیشه فعال هستند. constraints تنظیم شده برای یک ترکیب خاص فقط در صورت مطابقت Size Class فعال میشوند. اگر برای ترکیبی constraints خاصی تنظیم نشده باشد، از constraints پایه استفاده میشود. هنگام تغییر Size Class، iOS انتقال بین مجموعههای constraint را متحرک میکند.
مخفی و نمایش عناصر
پرچم Installed در Interface Builder امکان مخفی کردن عناصر برای Size Classهای خاص را فراهم میکند. توسعهدهنده عنصر را برای ترکیب انتخاب شده به عنوان Uninstalled علامتگذاری میکند. برای مثال، دکمه Details فقط در iPad (wRegular hRegular) قابل مشاهده است و در iPhone مخفی میشود. این سادهتر از مدیریت isHidden در کد است. برای مخفی کردن برنامهنویسی، از override traitCollectionDidChange یا متد willTransition استفاده میشود، جایی که Size Class فعلی بررسی میشود.
استفاده از Size Class در Interface Builder
Interface Builder ابزار بصری Vary for Traits را برای کار با Size Class فراهم میکند. توسعهدهنده ترکیب مورد نیاز (عرض و ارتفاع) را انتخاب میکند و Interface Builder پیشنمایش صفحه را برای این ترکیب نشان میدهد. همه تغییرات constraints، اندازهها، فونتها و visibility که در این حالت انجام میشوند فقط برای Size Class انتخاب شده اعمال میشوند. خروج از حالت تنظیمات را تثبیت میکند. این رویکرد نیاز به نوشتن کد سازگاری برای دستگاههای مختلف را از بین میبرد.
کار گام به گام در Interface Builder
برای پیکربندی Size Class در Interface Builder، توسعهدهنده storyboard را باز میکند، view controller را انتخاب کرده و دکمه Vary for Traits را در پنل پایین فشار میدهد. سپس Width (Compact، Regular یا Any) و Height (Compact، Regular یا Any) را انتخاب میکند. رابط کاربری به حالت ویرایش برای ترکیب انتخاب شده تغییر میکند. همه تغییرات constraints، افزودن یا حذف عناصر فقط برای این ترکیب اعمال میشوند. پس از اتمام پیکربندی، توسعهدهنده از حالت خارج میشود — تغییرات برای ترکیب خاص Size Class ذخیره میشوند.
بهترین روشها
Apple شروع با layout پایه برای wAny hAny (ترکیب پایه پوششدهنده همه دستگاهها) را توصیه میکند. سپس layout را برای ترکیبهای مشکلدار دقیق کنید: wCompact hRegular (iPhone عمودی) و wRegular hRegular (iPad). پیکربندی هر ترکیب توصیه نمیشود — فقط جایی که layout خراب میشود. پیکربندی بیش از حد پشتیبانی را دشوار میکند. برای تنظیم دقیق فونتها به جای Size Class از Dynamic Type استفاده کنید: فونتها به طور خودکار با اندازه صفحه سازگار میشوند.
Size Class در کد: UITraitCollection
UITraitCollection — کلاس iOS است که Size Class فعلی و سایر ویژگیهای محیط (force touch, display scale, user interface idiom) را شامل میشود. هر UIView و UIViewController traitCollection خود را دارد که از والد به ارث میبرد. توسعهدهنده Size Class را از طریق traitCollection.horizontalSizeClass و traitCollection.verticalSizeClass دریافت میکند که UIUserInterfaceSizeClass (.compact، .regular یا .unspecified) برمیگردانند. تغییر Size Class از طریق override traitCollectionDidChange ردیابی میشود.
مثال: تغییر layout در کد
مثالی از تطبیق UICollectionView layout با Size Class را در نظر بگیرید. در iPad (wRegular hRegular) از UICollectionViewCompositionalLayout با دو ستون استفاده میکنیم، در iPhone (wCompact hRegular) — با یک ستون. کد Size Class افقی را بررسی کرده و layout مناسب را انتخاب میکند. هنگام چرخش یا انتقال به Split View، iOS traitCollectionDidChange را فراخوانی میکند و controller layout را با انیمیشن تغییر میدهد.
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، اتصال نمایشگر خارجی. در این متد، توسعهدهنده layout را بهروزرسانی میکند، مجموعهها را بارگذاری مجدد میکند، اولویتهای constraint را بهروزرسانی میکند یا visibility عناصر را تغییر میدهد. مهم است بررسی کنید که آیا Size Class تغییر کرده است نه ویژگی دیگر: traitCollection.horizontalSizeClass را با previousTraitCollection?.horizontalSizeClass مقایسه کنید. بهینهسازی از بازترسیمهای غیرضروری هنگام تغییر force touch یا display scale جلوگیری میکند.
ویژگیهای 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 (۱/۳ صفحه) یا wRegular hRegular (۲/۳ صفحه) باشد. 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. این امکان قرار دادن محتوا در دو ستون در iPhoneهای بزرگ در حالت افقی را فراهم میکند. iPhone SE (نسل ۱–۳) در حالت افقی — wCompact hCompact. Size Class عمودی در همه iPhoneها در حالت عمودی — Regular، به جز iPhone SE در حالت افقی که Compact است. افقی — همیشه Compact برای عمودی و افقی (به جز Plus/Max در حالت افقی).
iPad و Split View
iPad در حالت تمام صفحه — wRegular hRegular که حداکثر انعطافپذیری layout را میدهد. در Split View رفتار تغییر میکند: اگر برنامه ۱/۳ صفحه را اشغال کند (Slide Over یا Split در ۱/۳)، Size Class افقی Compact میشود، اگرچه عمودی Regular باقی میماند. در ۲/۳ صفحه — wRegular hRegular. توسعهدهنده باید رابط کاربری را در همه حالتهای Split View آزمایش کند، زیرا Size Class به طور پویا تغییر میکند. Apple استفاده از Size Class را همراه با UISplitViewController برای رفتار سازگار در iPad توصیه میکند.
سؤالات متداول
تفاوت Size Class با breakpoint در CSS چیست؟
Size Class — یک سیستم گسسته با ۴ ترکیب است، در حالی که CSS-breakpointها پیوسته با تعداد دلخواه نقطه هستند. Size Class از اندازههای خاص صفحه انتزاع میکند و دستگاهها را بر اساس رفتار گروهبندی میکند. CSS-breakpointها به پیکسلها وابسته هستند، Size Class — به دستههای منطقی Compact/Regular.
چرا در iPhone Plus در حالت افقی Size Class افقی Regular است؟
iPhone Plus/Max در حالت افقی عرض صفحه کافی برای نمایش محتوا در دو ستون دارد (مانند iPad mini). Apple مقدار افقی Regular را اختصاص میدهد تا توسعهدهنده بتواند از multi-column layout بدون بررسیهای اضافی استفاده کند. این یک استثنا از قانون Compact برای iPhone است.
آیا میتوان Size Class را برنامهنویسی تغییر داد؟
Size Class توسط iOS بر اساس ویژگیهای واقعی دستگاه تعیین میشود و نمیتواند از کد برنامه تغییر کند. توسعهدهنده فقط میتواند به مقدار فعلی واکنش نشان دهد. System UI میتواند Size Class را برای عناصر سیستمی بازنویسی کند، اما در برنامه این امکانپذیر نیست.
Size Class چگونه با SwiftUI کار میکند؟
SwiftUI مستقیماً از Size Class استفاده نمیکند — در عوض توسعهدهنده از اصلاحکنندههای @Environment(\.horizontalSizeClass) برای خواندن مقدار فعلی استفاده میکند. SwiftUI ابزارهای سطح بالاتری ارائه میدهد: Size Classes و AnyLayout با Layout protocol برای layout تطبیقی.
آیا Size Class هنگام اتصال مانیتور خارجی بهروزرسانی میشود؟
بله، هنگام اتصال نمایشگر خارجی از طریق Stage Manager یا Sidecar، iOS Size Class را بهروزرسانی میکند. مانیتور خارجی معمولاً wRegular hRegular دریافت میکند و صفحه اصلی Size Class خود را حفظ میکند. traitCollectionDidChange برای پنجرهها در هر صفحه به طور مستقل فراخوانی میشود.
خلاصه
- Size Class — سیستم طبقهبندی صفحه iOS با دو مقدار Compact/Regular در هر محور، مجموعاً ۴ ترکیب.
- iPhone در حالت عمودی — wCompact hRegular. iPad در حالت تمام صفحه — wRegular hRegular. iPhone Plus/Max در حالت افقی — wRegular hCompact.
- Interface Builder Vary for Traits را برای پیکربندی بصری constraints و visibility برای هر Size Class فراهم میکند.
- UITraitCollection — API برنامهنویسی برای خواندن Size Class از طریق horizontalSizeClass و verticalSizeClass. تغییرات در traitCollectionDidChange ردیابی میشوند.
- Split View در iPad به طور پویا Size Class را تغییر میدهد: در ۱/۳ صفحه، افقی Compact میشود که نیاز به سازگاری layout دارد.
- SwiftUI @Environment(\.horizontalSizeClass) را برای خواندن Size Class و AnyLayout را برای تغییر بین layoutها در زمان اجرا فراهم میکند.
- توصیه میشود با layout برای wAny hAny شروع کنید، سپس برای wCompact hRegular (iPhone) و wRegular hRegular (iPad) سازگار کنید، بدون بارگذاری بیش از حد ترکیبهای دیگر.
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید