はじめに
iOSアプリ開発では、多様な画面サイズに対応する柔軟なインターフェース設計が重要です。
記事の目的
"wC", "wR", "hC"などの値に戸惑ったことはありませんか？この記事を読むと、Size Classの概念や、インターフェース設計での利用方法、そしてあらゆるデバイスで適応するユーザーインターフェースを作成するためのヒントを理解できるようになります。
概念
1. Size Class
Size Classは、iOSで異なる画面サイズに対応するためのシステムです。画面サイズを次の2つの軸に分けて管理します：
- 横幅 (Width)
- 縦幅 (Height)
各軸には2つのタイプがあります：
- Compact: 小さいサイズ (例：縦向きのiPhone)
- Regular: 大きいサイズ (例：横向きのiPad)
例：横向きのiPadは、横幅と縦幅の両方がRegularなSize Classを持ちます。一方、縦向きのiPhoneは横幅がCompactで縦幅がRegularなSize Classを持ちます。
2. Trait Variations
Trait Variationsは、異なるSize Classesに基づいてユーザーインターフェースを調整するための機能です。各Size Classに特化した制約、サイズ、間隔、その他のビュー属性のバリエーションを作成できます。これにより、デバイスの種類や画面の向きに合わせてユーザーインターフェースを最適化できます。
参考資料によると、CompactとRegularの変換点は600ピクセルです。
使用方法
簡単な例で理解を深めましょう。Size Classを使って、iPhoneのデバイスが横向きか縦向きかでUILabelのテキストを変更してみます。
class ViewController: UIViewController {
@IBOutlet weak var textLabel: UILabel! // Interface BuilderからUILabelへのIBOutlet接続
override func viewDidLoad() {
super.viewDidLoad()
// 画面サイズに基づいてラベルのテキストを変更
updateLabelForOrientation()
}
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// 画面サイズが変わったときにラベルのテキストを更新
updateLabelForOrientation()
}
func updateLabelForOrientation() {
if traitCollection.verticalSizeClass == .compact && traitCollection.horizontalSizeClass == .regular {
// デバイスが横向き
textLabel.text = "Landscape Mode"
} else if traitCollection.verticalSizeClass == .regular && traitCollection.horizontalSizeClass == .compact {
// デバイスが縦向き
textLabel.text = "Portrait Mode"
}
}
}
上記のコードでは、updateLabelForOrientation()関数で：
-
縦向き: 縦軸（vertical）が大きいため
regular、横軸（horizontal）は狭いためcompactです。 -
横向き: 縦軸（vertical）が狭いため
compact、横軸（horizontal）は広いためregularです。
traitCollectionのSize Classを確認し、デバイスが横向きか縦向きかを判断し、それに応じてUILabelのテキストを変更します。デバイスの向きを変えると、UILabelのテキストが自動的に更新されます。
Interface Builderでの使用
記事の最初に挙げた略称を思い出してください。これらはSize Classの略です：
- wC: Width-Compact
- wR: Width-Regular
- hC: Height-Compact
- hR: Height-Regular
Interface BuilderでSize Classを利用するには、以下の手順で先ほどの例を再現します：
ステップ 1: Xcodeで新しいプロジェクトを作成し、Interface Builderで1つのラベルをViewにドラッグします。
ステップ 2: ラベルのテキストを属性テキストに変更します。
ステップ 3: Size Classesの制約を作成します：
- 「+」ボタンを選択し、各値を選択して「Add Variation」ボタンをクリックします。
-
縦向き：
- 縦軸 (vertical): regular
- 横軸 (horizontal): compact
-
横向き：
- 縦軸 (vertical): compact
- 横軸 (horizontal): regular
-
縦向き：
設定後の制約：
アプリをビルドして結果を確認しましょう。
結論
Size Classは、様々なiOSデバイスに適応する柔軟なインターフェースを作成するための強力なツールです。Size Classを理解し適切に使用することで、ユーザーフレンドリーなアプリを開発できます。現在のプロジェクトにSize Classを適用してみて、Auto LayoutやTrait Variationsについてさらに学びましょう。Size Classの使用でお困りの際は、コメント欄に質問を残していただければお答えします！