GeometryReader#

Hello, world!#

中央にHello, world!が表示され、特に違和感もない。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

+GeomeyryReader#

Geometry Reader に対して入れ子にするとデフォルトの上下左右の中央揃えのレイアウトが消える。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            Text("Hello, world!")
                .padding()
        }
    }
}

+ScrollView#

ScrollView に対しても入れ子にすると上のようになる。見た目は全く変わらないがスクロールができる。

ちなみに GeometryReader に対して青、ScrollView に対して赤の背景色を与えると以下のようなレイヤー構成になっている。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                Text("Hello, world!")
                    .padding()
            }
        }
    }
}

実際に書いてみた#

ところが期待に反してそうはならない。

領域自体は横幅 100 ピクセルが確保されているようなのだが、円自体は大きくなっていない。

もちろん、円自体にframe等で幅を指定してやれば変化はするだろうが、そうなると大きいデバイスだとスカスカで、小さいデバイスだとキツキツ（ひょっとしたらはみ出してしまうかもしれない）になってしまう。

それではとてもレスポンシブデザインとは言えない。

で、これをやると GeometryReader の値が常に ScrollView のサイズと一致してしまうのでForEachの中の円の大きさについては全くわからない。この書き方だと意味がない気がするのだが…

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                    ForEach(Range(0...11)) { _ in
                        Circle()
                            .background(Color.yellow.opacity(0.3))
                    }
                })
            }
            .background(Color.red.opacity(0.3))
        }
        .background(Color.blue.opacity(0.3))
    }
}

ScrollView+GeometryReader+LazyVGrid#

何も変化がないし、GeometryReader の背景色が一段目にしか適応されていないのも違和感がある。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            GeometryReader { geometry in
                LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                    ForEach(Range(0...11)) { _ in
                        Circle()
                            .background(Color.yellow.opacity(0.3))
                    }
                })
            }
            .background(Color.blue.opacity(0.3))
        }
        .background(Color.red.opacity(0.3))
    }
}

ScrollView+LazyVGrid+GeometryReader#

こうすればCircleに対してGeometryReaderが効いているので個別のCircleの大きさをGeometryProxyから知ることができる。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                ForEach(Range(0...11)) { _ in
                    GeometryReader { geometry in
                        Circle()
                            .background(Color.yellow.opacity(0.3))
                    }
                    .background(Color.blue.opacity(0.3))
                }
            })
        }
        .background(Color.red.opacity(0.3))
    }
}

試しに Circle に対する GeomeyryProxy の値を取得してみたところ、横幅 97.5、縦幅 10.0 であることがわかった。縦幅も 97.5 であればよかったのだが、LazyVGridはあくまでも横幅に対するグリッドなので縦幅に関しては何も弄らないという方針なのだろう（もちろんそれが正しい挙動である）

つまりLazyVGridはあくまでも横幅を自動的に調整する仕組みであって、何も指定しなければ縦幅は最小の 10.0 に固定されるということだ。

そしてCircleはその中で自身を最大化しようとするのでサイズが 10 の円しか表示されないのだと思う。これを解消するためには「横幅制限の許す限り、円を最大化する」という処理を書けば良い。

contentMode を利用する#

そこでcontentMode(.fit)またはcontentMode(.fill)を利用する。

これは元々は単にアスペクト比を維持するためだけのプロパティのはずなのだがLazyVGrid内で利用すると横幅に合わせてオブジェクトを最大化することができる。

ただし、拡大率は全く調整できないのでLazyVGridの範囲内で許す限り最大まで大きくなってしまう。ちょっと横幅をもたせたい場合にはpadding()を利用するなどしよう。

正方形じゃない場合はどうするのか#

例えば、デバイスのサイズに関係なく 4:3 のサイズのボタンを表示したいとしよう。

今回利用したcontentModeは縦幅を強制的に縦幅と同じにするコードなのでそのままでは利用できない。では、どうするか？

横幅がわかるんだからそこから縦幅を計算させればよいだろうと思うが、そう簡単ではない。

struct UserView: View {
    var body: some View {
        GeometryReader { geometry in
            RoundedRectangle(cornerRadius: 10)
                .strokeBorder(Color.blue, lineWidth: 3)
                .overlay(Text("Nyamo"))
                .frame(width: geometry.size.width, height: geometry.size.width * 0.75, alignment: .center)
        }
        .aspectRatio(contentMode: .fill)
    }
}

単にこのようにRoundRectangleにframeの値を突っ込んだだけだと、LazyVGridがその値を読み込めないため「わいの中身、CGSize(97.5, 10.0)で定義してるし間隔そんなにあけなくていいよな」と誤解するので上の図のように詰まってしまう。

詰まらせないためにはUserView()に対してframeの値を指定しなければいけない。だがUserViewの大きさを知っているのはGeometryReaderの入れ子内だけである、困った。

一応の解決策としてはUserView()自体にcontentModeを指定する方法がある。これをやれば詰まらなくはなるが、どんなに縦幅が小さい View でも常に横幅と同じだけ間隔があいてしまう。

struct UserView: View {
    var body: some View {
        GeometryReader { geometry in
            RoundedRectangle(cornerRadius: 10)
                .strokeBorder(Color.blue, lineWidth: 3)
                .overlay(Text("Nyamo"))
                .frame(width: geometry.size.width, height: geometry.size.width * 3/2, alignment: .center)
        }
        .aspectRatio(contentMode: .fit)
    }
}

aspectRatioの引数を利用する#

正方形以外を利用したい場合にはaspectRatioの引数を利用する方法がある。

例えば、3:2 のアスペクト比のボタンを用意したい場合には.frame(width: geometry.size.width, height: geometry.size.width * 3/2, alignment: .center)でアスペクト比を 3:2 にしてからその情報をUserViewに対して伝えてやれば良い。

注意点としては SwiftUI のアスペクト比は「横の縦に対する比」のようになっているので、3:2 のアスペクト比の場合はその逆数の 2/3 を引数として与えなければいけない。

struct UserView: View {
    var body: some View {
        GeometryReader { geometry in
            RoundedRectangle(cornerRadius: 10)
                .strokeBorder(Color.blue, lineWidth: 3)
                .overlay(Text("Nyamo"))
                .frame(width: geometry.size.width, height: geometry.size.width * 3/2, alignment: .center)
        }
        .aspectRatio(2/3, contentMode: .fit)
    }
}

そしてこの方法を利用することで無事に理想的な表示方法に成功することができた。

スペースを空ける#

そのままLazyVGridを最大化すると ScrollView の上部に張り付いてしまう。

張り付いたからといって問題があるわけではないのだが、これでは余裕が全くないためにちょっと不便を感じるかもしれない。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                ForEach(Range(0...11)) { _ in
                    Circle()
                        .aspectRatio(contentMode: .fill)
                }
            })
            .padding()
        }
        .background(Color.red.opacity(0.3))
    }
}

その時は上のようにLazyVGridにpadding()をつけてやると良い。すると自動的にスペースが空いて、それに応じてオブジェクトも小さくなる。

中央揃え#

上下を揃える#

今までは縦幅が必ず同じものを想定していたが、場合によっては上のようにテキストの長さが変わることで縦幅のサイズが可変になる場合が考えられる。

このとき、上のように幅が小さいものは最も長いものに合わせる形にしたいのだろうが、可能だろうか？

というわけで、適当に円とテキストを組み合わせる View を作成してみた。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                ForEach(Range(0...11)) { _ in
                    VStack(alignment: .center, spacing: nil, content: {
                        Circle()
                            .aspectRatio(contentMode: .fit)
                        Text(Range(0 ... Int.random(in: 0 ... 10)).map({ _ in "A" }).joined())
                    })
                }
            })
            .padding()
        }
        .background(Color.red.opacity(0.3))
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: .init(.flexible(minimum: 50, maximum: 100)), count: 4), alignment: .center, spacing: nil, pinnedViews: [], content: {
                ForEach(Range(0...11)) { _ in
                    VStack(alignment: .center, spacing: nil, content: {
                        Circle()
                            .aspectRatio(contentMode: .fit)
                        Text(Range(0 ... Int.random(in: 0 ... 10)).map({ _ in "A" }).joined())
                        Spacer()  // 追加
                    })
                }
            })
            .padding()
        }
        .background(Color.red.opacity(0.3))
    }
}

要件#

• どのデバイスでも相対的に同じ位置に表示する
• ボタンなどは下側に表示したいのだが、それにも対応する

この仕様を達成するにはposition(x: y:)を利用するのが最も手っ取り早い。何故ならGeometryProxyで対象の View の幅や高さは簡単に取得できるためです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: nil, content: {
            Spacer(minLength: 100)
            HStack(alignment: .center, spacing: nil, content: {
                Spacer(minLength: 100)
                GeometryReader { geometry in
                    Circle()
                        .strokeBorder(Color.blue, lineWidth: 5)
                        .frame(width: 80, height: 80, alignment: .center)
                }
                .background(Color.red.opacity(0.3))
            })
        })
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: nil, content: {
            Spacer(minLength: 100)
            HStack(alignment: .center, spacing: nil, content: {
                Spacer(minLength: 100)
                GeometryReader { geometry in
                    Circle()
                        .strokeBorder(Color.blue, lineWidth: 5)
                        .frame(width: 80, height: 80, alignment: .center)
                        .position(x: 0, y: 0)  // 追加
                }
                .background(Color.red.opacity(0.3))
            })
        })
    }
}

GeometryProxy#

GeometryProxyの frame には.globalと.localの二つのプロパティがあります。

.globalは rootView を表し、.localはその View 自身を指します。

更に特殊な六つのプロパティを持ちます。どんな意味なのかは[SwiftUI] GeometryReader で View のサイズを知るで詳しく解説されています。

まあ図を見ればそこまで難しくは感じないと思います。真ん中に表示したかったら変にコードを書かなくてもmidXで十分だということです。

実際に実装してみると、このように簡単に書くことができます。