【SwiftUI】GeometoryReader

4月 27, 2021

今回は、SwiftUIのGeometryReaderについて取りあげます。GeometoryReaderは、Viewのサイズや座標位置を取得するときに利用します。以下実際の取得例を見ていきましょう。

・例１:画面のサイズを取得

この例では、下記のスクリーンショットのサイズを取得してます。safeAreaは含まれていません。

・スクリーンショット

・コード

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            Text(String("\(geometry.size)"))
                .font(.largeTitle)
                .fontWeight(.bold)
        }.background(Color.purple)
    }
}

・例2:配置したUI部品のサイズを取得

この例では、Spacerの間に挟まれたTextのサイズを取得しております。スクリーンショットの赤色の部分です。

・スクリーンショット

・コード

VStack{
            
   Spacer().frame(height: 50)
    GeometryReader { geometry in
        Text(String("\(geometry.size)"))
            .fontWeight(.bold)
            .background(Color.orange)
            .font(.largeTitle)
    }.background(Color.red)
    Spacer().frame(height: 50)
            
}.background(Color.purple)

・例3:配置したUI部品の座標とサイズを取得

・例3-1:左上の座標位置

この例では、座標とサイズの例です。座標の原点は画面の左上になります。

スクリーンショットの3-1では、セーフエリアを除いたText(赤いエリア)の以下の情報を表示しました。

(左上を原点としてX座標の位置, 左上を原点としてY座標の位置, 横幅, 縦幅)

この例では、赤い枠の左上の頂点が、X座標: 0 , y座標: 44の位置にあります。44はセーフエリアの高さ分だけ下に位置しております。

・スクリーンショット

・コード

VStack{

    GeometryReader { geometry in
        Text(String("\(geometry.frame(in: .global))"))
            .fontWeight(.bold)
            .background(Color.orange)
            .font(.title)
    }.background(Color.red)
    
    Spacer().frame(height: 50)
    
}.background(Color.purple)

・例3-2: Local座標とGlobal座標

例3-１のコードを以下のように変更すると下記のようになる。

localは、View自身の座標を表示。自身の位置がベースとなるので、x,y座標はそれぞれ0 ,0 となり、Globalは、RootViewから座標が表示される。以下のスクショは、ローカル座標を表示した例である

・スクリーンショット

・コード

// 例3-1の以下のgeometry.frameをlocalに変更する
Text(String("\(geometry.frame(in: .local))"))

・例4:ScrollViewで各Viewの座標を取得した例

PersonalFactoryさんのサイトにて、事例の記載がありますのでリンクと画像を掲載します。

このブログを検索

Oz-Tech-Blog