Ray Wenderlich Course - SwiftUI (Part 4)

Lots going on at the moment but I am going to squeeze in a session today. Next bit of SwiftUI!

 Start Time - 19:32

Second Section: Building Interfaces with Container Views

 So stacks in detail and using bits from Swift UIKit. Tab views coming up as well.

HStack, VStack and ZStack

A mention of alignments - leading is left and trailing is right.

Different alignments to the centre default - first/last baseline alignment

ZStack is different - you have elements on top of one another.

So the whole right click and embed in V or H Stack means that this puts what you have within another stack. Makes sense.

Here is what we have at the moment....

VStack {
        HStack {
            
            Image("CatOnKeyboard")
                .resizable()
                .frame(width: 50, height: 50)
            
            Button(action: {
                
                
            }) {
                HStack {
                    Text("Sign up now!")
                    Image(systemName: "checkmark.circle")
                }
                
            }
          .padding()
          .background(Color.catPurple)
          .foregroundColor(.white)
            .shadow(radius: 5)
        }
    }
    }

}


Simple and effective so far!

ZStack {
        
        Circle()
            .fill(Color.catPurple)
        
        VStack {
            Image("CatOnKeyboard")
            .resizable()
                .frame(width: 150, height: 150)
            
            Text("Help for cats!")
                .font(Font.system(.largeTitle, design: .rounded))
                .foregroundColor(.pink)
                .fontWeight(.heavy)
            .shadow(radius: 5)
            
        }
        Spacer()
        .layoutPriority(1)
        
    }
    .background(Color.rayWenderlichGreen)
    .edgesIgnoringSafeArea(.all)
    
    }
}


I'm really enjoying this! This time it is a ZStack which has things on top of one another. Very cool. 

How the Layout System Works

So constraints are still used...

The ambiguous constraints are a thing of a past however! Woohoo - that was such a pain with Swift UIKit. 

So you have Root View, then Control View, then whatever objects you have. 

So there is never a conflict with views - getting confusing or weird layouts. 

There is flexibility with components. Text has quite a lot but images - as they come from a different source - show the actual size and have little wriggle room. 

Between multiple objects, Xcode will go to the least flexible first, then the next and so on. Then divide the padding space between the number of objects. 

There is a layout priority too. You can put in a minimus scale factor and aspectRatio for an image. So making the least flexible the one you want to take priority!

If you specify a height/dimension then this is non-negotiable. 

You can put in nil or .infinity for the min/max sizes of the frame - this gives more flexibility. 

So a lot of info on this one - nothing practical to play with but the auto layout is a real paradigm shift! I agree with Laurie that the pay offs will be huge. Much better than UIKit!

Finish Time - 20:26 (54 minutes)

So again great stuff! I like Laurie's explanations. They're relatable and interesting. I'm definitely going to see this course through now - I have a lot more knowledge already. 

Comments

Post a Comment

Popular posts from this blog

*Xcode Project Entry 2* F1 Quiz - part 1

Image
It's Christmas Eve and time to code! To think, a year ago, I was plodding along with some eBook, blindly convincing myself that I was on a steady road to coding greatness. Really, it was from June where I made the decision to start again, humbling as that may seem. It would have been comforting to have completed endless 'beginner' courses but branching out and applying the theory is the key thing, which brings us to this entry. Yes, my second Xcode OWN project! I thought about doing an educational one, as there is certainly a lot of scope and relevance for that, being a teacher and all. However, making a quiz makes sense, for various reasons.  First off, I have made this before through Angela's excellent tutorial. No offence to Sandra, but hers is not even close to the elegance and effectiveness of Angela's project. The one thing to take from Sandra is the stack views. Definitely something I will use from now on. This is one of the great things about learning from...
Read more

Angela Yu Course Part 10 (up to lesson 112)

Image
It's unlikely that I'll be able to do any Swift tomorrow as I'm going to Eastbourne today, for the weekend. So I can give half an hour now, maximum! Coding Challenge - Destini App! Choose your own adventure books! I used to ADORE these. Angela explains that these have had some sort of revival through the Lifeline games. It's very binary - yes/no mostly. I have my own experience of this based on WDC... Now the challenge is to complete the game! Having followed the first few instructions, which I found a bit confusing it must be said, I was about to surrender and see the answer. Then I managed to stop myself - I CAN do this, or at least have a good go! Even if I don't get the correct answer, it will be good practice to put what I know into practice. This is my weakness, which I keep coming back to - that when some problem solving is required, I fold far too quickly. So here is what I need to do: Let's break this down... I need to use the...
Read more

Angela Yu Xcode 12 Course - Part 7 (lectures 74 to 79)

Image
No time to waste! Only got a short amount of time now so going to get a few minutes or so in! Start Time - 20:14 Conditionals If statement for 'love calculator' example. So a simple example for this. The idea will be that conditionals are used to show that the print statement will do it differently for whatever the number is. With updated Swift, I would use the Int.random(0...100). Easy fix that would be. Also no UIInt32 needed but just an Int. So with the if statements, it would be a STRING being returned.   Linked to the whole choose your own adventure - if/else for each choice. BMI Challenge No need to do this - easy enough to be honest. Just skimming through. BODMAS principles... So something I picked up on before is not needing the greater than AND less than value for the middle line (for the else if bmi > 18.5) A better solution, which Angela is already explaining before I could say it is returning a string instead of a Double. So the...
Read more