🪟

visionOSでwindowのサイズ変更を制御する方法

に公開

はじめに

私は現在、visionOS向けアプリの Yuki Talk を開発しています。
このアプリでは、ユーザーがウィンドウのサイズを自由に変更できるようにしていましたが、reddit上で画面サイズを極端に小さくした際にUIが崩れるという問題が報告されました。
このような問題を解決するために、visionOSが提供するwindowResizabilityという機能を使用して、アプリ側からウィンドウのサイズ変更を制御することにしました。

この記事では、私の経験を踏まえて、visionOSアプリでウィンドウのサイズ変更を適切に制御する方法について解説していきます。

windowResizabilityとは?

windowResizabilityはSwiftUIでウィンドウのリサイズ動作を制御するための修飾子です。
macOSでも同様の機能がありますが、visionOSではこれを使用することで、ウィンドウのリサイズ動作を制御することができます。(なお、本記事ではvisionOSのみを対象としています。)
これはユーザーが自由にウィンドウサイズを変更することで発生する、意図しない表示崩れレイアウトの破綻を防ぐために開発者がサイズ変更を制御するための機能です。

使用例

import SwiftUI

@main
struct MyVisionApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowResizability(.contentSize) // ← ここでリサイズ可能範囲を指定
    }
}

.windowResizability で指定できる値

以下の3つのオプションが用意されています。

.automatic(デフォルト)

システムが自動的にリサイズ動作を決定します。ユーザーが自由にウィンドウの大きさを変えることが可能です。

@main
struct MediaViewerApp: App {
    var body: some Scene {
        WindowGroup("メディアビューア") {
            MediaViewerView()
        }
        .windowResizability(.automatic)
    }
}

.contentSize

コンテンツが定義したサイズ制約の範囲内でのみウィンドウのリサイズが可能になります。

例えば、以下のコードでは 900×650 〜 1300×900 の範囲でのみリサイズ可能になります。

@main
struct MediaViewerApp: App {
    var body: some Scene {
        WindowGroup("メディアビューア") {
            MediaViewerView()
                .frame(
                    minWidth: 900, maxWidth: 1300,
                    minHeight: 650, maxHeight: 900
                )
        }
        .windowResizability(.contentSize)
    }
}

.contentMinSize

コンテンツが定義した最小サイズより小さくすることはできません。一方で、いくらでも大きくすることは可能です。

以下の例では、900×650 より小さくすることはできません。

@main
struct MediaViewerApp: App {
    var body: some Scene {
        WindowGroup("メディアビューア") {
            MediaViewerView()
                .frame(
                    minWidth: 900, minHeight: 650
                )
        }
        .windowResizability(.contentMinSize)
    }
}

まとめ

windowResizability を使用することで、アプリ側でウィンドウのリサイズの制御を行うことができます。
リサイズを許可するべきかどうかは、コンテンツの性質とユーザー体験の観点から判断し、適切なモディファイアを選びましょう。

参考リンク

GitHubで編集を提案

Discussion