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!

[cc lang=”swift”] //
// 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()
}
}

[/cc]
code-disciple

Author code-disciple

More posts by code-disciple

Leave a Reply