RayWenderlich.com Layout in IOS Course - Part 3

Some momentum again! I feel positive about the content I'm learning, even if some of it is very complex. Right, straight onto this - I was partway through a challenge. Let's crack on!

Start Time - 18:41

Challenge: Custom Alignment Guides

OK, something does not seem to be working with this particular project. Errors coming up so just following along to see what Jessy does.

This alignment guide is very hard! So it is something I think to revisit at the end of the course. Definitely will need some going over! I didn't have a clue for this one but then there wasn't much of a chance, as even Jessy admits. He says that this is beyond the complexity for most, which is me at this stage! So I'm putting this challenge down to a 'too hard!'. But will have another look another time!

ZStacks

Has a lot in common with the other two stacks. Zstack represents the background of the view.

It uses BOTH horizontal and vertical. 9 built in values to use.

So a point with the positions: bottomLeading is bottom to the left, bottomTrailing is bottom right etc.

I've also made sense of padding - it puts a barrier/space around any of those objects within the code. Doing it for multiple objects or a whole stack has different effects of course!

Paused at 19:09 (20 mins approx so far)

Restart at 20:32; paused then started again 10 minutes later

So here is putting in a gradient -

 let gradient = LinearGradient(gradient: Gradient(stops: [

        .init(color: .brightSeafoam, location: CGFloat(3.0 / 8.0)), .init(color: .darkSeafoam, location: 1)

    ]

        ), startPoint: .topTrailing, endPoint: .bottom

    )

    

Other properties at the end of the Zstack -

 .overlay(gradient)

 .blendMode(.multiply)

A really interrupted entry today. It's hard to make sense of so much technical stuff.

That's it on stacks for now!

Geometry Reader

So geometry readers are views. They do not render anything!

Proxy is an instance of the geometry reader structure. This provides access to the view.

I've used this before in one of the earlier Ray courses (from Laurie I think).

OK so this is a lot simpler than the ZStack parts!

struct ContentView: View {

  var body: some View {

    GeometryReader { proxy in

        HStack {

          Image("Cake VStack")

            .resizable()

            .scaledToFit()

            .frame(width: proxy.size.width * 0.5)

          Text("Reading is dreaming with open eyes.")

            .layoutPriority(1)

          Image("Pancake VStack")

            .resizable()

            .scaledToFit()

        }

        

    }

  }

}

The GeometryReader view is accessed, then proxy is the instance by default. Then it is accessed via proxy.size.width then times 0.5 so the image takes up half of the frame.

The text getting layout priority means that anything NOT given parameters to will shrink by default!

Cracking on to challenge then this chapter is done!

Challenge

struct ContentView: View {

  var body: some View {

    GeometryReader { proxy in

        ZStack(alignment: .bottomTrailing) {

      Image("Catground")

        .resizable()

        .scaledToFit()

        .frame(width: proxy.size.width)

      Image("Badge")

        .resizable()

        .scaledToFit()

        .frame(width: proxy.size.width * 0.33)

        .padding(-proxy.size.width / 30)

    }

      .frame(width: 300)

  }

}

}

I got most of this! I missed the alignment bit with the ZStack and the padding (that formula is a negative so the padding moves inwards). But pretty, pretty good!

And that's it! Lots of difficult stuff here - tough to follow at times. But I've picked up a lot too. Getting used to stacks then bringing in geometry reader...definitely useful!

Finish Time 21:32 (on and off for approx 50 minutes probably)