【SwiftUI】画面サイズに応じてフォントサイズやレイアウトを変更するには?

この記事は約4分で読めます。

画面サイズに応じて、フォントサイズやレイアウトを変更するにはいくつか方法が考えられます。

その中で@Environmentを使用する方法を紹介します。

プログラム説明

以下のプログラムはフォントサイズの差が分かりやすいようにiPhoneの画面ではフォントサイズを0.1掛けとしています。実装する際は適切な値に変更してください。

import SwiftUI

struct FontSize: View {
    //①Environmentを使用してhorizontalSizeClass、verticalSizeClassクラスから水平方向、垂直方向の情報を取得できるようにします。
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    @Environment(\.verticalSizeClass) var verticalSizeClass
    
    let baseFontSize: CGFloat = 100.0
    
    var body: some View {
        Text("Hello, World!")
            //③fontサイズに適用します。
            .font(.system(size: fontSizeBasedOnScreen))
            .padding()
    }
    //②取得した画面サイズに応じて、フォントサイズを変更する分岐を作成しています
    var fontSizeBasedOnScreen: CGFloat {
        if horizontalSizeClass == .compact && verticalSizeClass == .regular {
            // iPhone Portrait (フォントサイズを0.1掛けにする)
            return baseFontSize * 0.1
        } else if horizontalSizeClass == .compact && verticalSizeClass == .compact {
            // iPhone Landscape (フォントサイズを0.7掛けにする)
            return baseFontSize * 0.7
        } else if horizontalSizeClass == .regular && verticalSizeClass == .regular {
            // iPad Portrait
            return baseFontSize
        } else if horizontalSizeClass == .regular && verticalSizeClass == .compact {
            // iPhone Landscape (フォントサイズを1.2掛けにする)
            return baseFontSize * 1.2
        } else {
            return baseFontSize
        }
    }
}

iPhone14でプレビュー

iPad10でプレビュー

horizontalSizeClass、verticalSizeClassについて

horizontalSizeClassには「.compact」、「.regular」といった情報を取得できます。これはおおまかな画面サイズでhorizontalSizeClassとverticalSizeClassの値の組み合わせでどのような画面が判別可能となっています。

horizontalSizeClassverticalSizeClass判別
regularregulariPad
regularcompact横幅が広めのiPhone
compactregulariPhone縦
compactcompactiPhone横

詳細は以下のappleデベロッパーサイトのURLを参照してください。

レイアウト | Apple Developer Documentation
さまざまなコンテキストに適応する一貫したレイアウトを使用すると、アプリがより使いやすくなり、ユーザがお気に入りのアプリやゲームをどのデバイスでも楽しめるようになります。
タイトルとURLをコピーしました