Size Class: nedir, iOS'ta Compact ve Regular boyut sınıfları
Size Class, tüm cihazları her eksende iki kategoriye ayıran iOS'ta uyarlanabilir düzen için bir mekanizmadır: Compact (dar/kısa) ve Regular (geniş/uzun). Bu değerlerin kombinasyonları, arayüzün iPhone, iPad, Mac Catalyst ve CarPlay'de nasıl görüntüleneceğini belirler. Apple Human Interface Guidelines, 2024'e göre Size Class, Auto Layout ve UITraitCollection kullanarak tüm cihazlar için tek bir storyboard oluşturmayı sağlar. Sistem, iOS 8'den itibaren tüm iOS cihazlarında çalışır.
Önemli Noktalar
- Size Class, her eksende iki değeri olan bir iOS boyut sınıflandırma sistemidir: Compact (sıkıştırılmış) ve Regular (tam boyut).
- Yatay Size Class iPhone'da dikey yönde Compact, iPad'de — Regular'dır. Dikey, SE hariç tüm iPhone'larda Regular'dır.
- UITraitCollection, geçerli Size Class'ı almak ve çalışma zamanında özellik koleksiyonu değişikliklerine yanıt vermek için programlı bir arayüzdür.
- Interface Builder, Vary for Traits aracıyla her Size Class kombinasyonu için kısıtlamaları ve öğe görünürlüğünü yapılandırmayı sağlar.
- Uyarlanabilir düzen ve Size Class, iPhone ve iPad için ayrı storyboard'ların yerini alır — tek bir dosya tüm cihazlara uyum sağlar.
Size Class nedir?
Size Class, iOS 8'de Apple tarafından uyarlanabilir düzeni birleştirmek için tanıtılan soyut bir ekran sınıflandırmasıdır. Belirli bir cihaz modelini kontrol etmek yerine, Size Class iki özellik tanımlar: kullanılabilir yatay ve dikey alan. Her özellik iki değerden birini alır — Compact (sınırlı alan) veya Regular (yeterli alan). Bu değerlerin kombinasyonu, tüm arayüz öğelerine iletilen bir özellik koleksiyonu (trait collection) oluşturur.
Tarihçe ve amaç
Size Class'tan önce geliştiriciler, iPhone ve iPad için ayrı storyboard'lar oluşturur veya kodda UI_USER_INTERFACE_IDIOM() kontrolleri kullanırdı. Bu, kod tekrarına, şişkin storyboard'lara ve yeni ekran boyutlarını desteklemede zorluklara yol açtı. Size Class, evrensel bir sistem sunarak sorunu çözdü: geliştirici, 4 Compact/Regular kombinasyonu için arayüzü yapılandırır ve iOS otomatik olarak uygun olanı seçer. iPad'de Split View ve farklı iPhone boyutlarının ortaya çıkmasıyla sistem, uyarlanabilir düzen için vazgeçilmez hale geldi.
Size Class nasıl çalışır
Size Class, iOS tarafından mevcut ekran genişliği ve yüksekliğine dayanarak yön ve çoklu görev dikkate alınarak hesaplanır. Değerler belirli piksellere bağlı değildir — mantıksal bir kategoridir. Örneğin, iPhone 16 Pro dikey yönde yatay Compact ve dikey Regular'dır. Aynı iPhone yatay yönde — her iki eksende Compact. Split View'de uygulama ekranın 1/3'ünü kaplayan iPad, tam ekran modunda Regular olmasına rağmen yatay Compact alır. Sistem, yön veya Split View değiştiğinde Size Class'ı otomatik olarak günceller.
Hangi boyut sınıfları vardır
Size Class, iki eksende iki değerin dört kombinasyonunu kullanır. Her kombinasyonun cihaz türüne ve yönüne bağlı olarak kendi uygulaması vardır. Bu kombinasyonları anlamak, iOS için uyarlanabilir bir arayüz tasarlamanın temelidir. Sistem, tüm mevcut Apple cihazlarını kapsar: iPhone, iPad, Mac Catalyst ve CarPlay. Apple, wAny hAny (temel düzen) kombinasyonuyla tasarıma başlamayı ve belirli kombinasyonlar için iyileştirmeyi önerir.
Dört Size Class kombinasyonu
wCompact hRegular — dikey iPhone (bazı durumlarda Plus/Max hariç). wCompact hCompact — yatay iPhone SE/6/7/8. wRegular hRegular — herhangi bir yönde tam ekran iPad, yatay iPhone Plus/Max. wRegular hCompact — dar içerikle yatay iPad. Her kombinasyon, hangi kısıtlamaların ve öğelerin aktif olduğunu belirler. Geliştirici, Interface Builder'da her kombinasyon için görünümü ayrı ayrı ayarlayabilir.
Mac Catalyst için Size Class
Mac Catalyst'te Size Class her zaman wRegular hRegular'dır — tam boyutlu arayüz. Bu, bir iPad uygulamasının Mac sürümünün maksimum alanı aldığı anlamına gelir. Geliştirici, Mac'i iPad'den ayırt etmek için UIScreen.traitCollection.userInterfaceIdiom aracılığıyla ek kontroller kullanabilir. Mac'te Size Class kararlı bir şekilde çalışır, ancak Catalyst uygulamaları genellikle Size Class'ın ötesinde fare ve klavye için ek uyarlama gerektirir.
Size Class uyarlanabilir düzeni nasıl etkiler
Size Class, hangi Auto Layout kısıtlamalarının aktif olduğunu, hangi arayüz öğelerinin görünür olduğunu ve alt görünümlerin nasıl düzenlendiğini belirler. Geliştirici, farklı Size Class'lar için farklı kısıtlamalar ayarlayabilir ve özellik koleksiyonu değiştiğinde iOS bunları otomatik olarak değiştirir. Örneğin, iPad'de (wRegular hRegular) ayrıntılı tablo Master-Detail'de görüntülenirken, iPhone'da (wCompact hRegular) — Navigation Stack'te görüntülenir. Bu, Size Class ile uyarlanabilir düzenin ana senaryosudur.
Kısıtlamaları ayarlama ve kaldırma
Interface Builder'da, geliştirici Vary for Traits düğmesi aracılığıyla bir Size Class kombinasyonu seçer ve yalnızca bu kombinasyon için geçerli olması gereken kısıtlamaları ekler. wAny hAny için ayarlanan kısıtlamalar her zaman geçerlidir. Belirli bir kombinasyon için ayarlanan kısıtlamalar, yalnızca Size Class eşleştiğinde etkinleşir. Bir kombinasyon için özel kısıtlama ayarlanmamışsa, temel kısıtlamalar kullanılır. Size Class değiştiğinde, iOS kısıtlama kümeleri arasındaki geçişi canlandırır.
Öğeleri gizleme ve gösterme
Interface Builder'daki Installed bayrağı, belirli Size Class'lar için öğeleri gizlemeyi sağlar. Geliştirici, seçilen kombinasyon için bir öğeyi Uninstalled olarak işaretler. Örneğin, bir Details düğmesi yalnızca iPad'de (wRegular hRegular) görünür ve iPhone'da gizlidir. Bu, kodda isHidden'ı yönetmekten daha basittir. Programlı gizleme için traitCollectionDidChange'i geçersiz kılın veya willTransition yöntemini kullanarak geçerli Size Class'ı kontrol edin.
Interface Builder'da Size Class kullanımı
Interface Builder, Size Class ile çalışmak için görsel Vary for Traits aracını sağlar. Geliştirici istenen kombinasyonu (genişlik ve yükseklik) seçer ve Interface Builder bu kombinasyon için bir ekran önizlemesi gösterir. Bu modda yapılan tüm kısıtlama, boyut, yazı tipi ve görünürlük değişiklikleri yalnızca seçilen Size Class'a uygulanır. Moddan çıkmak ayarları kaydeder. Bu yaklaşım, farklı cihazlar için uyarlama kodu yazma ihtiyacını ortadan kaldırır.
Interface Builder'da adım adım çalışma
Interface Builder'da Size Class'ı yapılandırmak için geliştirici bir storyboard açar, view controller'ı seçer ve alt paneldeki Vary for Traits düğmesine tıklar. Ardından Width (Compact, Regular veya Any) ve Height (Compact, Regular veya Any) seçer. Arayüz, seçilen kombinasyon için düzenleme moduna geçer. Tüm kısıtlama değişiklikleri, öğe ekleme veya kaldırma yalnızca bu kombinasyona uygulanır. Kurulum tamamlandıktan sonra geliştirici moddan çıkar — değişiklikler belirli Size Class kombinasyonu için kaydedilir.
En iyi uygulamalar
Apple, wAny hAny (tüm cihazları kapsayan temel kombinasyon) için temel bir düzenle başlamayı önerir. Ardından sorunlu kombinasyonlar için düzeni iyileştirin: wCompact hRegular (dikey iPhone) ve wRegular hRegular (iPad). Her kombinasyonu yapılandırmak önerilmez — yalnızca düzenin bozulduğu yerleri yapılandırın. Aşırı yapılandırma bakımı zorlaştırır. Hassas yazı tipi boyutlandırması için Size Class yerine Dynamic Type kullanın: yazı tipleri ekran boyutuna otomatik olarak uyum sağlar.
Kodda Size Class: UITraitCollection
UITraitCollection, geçerli Size Class'ı ve diğer ortam özelliklerini (force touch, ekran ölçeği, kullanıcı arayüzü deyimi) içeren bir iOS sınıfıdır. Her UIView ve UIViewController'ın üst öğeden devralınan kendi traitCollection'ı vardır. Geliştirici, UIUserInterfaceSizeClass (.compact, .regular veya .unspecified) döndüren traitCollection.horizontalSizeClass ve traitCollection.verticalSizeClass aracılığıyla Size Class'ı alır. Size Class değişiklikleri, traitCollectionDidChange geçersiz kılınarak izlenir.
Örnek: kodda düzen değiştirme
UICollectionView düzenini Size Class'a uyarlamanın bir örneğini ele alalım. iPad'de (wRegular hRegular) iki sütunlu UICollectionViewCompositionalLayout kullanın, iPhone'da (wCompact hRegular) — tek sütunlu. Kod, yatay Size Class'ı kontrol eder ve uygun düzeni seçer. Döndürme veya Split View geçişinde iOS, traitCollectionDidChange'i çağırır ve denetleyici, düzeni animasyonla değiştirir.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Özellik koleksiyonu değişikliklerine yanıt verme
traitCollectionDidChange yöntemi, herhangi bir Size Class değişikliğinde çağrılır: cihaz döndürme, Split View'a girme/çıkma, harici ekran bağlama. Bu yöntemde geliştirici, düzeni günceller, koleksiyonları yeniden yükler, kısıtlama önceliklerini günceller veya öğe görünürlüğünü değiştirir. Size Class'ın gerçekten değişip değişmediğini (başka bir özellik değil) kontrol etmek önemlidir: traitCollection.horizontalSizeClass'ı previousTraitCollection?.horizontalSizeClass ile karşılaştırın. Optimizasyon, force touch veya ekran ölçeği değiştiğinde gereksiz yeniden çizimleri önler.
Farklı cihazlarda Size Class özellikleri
Farklı Apple cihazlarının farklı Size Class kombinasyonları vardır ve geliştirici bu özellikleri dikkate almalıdır. iPhone dikey — wCompact hRegular, yatay — modele bağlı: iPhone SE/6/7/8 (wCompact hCompact), iPhone X ve sonrası (içeriğe bağlı olarak wCompact hCompact veya wCompact hRegular). iPad tam ekran modunda — wRegular hRegular, Split View'da — wCompact hRegular (1/3 ekran) veya wRegular hRegular (2/3 ekran) olabilir. Mac Catalyst — her zaman wRegular hRegular.
iPhone: tüm boyutlar
iPhone'da Size Class çoğu model için kararlıdır, ancak nüanslar vardır. iPhone Plus (6+, 7+, 8+) ve Max (X, XS, 11 Pro, 13–16 Pro Max) yatayda wRegular hCompact — iPad mini gibi. Bu, büyük iPhone'larda yatayda içeriği iki sütunda yerleştirmeyi sağlar. iPhone SE (1.–3. nesil) yatayda — wCompact hCompact. Dikeydeki tüm iPhone'larda dikey Size Class Regular'dır, yataydaki iPhone SE hariç (burada Compact'tır). Yatay, dikey ve yatay için her zaman Compact'tır (yataydaki Plus/Max hariç).
iPad ve Split View
iPad tam ekran modunda — wRegular hRegular, maksimum düzen esnekliği sağlar. Split View'da davranış değişir: uygulama ekranın 1/3'ünü kaplıyorsa (Slide Over veya 1/3'te Split), yatay Size Class Compact olur, dikey Regular kalır. 2/3 ekranda — wRegular hRegular. Geliştirici, arayüzü tüm Split View modlarında test etmelidir çünkü Size Class dinamik olarak değişir. Apple, iPad'de tutarlı davranış için Size Class'ı UISplitViewController ile birlikte kullanmayı önerir.
Sıkça Sorulan Sorular
Size Class, CSS'teki breakpoint'ten nasıl farklıdır?
Size Class, 4 kombinasyonlu ayrık bir sistemdir, CSS breakpoint'leri ise isteğe bağlı sayıda noktası olan sürekli bir sistemdir. Size Class, belirli ekran boyutlarından soyutlanır, cihazları davranışa göre gruplandırır. CSS breakpoint'leri piksellere bağlıyken, Size Class mantıksal Compact/Regular kategorilerine bağlıdır.
Yatayda iPhone Plus neden yatay Size Class Regular'a sahiptir?
iPhone Plus/Max yatayda, içeriği iki sütunda görüntülemek için yeterli ekran genişliğine sahiptir (iPad mini gibi). Apple, geliştiricinin ek kontroller olmadan çok sütunlu düzen kullanabilmesi için yatay Regular atar. Bu, iPhone için Compact kuralının bir istisnasıdır.
Size Class programlı olarak değiştirilebilir mi?
Size Class, gerçek cihaz özelliklerine dayanarak iOS tarafından belirlenir ve uygulama kodundan değiştirilemez. Geliştirici yalnızca geçerli değere tepki verebilir. Sistem arayüzü, sistem öğeleri için Size Class'ı geçersiz kılabilir, ancak uygulamada bu mümkün değildir.
Size Class, SwiftUI ile nasıl çalışır?
SwiftUI, Size Class'ı doğrudan kullanmaz — bunun yerine geliştirici, geçerli değeri okumak için @Environment(\.horizontalSizeClass) değiştiricisini kullanır. SwiftUI, uyarlanabilir düzen için Size Classes ve Layout protokolüyle AnyLayout gibi daha yüksek seviyeli araçlar sunar.
Harici monitör bağlandığında Size Class güncellenir mi?
Evet, Stage Manager veya Sidecar aracılığıyla harici bir ekran bağlandığında iOS, Size Class'ı günceller. Harici monitör genellikle wRegular hRegular alırken, ana ekran kendi Size Class'ını korur. traitCollectionDidChange, her ekrandaki pencereler için bağımsız olarak çağrılır.
Özet
- Size Class, her eksende iki Compact/Regular değeri olan iOS ekran sınıflandırma sistemidir, toplam 4 kombinasyon.
- Dikey iPhone — wCompact hRegular. Tam ekran modunda iPad — wRegular hRegular. Yatay iPhone Plus/Max — wRegular hCompact.
- Interface Builder, her Size Class için kısıtlamaların ve görünürlüğün görsel yapılandırması için Vary for Traits sağlar.
- UITraitCollection, horizontalSizeClass ve verticalSizeClass aracılığıyla Size Class'ı okumak için programlı API'dir. Değişiklikler traitCollectionDidChange'te izlenir.
- iPad'de Split View, Size Class'ı dinamik olarak değiştirir: 1/3 ekranda yatay Compact olur, düzen uyarlaması gerektirir.
- SwiftUI, Size Class okumak için @Environment(\.horizontalSizeClass) ve çalışma zamanında düzenler arasında geçiş için AnyLayout sağlar.
- Öneri wAny hAny için düzenle başlayın, ardından wCompact hRegular (iPhone) ve wRegular hRegular (iPad) için uyarlayın, kalan kombinasyonları aşırı yüklemeyin.
Anahtar teslim bir mobil uygulama geliştireceğiz
IT Sectr, 2017'den beri girişimler ve işletmeler için iOS ve Android uygulamaları oluşturmaktadır. Size danışmanlık yapacak ve en iyi çözümü önereceğiz.
Ayrıca okuyun