GeometryReaderの活用方法

SwiftUIのGeometryReaderは、ビューのサイズや位置情報を取得し、柔軟なUIを構築するための強力なツールです。この記事では、GeometryReaderの基本的な使い方を解説します。

iOS	13.0以上
XCode(当サイトの環境)	15.0.1

サイズ情報の取得
1. プログラム例
レイアウトの動的な変更
1. プログラム例
他のビューとの組み合わせ
まとめ

サイズ情報の取得

SwiftUIのGeometryReaderを使用して親ビューのサイズ情報を取得し、それを表示する例です。

ポイントは、GeometryReader内部に配置したVIewは親ビューの左上端から配置されることです。

プログラム例

import SwiftUI

struct GeometryReaderSmpView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Width: \(geometry.size.width)")
                Text("Height: \(geometry.size.height)")
            }
        }
    }
}

GeometryReaderはクロージャーを持ち、そのクロージャー内で渡されたgeometryという変数を使用して、親ビューの情報にアクセスします。
geometry.size.widthとgeometry.size.heightを使って、親ビューの幅と高さを取得し、それぞれの値を表示するTextビューがVStack内に配置されています。

このコードは、GeometryReaderが親ビューのサイズを取得し、Textビューに幅と高さの情報を表示します。これにより、GeometryReaderを利用して親ビューの幾何学的な情報を取得し、それをUIに反映させることができます。

レイアウトの動的な変更

取得した情報を使って、条件分岐を行うことで、特定の条件下でのレイアウトの変更が可能です。

プログラム例

import SwiftUI

struct GeometryReaderSmpView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                if geometry.size.width > 300 {
                    Text("広いレイアウト")
                } else {
                    Text("狭いレイアウト")
                }
            }
        }
    }
}

このコードでは、GeometryReaderが親ビューの幅情報を取得しており、その幅に基づいてVStack内に表示されるテキストを動的に切り替えています。

geometry.size.widthは画面の幅を表しており、この幅が300以上の場合は「広いレイアウト」が、それ未満の場合は「狭いレイアウト」が表示されます。
if-else文を使用して、条件に応じて異なるテキストを表示するようにしています。

このプログラムを実行すると、画面の幅に応じて表示されるテキストが変化します。このようにGeometryReaderを使用することで、ビューのサイズに基づいて動的なレイアウト変更を実現できます。

他のビューとの組み合わせ

GeometryReaderを使って取得した幾何学的情報を持つビューと、その他のビューを組み合わせる例です。
はじめに紹介したサイズ情報の取得の実行結果と見比べてみるとHeightの値が異なることがわかります。

import SwiftUI

struct GeometryReaderSmpView: View {
    var body: some View {
        VStack {
            GeometryReader { geometry in
                Text("Width: \(geometry.size.width), Height: \(geometry.size.height)")
            }
            .background(Color.gray)
            
            Text("GeometryReaderの外にあるテキスト")
        }
    }
}

GeometryReaderは、その内部のビューに親ビューの情報を提供します。この例ではText("Width: \(geometry.size.width), Height: \(geometry.size.height)")でその情報を利用しています。
GeometryReaderで取得した情報を持つTextビューに、背景色として.background(Color.gray)を設定しています。

さらに、GeometryReaderの外にあるもう一つのTextビューは、GeometryReaderの外側に配置されています。これにより、GeometryReader内のビューと外部のビューを組み合わせて表示されることが確認できます。