Ray Wenderlich Course - SwiftUI (Part 6)
So last week wasn't a GREAT one for coding. I did a bit more work on the practising side of things and have got used to Swift UI for several of the features. Back to Laurie's course now. I reckon 3 or 4 more entries!
Start Time - 15:56
Scroll Views and Stacks
Right first few minutes or so typing out code to catch up on! The scroll view is literally that - being then be able to scroll across the screen horizontally for this example.
The Geometry Reader wraps it all up. You need the proxy in closure. Then remove the padding with the image. Then the frame size takes the proxy width (the width of the device - that's smart); height is 200.
Right so next is to move the GeometryReader bit so it wraps around from AFTER the for each loop. This means that there will be a container for each separate item, rather than one container for all. Sort of makes sense!
SOMETHING REALLY COOL! You can 'reindent' the code so you tidy up all of the code and brackets. It is ctrl and I. So easy and so useful, as my code gets messed up all the time! Can't believe I had never heard that before.
Rotation effect - very complicated but soo cool!
Start Time - 15:56
Scroll Views and Stacks
Right first few minutes or so typing out code to catch up on! The scroll view is literally that - being then be able to scroll across the screen horizontally for this example.
ScrollView(.horizontal) {
HStack {
ForEach(Book.demoBooks) { book in
VStack {
Text(book.title)
.padding([.leading, .top, .trailing])
Image(book.imageName)
.resizable()
.frame(width: 100, height: 100, alignment: .center)
.padding()
}
}
}
}
So the above denotes a ScrollView then has a horizontal stack to show book items arrayed through. The text is whatever their title property is. Then the rest are the properties to space them out.
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(Book.demoBooks) { book in
VStack {
Text(book.title)
.padding([.leading, .top, .trailing])
.multilineTextAlignment(.center)
Image(book.imageName)
.resizable()
.scaledToFit()
.padding()
}
.frame(width: 100, height: 100)
.background(Color.white)
.cornerRadius(10)
.padding()
.shadow(radius: 3)
}
}
}
}
}
This is more detailed. It has other properties like the shadow etc. Each book looks neater.
To make this into a vertical scroll view, all I would need is to make the HStack a VStack and make that .vertical in the property bit at the declaration of ScrollView. Really simple!
Geometry reader - this wraps up the components. Not exactly what is it yet!
The changes to the code are easy -
GeometryReader { proxy in
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(Book.demoBooks) { book in
VStack {
Text(book.title)
.padding([.leading, .top, .trailing])
.multilineTextAlignment(.center)
Image(book.imageName)
.resizable()
.scaledToFit()
}
.frame(width: proxy.size.width, height: 200)
.background(Color.white)
.cornerRadius(10)
.padding()
.shadow(radius: 3)
}
}
}
}
}
}
The Geometry Reader wraps it all up. You need the proxy in closure. Then remove the padding with the image. Then the frame size takes the proxy width (the width of the device - that's smart); height is 200.
Right so next is to move the GeometryReader bit so it wraps around from AFTER the for each loop. This means that there will be a container for each separate item, rather than one container for all. Sort of makes sense!
SOMETHING REALLY COOL! You can 'reindent' the code so you tidy up all of the code and brackets. It is ctrl and I. So easy and so useful, as my code gets messed up all the time! Can't believe I had never heard that before.
Rotation effect - very complicated but soo cool!
.rotation3DEffect(Angle(degrees: Double(proxy.frame(in: .global).midX) / 40), axis: (x: -4, y: -3, z: -3))
Another complicated change -
.frame(width: max(proxy.size.width - proxy.frame (in: .global).midX, proxy.size.width) , height: proxy.size.height - 50)
Right, final code! Complex stuff but man it looks good! Definitely need to play around with this.
ZStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(Book.demoBooks) { book in
GeometryReader { proxy in
VStack {
Text(book.title)
.fontWeight(.bold)
.font(Font.system(.headline, design: .rounded))
.minimumScaleFactor(0.75)
.foregroundColor(.white)
.multilineTextAlignment(.center)
.padding([.leading, .top, .trailing])
.multilineTextAlignment(.center)
Image(book.imageName)
.resizable()
.scaledToFit()
.shadow(color: .gray, radius: 15)
}
.frame(width: max(proxy.size.width - proxy.frame (in: .global).midX, proxy.size.width) , height: proxy.size.height - 50)
.background(
Image(book.imageName)
.resizable()
.scaledToFill()
.overlay(Color.rayWenderlichGreen)
.blendMode(.multiply)
.blur(radius: 1)
)
.cornerRadius(10)
.padding()
.shadow(radius: 3)
.layoutPriority(1)
.rotation3DEffect(Angle(degrees: Double(proxy.frame(in: .global).midX) / 40), axis: (x: -4, y: -3, z: -3))
}
.frame(width: 200, height: 300)
}
}
}
Spacer()
.layoutPriority(1)
}
.background(Color.black)
.edgesIgnoringSafeArea(.all)
}
Finish Time - 16:59 (1 hour 3 minutes)
That's all I have time for! Going to finish this particular chapter tomorrow hopefully. Then I may stop this course, consolidate and look for something a little easier as it's taking an hour to do a 10 minute video. Great stuff though!
Comments
Post a Comment