RayWenderlich.com Layout in IOS Course - Part 1

Here we are! On February Half Term again in RAK! So a sense of Deja Vu. Sadly, looking back on a whole year, there hasn't been much progress. But that's all going to change! Yes, I've been on much more of a roll recently and am ready to dive into more RW.com courses. The last one was a meaty one and took well over a month. Next one, which makes sense at this stage, Layout in IOS. 

Start Time - 11:10

So this course is about layout in both Swift UI and UIKit. Cool!

It made sense to go for this course rather than one of the ones from 2018 - anything before October 2019 does not include SwiftUI!

So Stack Alignment is the first bit of this.

Stack Alignment

This is a container view that has its children in a line. V and H Stack.

Option, command, return - shortcut for toggling canvas on and off. Still need to click resume though!

Option command and p - shortcut for refreshing that view.

Another shortcut to practise! To go straight to inserting from library, it is shift, command and l.

OK a really cool tip. Delete the property option e.g. centre/leading for alignment and press escape. Then all of the options are shown! Nice.

With V Stack the default is leading so you don't need to specify this. You can go into each object (text label/image etc.) and specify the alignment.

Paused at 11:47 (approx 20 minutes so far - not all has been productive!)

It's too hard to see and navigate on this screen in this heat. If I really wanted to I could go in the shade. But instead I can do an hour later no probs, on a bigger screen! So back to layout soon!

Continued at 18:51 (yes I came back!)

Not a huge amount of time before dinner but want to get a bit more done today.

Challenge!

So all of this is for 'Tweetbot'. Let's see what that is about!

So now I can see properly, there's a cool feature on Xcode. Holding control and option and clicking on the actual canvas - the specific label etc. - means you then have the property inspector come up quickly. That's a neat feature.

Here is the code - as followed along with Jessie!

struct ContentView: View {

  let cornerRadius: CGFloat = 7.5

  var body: some View {

    return VStack {

      Image("RW")

        .resizable()

        .frame(width: 90, height: 90)

        .cornerRadius(cornerRadius)

        .overlay(

            RoundedRectangle(cornerRadius: cornerRadius)

                .stroke(Color.white, lineWidth: 2.5)

        

        )

        

      Text("Following")

        .font(.body)

        .fontWeight(.bold)

        .foregroundColor(Color.white)

        .padding(.vertical, 4)

        .padding(.horizontal, 10)

        .background(Color.blue)

        .clipShape( Capsule() )

        

        Text("raywenderlich.com")

            .font(.headline)

            .foregroundColor(Color.white)

        Text("@rwenderlich")

            .font(.subheadline)

            .foregroundColor(Color.white)

        Text("FOLLOWS YOU")

            .font(.caption)

            .foregroundColor( .init(white: 0.4) )

            .background( Color(white: 0.9))

            .clipShape( Capsule() )

            .padding(.horizontal, 10)

        

      Text(

        "We are a friendly and supportive community of mobile developers. "

          + "We love to learn and share our knowledge with the world! "

          + "raywenderlich.com"

      )

        .padding(.top, 5)

        .lineSpacing(-.infinity)

    }

  }

}

I'm pausing again here - after dinner I'm going to complete the challenge to try to make this - 

From this - 

Continued next day at 18:53

So it turns out I had no time after dinner! Instead we're back a day later. 

The challenge above is tricky but I can do it. To make this work I need a HStack, then a VStack for the rw logo and following text. 

Then it will be the next bit of the HStack for the website, then the Twitter handle and Follows you below in QStacks! Then the text below that. 

Paused for 5 minutes.

Let's do this!

Right here's what we have...

Won't save yet. But it looks good! Apart from the bit of text needing to be in blue. 

Clicking and embedding in HStack is better than manually typing that in. 

Otherwise, did a great job! That bit can't be done easily in SwiftUI apparently.

Finish Time - 19:14 (approx 45 minutes altogether)