Size Class: apa itu, kelas ukuran Compact dan Regular di iOS
Size Class — adalah mekanisme iOS untuk tata letak adaptif yang membagi semua perangkat menjadi dua kategori di setiap sumbu: Compact (sempit/pendek) dan Regular (lebar/panjang). Kombinasi nilai-nilai ini menentukan bagaimana antarmuka ditampilkan di iPhone, iPad, Mac Catalyst, dan CarPlay. Menurut Apple Human Interface Guidelines, 2024, Size Class memungkinkan pembuatan satu storyboard untuk semua perangkat menggunakan Auto Layout dan UITraitCollection. Sistem berfungsi di semua perangkat iOS mulai dari iOS 8.
Poin utama
- Size Class — sistem klasifikasi ukuran di iOS dengan dua nilai per sumbu: Compact (terkompresi) dan Regular (ukuran penuh).
- Size Class horizontal di iPhone dalam orientasi potret — Compact, di iPad — Regular. Vertikal — Regular di semua iPhone kecuali SE.
- UITraitCollection — antarmuka pemrograman untuk mendapatkan Size Class saat ini dan bereaksi terhadap perubahan trait collection saat runtime.
- Interface Builder memungkinkan konfigurasi constraint dan visibilitas elemen untuk setiap kombinasi Size Class dengan alat Vary for Traits.
- Tata letak adaptif berbasis Size Class menggantikan storyboard terpisah untuk iPhone dan iPad — satu file beradaptasi dengan semua perangkat.
Apa itu Size Class?
Size Class — adalah klasifikasi abstrak layar di iOS, diperkenalkan oleh Apple di iOS 8 untuk menyatukan tata letak adaptif. Alih-alih memeriksa model perangkat tertentu, Size Class menentukan dua karakteristik: ruang yang tersedia secara horizontal dan vertikal. Setiap karakteristik mengambil salah satu dari dua nilai — Compact (ruang terbatas) atau Regular (ruang cukup). Kombinasi nilai-nilai ini membentuk trait collection, yang diteruskan ke semua elemen antarmuka.
Sejarah dan tujuan
Sebelum kemunculan Size Class, pengembang membuat storyboard terpisah untuk iPhone dan iPad atau menggunakan pemeriksaan UI_USER_INTERFACE_IDIOM() dalam kode. Hal ini menyebabkan duplikasi kode, storyboard yang membengkak, dan kesulitan dalam mendukung ukuran layar baru. Size Class memecahkan masalah dengan menawarkan sistem universal: pengembang mengonfigurasi antarmuka untuk 4 kombinasi Compact/Regular, dan iOS secara otomatis memilih yang sesuai. Dengan munculnya Split View di iPad dan berbagai ukuran iPhone, sistem menjadi sangat diperlukan untuk tata letak adaptif.
Bagaimana Size Class bekerja
Size Class dihitung oleh iOS berdasarkan lebar dan tinggi layar saat ini, dengan mempertimbangkan orientasi dan multitasking. Nilai tidak terikat pada piksel tertentu — ini adalah kategori logis. Misalnya, iPhone 16 Pro dalam potret memiliki horizontal Compact dan vertikal Regular. iPhone yang sama dalam lanskap — Compact di kedua sumbu. iPad di Split View dengan aplikasi pada 1/3 layar mendapatkan horizontal Compact, meskipun dalam mode layar penuh — Regular. Sistem secara otomatis memperbarui Size Class saat perubahan orientasi atau Split View.
Apa saja kelas ukuran yang ada
Size Class menggunakan empat kombinasi dari dua nilai pada dua sumbu. Setiap kombinasi memiliki penerapannya tergantung pada jenis perangkat dan orientasinya. Memahami kombinasi ini adalah dasar perancangan antarmuka adaptif untuk iOS. Sistem mencakup semua perangkat Apple saat ini: iPhone, iPad, Mac Catalyst, dan CarPlay. Apple merekomendasikan memulai perancangan dengan kombinasi wAny hAny (tata letak dasar) dan menyempurnakan untuk kombinasi tertentu.
Empat kombinasi Size Class
wCompact hRegular — iPhone potret (kecuali Plus/Max dalam beberapa kasus). wCompact hCompact — iPhone SE/6/7/8 lanskap. wRegular hRegular — iPad layar penuh dalam orientasi apa pun, iPhone Plus/Max dalam lanskap. wRegular hCompact — iPad dalam lanskap dengan konten sempit. Setiap kombinasi menentukan constraint dan elemen mana yang aktif. Pengembang dapat mengatur tampilan untuk setiap kombinasi secara terpisah di Interface Builder.
Size Class untuk Mac Catalyst
Di Mac Catalyst, Size Class selalu wRegular hRegular — antarmuka ukuran penuh. Ini berarti versi Mac dari aplikasi iPad mendapatkan ruang maksimal. Pengembang dapat menggunakan pemeriksaan tambahan melalui UIScreen.traitCollection.userInterfaceIdiom untuk membedakan Mac dari iPad. Size Class di Mac bekerja stabil, tetapi aplikasi Catalyst sering memerlukan adaptasi tambahan untuk mouse dan keyboard di luar cakupan Size Class.
Bagaimana Size Class memengaruhi tata letak adaptif
Size Class menentukan constraint Auto Layout mana yang aktif, elemen antarmuka mana yang terlihat, dan bagaimana subview diatur. Pengembang dapat mengatur constraint berbeda untuk Size Class berbeda, dan iOS secara otomatis menggantinya saat perubahan trait collection. Misalnya, di iPad (wRegular hRegular) tabel dengan detail ditampilkan dalam Master-Detail, di iPhone (wCompact hRegular) — dalam Navigation Stack. Ini adalah skenario utama tata letak adaptif dengan Size Class.
Mengatur dan menghapus constraint
Di Interface Builder, pengembang memilih kombinasi Size Class melalui tombol Vary for Traits dan menambahkan constraint yang hanya boleh berfungsi untuk kombinasi ini. Constraint yang diatur untuk wAny hAny selalu berfungsi. Constraint yang diatur untuk kombinasi tertentu hanya aktif saat Size Class cocok. Jika untuk suatu kombinasi tidak ada constraint khusus yang diatur, constraint dasar digunakan. Saat Size Class berubah, iOS menganimasikan transisi antara set constraint.
Menyembunyikan dan menampilkan elemen
Bendera Installed di Interface Builder memungkinkan menyembunyikan elemen untuk Size Class tertentu. Pengembang menandai elemen sebagai Uninstalled untuk kombinasi yang dipilih. Misalnya, tombol Details hanya terlihat di iPad (wRegular hRegular), dan di iPhone — tersembunyi. Ini lebih sederhana daripada mengelola isHidden dalam kode. Untuk penyembunyian terprogram, digunakan override traitCollectionDidChange atau metode willTransition, di mana Size Class saat ini diperiksa.
Menggunakan Size Class di Interface Builder
Interface Builder menyediakan alat visual Vary for Traits untuk bekerja dengan Size Class. Pengembang memilih kombinasi yang diperlukan (lebar dan tinggi), dan Interface Builder menampilkan pratinjau layar untuk kombinasi ini. Semua perubahan constraint, ukuran, font, dan visibilitas yang dilakukan dalam mode ini hanya diterapkan pada Size Class yang dipilih. Keluar dari mode mengonfirmasi pengaturan. Pendekatan ini menggantikan kebutuhan untuk menulis kode adaptasi untuk berbagai perangkat.
Bekerja langkah demi langkah di Interface Builder
Untuk konfigurasi Size Class di Interface Builder, pengembang membuka storyboard, memilih view controller, dan menekan tombol Vary for Traits di panel bawah. Kemudian memilih Width (Compact, Regular, atau Any) dan Height (Compact, Regular, atau Any). Antarmuka beralih ke mode edit untuk kombinasi yang dipilih. Semua perubahan constraint, penambahan atau penghapusan elemen hanya diterapkan pada kombinasi ini. Setelah menyelesaikan konfigurasi, pengembang keluar dari mode — perubahan disimpan untuk kombinasi Size Class tertentu.
Praktik terbaik
Apple merekomendasikan memulai dengan tata letak dasar untuk wAny hAny (kombinasi dasar yang mencakup semua perangkat). Kemudian menyempurnakan tata letak untuk kombinasi bermasalah: wCompact hRegular (iPhone potret) dan wRegular hRegular (iPad). Tidak disarankan untuk mengonfigurasi setiap kombinasi — hanya di mana tata letak rusak. Konfigurasi berlebihan mempersulit pemeliharaan. Untuk penyesuaian font yang presisi, gunakan Dynamic Type alih-alih Size Class: font secara otomatis menyesuaikan dengan ukuran layar.
Size Class dalam kode: UITraitCollection
UITraitCollection — adalah kelas iOS yang berisi Size Class saat ini dan karakteristik lingkungan lainnya (force touch, display scale, user interface idiom). Setiap UIView dan UIViewController memiliki traitCollection sendiri, yang diwarisi dari induk. Pengembang mendapatkan Size Class melalui traitCollection.horizontalSizeClass dan traitCollection.verticalSizeClass, yang mengembalikan UIUserInterfaceSizeClass (.compact, .regular, atau .unspecified). Perubahan Size Class dilacak melalui override traitCollectionDidChange.
Contoh: mengganti tata letak dalam kode
Pertimbangkan contoh adaptasi tata letak UICollectionView ke Size Class. Di iPad (wRegular hRegular) kita menggunakan UICollectionViewCompositionalLayout dengan dua kolom, di iPhone (wCompact hRegular) — dengan satu. Kode memeriksa Size Class horizontal dan memilih tata letak yang sesuai. Saat rotasi atau transisi ke Split View, iOS memanggil traitCollectionDidChange, dan controller mengganti tata letak dengan animasi.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Bereaksi terhadap perubahan trait collection
Metode traitCollectionDidChange dipanggil pada setiap perubahan Size Class: rotasi perangkat, masuk/keluar dari Split View, menghubungkan layar eksternal. Dalam metode ini, pengembang memperbarui tata letak, memuat ulang koleksi, memperbarui prioritas constraint, atau mengubah visibilitas elemen. Penting untuk memeriksa apakah Size Class yang berubah, bukan karakteristik lain: bandingkan traitCollection.horizontalSizeClass dengan previousTraitCollection?.horizontalSizeClass. Optimasi mencegah penggambaran ulang yang tidak perlu saat perubahan force touch atau display scale.
Karakteristik Size Class di berbagai perangkat
Berbagai perangkat Apple memiliki kombinasi Size Class yang berbeda dan pengembang harus mempertimbangkan karakteristik ini. iPhone dalam potret — wCompact hRegular, dalam lanskap — tergantung model: iPhone SE/6/7/8 (wCompact hCompact), iPhone X dan yang lebih baru (wCompact hCompact atau wCompact hRegular tergantung konten). iPad dalam mode layar penuh — wRegular hRegular, di Split View — bisa wCompact hRegular (1/3 layar) atau wRegular hRegular (2/3 layar). Mac Catalyst — selalu wRegular hRegular.
iPhone: semua ukuran
Di iPhone, Size Class stabil untuk sebagian besar model, tetapi ada nuansa. iPhone Plus (6+, 7+, 8+) dan Max (X, XS, 11 Pro, 13–16 Pro Max) dalam lanskap memiliki wRegular hCompact — seperti iPad mini. Ini memungkinkan penempatan konten dalam dua kolom di iPhone besar dalam lanskap. iPhone SE (generasi 1–3) dalam lanskap — wCompact hCompact. Size Class vertikal di semua iPhone dalam potret — Regular, kecuali iPhone SE dalam lanskap, di mana ia Compact. Horizontal — selalu Compact untuk potret dan lanskap (kecuali Plus/Max dalam lanskap).
iPad dan Split View
iPad dalam mode layar penuh — wRegular hRegular, memberikan fleksibilitas tata letak maksimal. Di Split View, perilaku berubah: jika aplikasi menempati 1/3 layar (Slide Over atau Split di 1/3), Size Class horizontal menjadi Compact, meskipun vertikal tetap Regular. Di 2/3 layar — wRegular hRegular. Pengembang harus menguji antarmuka di semua mode Split View, karena Size Class berubah secara dinamis. Apple merekomendasikan penggunaan Size Class bersama dengan UISplitViewController untuk perilaku konsisten di iPad.
Pertanyaan yang sering diajukan
Apa perbedaan Size Class dengan breakpoint di CSS?
Size Class — sistem diskrit dengan 4 kombinasi, sedangkan CSS-breakpoint bersifat kontinu dengan jumlah titik sembarang. Size Class mengabstraksi dari ukuran layar spesifik, mengelompokkan perangkat berdasarkan perilaku. CSS-breakpoint terikat pada piksel, Size Class — pada kategori logis Compact/Regular.
Mengapa di iPhone Plus dalam lanskap Size Class horizontal Regular?
iPhone Plus/Max dalam lanskap memiliki lebar layar yang cukup untuk menampilkan konten dalam dua kolom (seperti di iPad mini). Apple menetapkan horizontal Regular agar pengembang dapat menggunakan multi-column layout tanpa pemeriksaan tambahan. Ini adalah pengecualian dari aturan Compact untuk iPhone.
Bisakah Size Class diubah secara terprogram?
Size Class ditentukan oleh iOS berdasarkan karakteristik nyata perangkat dan tidak dapat diubah dari kode aplikasi. Pengembang hanya dapat bereaksi terhadap nilai saat ini. System UI dapat menimpa Size Class untuk elemen sistem, tetapi dalam aplikasi hal ini tidak mungkin.
Bagaimana Size Class bekerja dengan SwiftUI?
SwiftUI tidak menggunakan Size Class secara langsung — sebaliknya, pengembang menerapkan pengubah @Environment(\.horizontalSizeClass) untuk membaca nilai saat ini. SwiftUI menawarkan alat tingkat lebih tinggi: Size Classes dan AnyLayout dengan Layout protocol untuk tata letak adaptif.
Apakah Size Class diperbarui saat monitor eksternal dihubungkan?
Ya, saat menghubungkan layar eksternal melalui Stage Manager atau Sidecar, iOS memperbarui Size Class. Monitor eksternal biasanya mendapatkan wRegular hRegular, sementara layar utama mempertahankan Size Class-nya. traitCollectionDidChange dipanggil untuk jendela di setiap layar secara independen.
Ringkasan
- Size Class — sistem klasifikasi layar iOS dengan dua nilai Compact/Regular di setiap sumbu, total 4 kombinasi.
- iPhone dalam potret — wCompact hRegular. iPad dalam mode layar penuh — wRegular hRegular. iPhone Plus/Max dalam lanskap — wRegular hCompact.
- Interface Builder menyediakan Vary for Traits untuk konfigurasi visual constraint dan visibilitas untuk setiap Size Class.
- UITraitCollection — API pemrograman untuk membaca Size Class melalui horizontalSizeClass dan verticalSizeClass. Perubahan dilacak di traitCollectionDidChange.
- Split View di iPad secara dinamis mengubah Size Class: di 1/3 layar, horizontal menjadi Compact, memerlukan adaptasi tata letak.
- SwiftUI menyediakan @Environment(\.horizontalSizeClass) untuk membaca Size Class dan AnyLayout untuk beralih antar tata letak saat runtime.
- Disarankan memulai dengan tata letak untuk wAny hAny, kemudian beradaptasi untuk wCompact hRegular (iPhone) dan wRegular hRegular (iPad), tanpa membebani kombinasi lainnya.
Kami akan mengembangkan aplikasi seluler turnkey
IT Sectr membuat aplikasi iOS dan Android untuk startup dan bisnis sejak 2017. Kami akan memberi saran dan mengusulkan solusi terbaik.
Baca juga