*BONUS ENTRY* Putting SwiftUI Into Practice - Part 1

This is a bonus - a 'rain day' today! Basically the day off. And definitely some time to code! As I've mentioned, Laurie's course is great but very complex. There's a lot I'm still not well versed with. So with practising making perfect and all that, this is the right time to play around with some of the concepts. 

Start Time - 17:56

Right, so first thing is to make a list of some of the things I want to play around with....

• 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

So, starting with List...

Here we go - combining List and ForEach:

struct ContentView: View {

    let f1Drivers = ["Schumacher", "Alonso","Hamilton", "Vettel", "Hakkinen", "Hill"]

    var body: some View {

        List {

            ForEach(f1Drivers, id: \.self) {

                Text($0)

            }

    }

}

}

This was obviously adapted but the code is easy to explain. 

The array is before the body (all code that is not an object). 

Then the List object is the only one in the body. I've got ForEach, the array with the 'id', which in this case is itself. The Text($0) is putting whatever the first value is. That isn't so clear - maybe with nested arrays that's a factor! Let's just try that out out of interest...

Forget that - complex thing to even worry about for now. 

So at the moment, at the most basic level, I could change the array and get different values in the list. That's obvious. What else can I do?

Here's a bit about ScrollView - 

let f1Drivers = ["Schumacher", "Alonso","Hamilton", "Vettel", "Hakkinen", "Hill"]

    var body: some View {

        ScrollView {

        HStack {

            ForEach(f1Drivers, id: \.self) {

                Text($0)

            }

    }

}

}

}

That is with the HStack. 

OK, here is the ScrollView with VStack and some modifiers on the Text!

let f1Drivers = ["Schumacher", "Alonso","Hamilton", "Vettel", "Hakkinen", "Hill"]

    var body: some View {

        ScrollView {

        VStack {

            ForEach(f1Drivers, id: \.self) {

                Text($0)

                .fontWeight(.heavy)

                .foregroundColor(.blue)

                .padding()

                    .shadow(radius: 4)

               

                

            }

    }

}

}

}

One of the things I love about SwiftUI is that EVERY single thing that is modified comes out as code! I can change the options with the ShowViewInspector, or hard code them. Either way, it all matches up so clearly now. 

Right, next thing to play around with is Images. Let's save some first....

Yes, all done! I used my Resize Image app to basically get the three different pixel qualities. the 1, 2 and 3. Have done that for a few different F1 drivers. Have then added them all in and named them accordingly. Now to try getting them in the code. 

Nice and simple!

 var body: some View {

      Image("Ricciardo")

        .resizable()

        .scaledToFit()

        .padding()

        

}

}

Now to get a few imaged, I could do a VStack...

Paused for approx 40 minutes. 

OK! So I've got three different images - all different sizes, but that's down to how they were saved originally. I COULD put specific sizes on Xcode for them, but the aspect ratio would be out, plus it would then vary from device to device - not a practice to get used to.

Right, so I'm not sure at the moment how to get an image to appear from the click of a button. It's no biggie - as it's not something that I've actually learned yet with SwiftUI! But I've got the idea of putting in images from scratch and then inserting them in a stack. That's cool and good progress!

Summary -

• Lists and ScrollView - how to get from an array to displaying these on the screen. 
• Text properties - playing around with different modifiers etc. 
• Link between properties in menu and the hard code - great to see again!
• Images - getting these saved to the three versions then adding them in
• Properties for these images and adding several of them
• Experimenting (but failing for now!) to get button to reveal pictures. Something for another time!

Great stuff. It's taking a while to properly sink in but I've realised that in order to REALLY learn, I need to do these little play arounds/mini projects. Plus I need a summary to make it clear what I am actually learning. I will do one more of these to look at effects with pictures, then I'm going to play around with the other objects - forms, pickers etc!

Finish Time 19:55 (approx 1 hour proper)