*BONUS ENTRY* Putting SwiftUI Into Practice - Part 2
Second and final bonus entry! This is a bit more of a chance to put into practice some of the aspects of SwiftUI that I'm still getting used to.
Start Time - 20:29
Here is the list from before -
Start Time - 20:29
Here is the list from before -
- List - how to get items in a vertical list
- Image - including all the properties and modifiers
- Buttons - again, modifiers and other bits
- DatePicker - options for what day, month, year
- Toggle - something that is on/off
- Slider - a value going up or down
- H/V/Z Stack
- ForEach - a loop basically
- Form - as you would see in lots of iPhone menus
Last time I covered list, image and ForEach. So, logically let's work on the other stuff - buttons, datepicker, toggle, slider, Stacks and Form!
Buttons
*20 minute delay
var body: some View {
Button(action: {
print("Good food!")
}) {
VStack {
Image("Leclerc")
.renderingMode(.original)
.resizable()
.scaledToFit()
}
}
}
OK.....
Let's break that down!
(action: {
print("Good food!")
})
This bit here means what actually HAPPENS inside the button. In this case, there is print statement - that's just the example left over from one of Laurie's cat things.
The other options are some modifiers - resizable and scaled to fit.
Next example -
Button(action: {
}) {
VStack {
Text("Give gift")
.font(Font.system(.body))
Image(systemName: "gift")
.font(.largeTitle)
}
}
This is more 'classic'. With the above, you have the text and the system image together to make a button.
No action at all - nothing needed for this particular one.
That's buttons for now!
DatePicker...
Example from before -
struct ContentView: View {
var dateFormatter: DateFormatter {
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .short
return dateFormatter
}
@State var pickedDate = Date()
var body: some View {
VStack {
DatePicker(selection: $pickedDate, displayedComponents: [.date]) {
Text("Select Date")
}
Text("\(dateFormatter.string(from: pickedDate))")
}
}
}
And there's a working date picker! To break it down....
dateFormatter - this is a separate var created, not within the main body, interestingly.
The @State var for pickedDate - this again is before the main body.
Then we have the actual DatePicker - this is using the state var (as it's a value that can change - moving from one state to another).
The text below this is the 'short date', using the same pickerDate value.
Cool!
Slider
@ State private var orderCount = 0
var body: some View {
VStack {
Stepper(onIncrement: { self.orderCount += 1
} , onDecrement: { self.orderCount -= 1 }) {
Text("Choose your number!")
}
Text("Total chosen: \(orderCount)")
}
}
Right so what I'm proud of here is I've figured out what to put in the onDecrement bit, AND, the extra Text bit below to show the actual value. That's cool!
Toggle
var isActivatedMessage: String {
return "Cat nip is " + (isCatNipOn ? "Activated!": "Deactivated!")
}
@State var isCatNipOn = false
var body: some View {
VStack {
Toggle("Activate cat nip", isOn: $isCatNipOn)
Text(isActivatedMessage)
.foregroundColor(isCatNipOn ? .green: .red)
.fontWeight(isCatNipOn ? .heavy: .regular)
Toggle(isOn: $isCatNipOn) {
VStack {
Image("Vettel")
.resizable()
.frame(width: 100, height: 100)
Text("Activate cat nip!")
}
}
}
}
A little confusing here - two different toggle examples.
And when toggled...
Anyway, you can do one or the other - I do like the change in green. So toggles are cool!
ZStack/HStack and V Stack
The idea of these is that you can do layers.
var body: some View {
ZStack {
Circle()
.fill(Color.red)
VStack {
Image("Vettel")
.resizable()
.frame(width: 150, height: 150)
Text("It's Seb!")
.font(Font.system(.largeTitle, design: .rounded))
.foregroundColor(.white)
.fontWeight(.heavy)
.shadow(radius: 5)
}
Spacer()
.layoutPriority(1)
}
.background(Color.init(.darkGray))
.edgesIgnoringSafeArea(.all)
}
}
Nice! With this, we have a ZStack. This is the outer layer if you will - and there is the red circle. Then inside the ZStack is the VStack of Vettel pic then text.
Layout priority is important here - if I change this.... doesn't actually make a difference! Will revisit that!
Then the background colour is done last - this is what is left outside of the other bits. Kinda makes sense!
Forms
These are a LOT more tricky! You need a separate swift File with a custom struct. I've copied the treats one from Laurie. Then the code has a lot of elements -
struct ContentView: View {
@State private var selectedSnackIndex = 0
let treats = Treat.demoTreats
var body: some View {
NavigationView {
Form {
Section {
Picker(selection: $selectedSnackIndex, label: Text("Snack Type")) {
ForEach(0..<treats.count) {
Text(self.treats[$0].name).tag($0)
}
}
}
}
}
}
}
I'm too tired to try understanding every part of this. Anyway, that's been a good recap! Looking at the list, that's EVERYTHING gone over. Even if I'm not totally au fait with all of the syntax, I can now see the purpose of everything and have that bit more experience. Cool!
Finish Time - 9:53 (total time approx 1 hour)
Next time, back to Laurie's course! I'm going to finish that off in another couple of entires, then see what else ray wenderlich has to offer. I'm still not ready to do my own project as I don't really have clarity with buttons and text fields, not yet at least. Once I have that I'll be able to start making projects. One step at a time!
Comments
Post a Comment