SwiftUI gives us access to amazing tools for forcing the size of child elements such as GeometryReader. In this video we go over how to replicate a UICollectionView layout in only 50-ish lines of SwiftUI code!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//
//  ContentView.swift
//  GeometryReaderFun
//
//  Created by Laurie Gray on 25/09/2019.


import SwiftUI

struct ContentView: View {
    var body: some View {
       
        ZStack {
           
            VStack {
                Text("Menu")
                    .font(.largeTitle)
                    .fontWeight(.bold)
               
                ScrollView(.vertical, showsIndicators: false) {
                    VStack {
                        ForEach(Range(1...4)) { iteration in
                           
                            GeometryReader { proxy in
                                Image("food\(iteration)")
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 200, height: 200)
                                    .clipped()
                                    .padding()
                                    .shadow(radius: 3)
                                    .background(Color.white)
                                    .shadow(radius: 3)
                                    .rotation3DEffect(Angle(degrees: Double(proxy.frame(in: .global).midY) / 20), axis: (x: 100, y: -100, z: 100))
                            }
                            .frame(width: 300, height: 300)
                        }
                    }
                }
               
               
            }
           
           
            Spacer()
        }
        .background(Image("bg").resizable().scaledToFill())
        .edgesIgnoringSafeArea(.all)
       
       
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}