SwiftUIのGeometryReaderを試してみる

SwiftUIのGeometryReaderという構造体を使ってみました。
GeometryReaderとは自身の座標やサイズを子Viewに渡せる構造体です。
これを使う事で、動的に変化するViewなどが作りやすくなります。

今回は下URLを参考にさせて頂きました。

qiita.com

参照URLにもある中心に行くほど大きくなるViewを作ってみます。
まずはSwiftUIのプロジェクトを作成します。

struct ContentView: View {
    var body: some View {
        Text("Hello world")
    }
}

次はScrollViewの上に10個の円を並べます。

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0..<10) {_ in
                    Circle().frame(width: 100, height: 100).foregroundColor(Color.gray)
                }
            }
        }
    }
}

実行すると下のように円が並びます。

次は中心に来たときに大きくなるような実装をします。
ここでGeometryReaderを使います。

実装は下のとおりです。
CircleをGeometryReaderで囲む事でCircleの位置が分かるようにしています。

geometry.frame(in: .global)でCircleの位置を把握したら、それを使って円のサイズを変更しています。

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0..<10) {_ in
                    GeometryReader { geometry in
                        Circle().foregroundColor(Color.gray)
                            .scaleEffect(self.scale(x: geometry.frame(in: .global).midX))
                    }.frame(width: 100, height: 200)
                }
            }
        }
    }
    
    func scale(x: CGFloat) -> CGFloat {
        let centerX = UIScreen.main.bounds.width / 2
        return max(1.5 - abs(x - centerX) / centerX, 1)
    }
}

実行すると下のように中心の円が大きくなります。