Ray Wenderlich Course - SwiftUI (Part 2)

Here we go! A bit of time on a Friday afternoon, which is kind of rare! I'm continuing with the Swift UI course, which has been technical, tricky but interesting so far. I need to then map out a plan with Swift as I feel like I'm a bit directionless. Having said that, SwiftUI is still NEW. There isn't a huge amount out there so it's hard to look up stuff. So maybe I'm being hard on myself. Anyway, let's go...

Start Time - 15:53

So this is all about modifiers. How you can change font, size, colours etc.

So dark mode - this changes the foreground/background colour.

Live rendering - great to see updates as you go basically. Text component is a lot easier to use than UI Label. It is cool how it is coded and you see how it looks straight away.

The bit about groups I didn't get. There is an additional bit about dark mode, which I'm going to have a look at shortly.

Paused at 16:06

 Restart at 16:32

https://www.raywenderlich.com/5220-dynamic-type

OK, so this video is from Brian! I remember him from a year and a bit ago.

Anyway, he clarifies dynamic type as being able to work on different devices.

Right so on the previous Xcode, you can choose the dynamic type - just a box to be ticked.

This involves constraints, which of course have changed.

Baseline to baseline constraints - takes text size into account. The rest of this is quite advanced - in fact this screencast is classified as 'advanced' so no wonder! Time to leave this one and back to the course...

Image

So there are scaling skills to help with resizing. We need the resizing modifier. You can use the default stretch or a 're-tiling'.

OK I get this bit now...

#if DEBUG
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    Group {
    ContentView()
    ContentView()
        .previewDevice("iPhone SE")
  }
}


}


The whole group things is to create a group of content views and have alternative devices where you can see how the app looks! So the first content view is the default one, then the next one is for the iPhone SE specifically. Cool!






Image("Ray")
    .resizable()  

 .aspectRatio(contentMode: .fit)
There we are for filling the screen - by default in the centre (for aspect fit).

Learning more stuff all the time! The 'embed in __ stack' option after command + clicking creates the __ stack in the lines of code. Nice!

There are also custom aspect ratios - you can put in the ratio you want but could stretch the image. Avoid putting in numbers to keep it in aspect.

Shorthands - scaleToFIll and scaleToFit

Clipping -

You can choose a shape to cut around the image e.g. circle! Nice!

Image("Ray")
        .resizable()
        .scaledToFit()
        .clipShape(Circle())

        .padding([.leading, .trailing])

These modifiers lead to the image like this...


If I just did padding() then it would do that around all four edges. In the above, I've specified leading (left) and trailing (right). 

Also, there is mask....

You basically have a saved image which disguises part of the image. 

Other things to play around with - 


Lots of cool stuff!


  var body: some View {
    VStack {
        
        //Spacer()
        Image("Ray")
        .resizable(capInsets: EdgeInsets(), resizingMode: .tile)
        .scaledToFill()
            .saturation(0.5)
        .contrast(99)
    .hueRotation(Angle(degrees: 300))

            
        .padding([.horizontal, .vertical])
    
    .edgesIgnoringSafeArea([.top, .bottom])
     
    
    }
  }
}



OK last bit for now...

Buttons

  Button(action: {
            print("Good food!")
        }) {
            VStack {
                Image("Cat")
                .resizable()
                .scaledToFit()
            }
        }


All that is done with code - no clicking or dragging of buttons. 

The cat comes out blue - it does this as a template, rather than the original image!

struct ContentView : View {

    let foodPrinter: () -> () = {
        print("Food again!")
    }
  var body: some View {
    
    VStack {
      Button("Make Meow!") {
        print("😻Meeeeeeoow!😻")
      }
        Button(action:
            foodPrinter)
        {
            VStack {
                Image("Cat")
            .renderingMode(.original)
                .resizable()
                .scaledToFit()
            
            }
        }
    }
  }
}


Something else I hadn't thought about is that we don't have 'weak' anymore. It is because the ContentView is now a VALUE type!

Weak is only relevant for reference types. 

OK challenge time...

*Downloading SF Symbols. These will now be on Xcode each time!

Right so LOTS of stuff here - all useful and accessible!

VStack {
        Button(action:  {
        }) {
            VStack {
            Text("Give gift")
        
                .font(Font.system(.body))
            Image(systemName: "gift")
                .font(.largeTitle)
        
            }
      }
        Button(action:
            foodPrinter)
        {
            VStack {
                Image("Cat")
            .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .shadow(radius: 11)
                .padding()
                Text("Feed me!")
            .font(Font.system(.headline, design: .rounded))
            .foregroundColor(.primary)
                .padding([.leading, .trailing], 10)
                .padding([.top, .bottom], 5)
                .background(Color.init(.systemPink))
            
            }
        }
    }
  }
}

That's enough for one day!

Finish Time - 17:45 (approx 1 hour 15 minutes)

So lots of things learned, let's do a quick recap...

  • All the modifiers in SwiftUI come up as code as well as visually changing the properties
  • There are a LOT of properties to play around with!
  • For image, there are shortcuts for aspect fit/fill, resizing, as well as more specific modifiers like the shape cut out and other saturation etc. effects
  • For buttons, you can use images but need to change rendering original if you want the ACTUAL pic
  • There are plenty of modifiers for these too
  • The syntax is quite tricky for the action part, curly and normal brackets - that is something to get used to
  • The SF symbols are now inbuilt and can be included


It's REALLY useful doing these recaps at the end. If I can't find at least a couple of bullet points of useful things I've learned then there's no real point! I'm going to continue with this course as I'm getting more and more used to Swift UI. 




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