能登 要

札幌在住のiOSアプリ開発者。SwiftUI により分割されたデバイス間を縦横にやりとりできる考え方に転換しています。

iOSアプリ開発者。2009年のiPhoneアプリ開発開始時期から活動。開発言語のアップデートの中でSwiftUIおよび周辺技術に着目中。

WidgetKitではテキスト表示用フォントサイズに制約あり(iOS14.2現在) - iOSアプリ開発

端的にいうと

iOS14.2現在、WidgetKitでは表示できるフォントサイズに制約がある。43pointより大きいサイズのフォントをText表示に使うとフォントが表示されない。

前提

SwiftUIとWidgetKitを使ってiOSアプリのウィジットを実装する。大きなテキストを表示する。

経緯

充電報告さんはバッテリー状況を表示する文字サイズは画面高さと連動している。充電報告さんでのWidget対応としてラージサイズ(Large Family)に対応を検討していた。

Largeサイズでウィジットを表示したところ文字が一瞬表示されてフェードアウトしてしまった。

フェードアウトの原因を調べたところ、テキストを以下のコードとすると問題が発生する。

// テキストが一瞬だけ表示されてしまう。
struct BigFontEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text("BigFont")
            .font(.custom("HelveticaNeue", size: 50))
            .foregroundColor(.black)
    }
}

fontをsystemに変更すると47point以下は表示できる。

// システムフォントは47ポイント以下で表示できる
struct BigFontEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text("BigFont")
            .font(Font.system(size: 47))
            .foregroundColor(.black)
    }
}

解決方法

カスタムフォントの場合はフォントサイズを43point以下にする(iOS14.2現在)と文字が消える現象は解消される。

// サイズを43ポイント以下とする
struct BigFontEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text("BigFont")
            .font(.custom("HelveticaNeue", size: 43))
            .foregroundColor(.black)
    }
}

GeometoryReader を使い画面サイズからフォントサイズを求めると上限を簡単に超えてしまうので注意する。

まとめ

WidgetKit SwiftUIを使うがインタラクト要素は含めない旨がWWDC2020のセッションで述べられていたがフォントサイズといった非インタラクト要素でもSwiftUIの制約事項があるかもしれない。

フォントサイズがAppleのチューニングの結果なのかただの不具合かは判然としない。

AppleとしてはWidgetKitを使う上で大きいフォントを使う想定はしていないので話題にもならなかった可能性はある。