RayWenderlich.com Layout in IOS Course - Part 2

So last time I completed the nested stacks alignment. I've got a good understanding of how to use H and V stacks. Didn't quite get all of the extra bits of alignment but no worries at the moment. So cracking on - want to ideally finish this chapter today!

Start Time - 12:31

OK this chapter may need two more entries. But the whole course is only 3 chapters in total.

Alignment Guide

Something else to remember from before is embed in stacks. I need to get used to the control, option and click way to bring this up to make it easier. Shortcuts in general too!

Child view. Alignment guides - the line through the middle of the children!



Position is based on the parent rules. Different alignment guide for items in the stack (children).

Modifier - alignment value then compute value closure.




Closures - my nemesis! Good opportunity here to get used to these. Another cool thing about this course is that it's using actual Xcode projects rather than playgrounds. Good experience! Each time Jessy has had a new project to open and download.

OK so I used the shortcut on the object (a picture) then added modifier and chose alignment guide. Neat! This is where we have got to.

.alignmentGuide(VerticalAlignment.center) { $0[.bottom] }

To explain this, we typed in VerticalAlignment.center, as this is what we want to affect. The closure uses the $0 as it is the main property? Then the [.bottom] is a subscript. 

All a bit confusing so I am going with it for now! We are using .top and .bottom subscripts. 

Right OK starting to make more sense. If you move the alignment guide down, then the view moves up! And vice versa. So putting in a bottom alignment guide will cause the picture to go up - that explains that. 

The whole use of horizontal on a vertical stack is a bit confusing. It seems that if you specify the whole stack as leading/center etc. then the alignment guide needs to match to this - sense the use of VerticalAlignment.center from before. 

Custom Alignment

So in the example, we are trying to add an alignment guide to a text object - horizontal alignment then leading but it does not work. 

Swift does provide a protocol!

Ok a lot of info. Let's just make sense of it! We've had to create a custom enum, which is the component for alignment. 

enum CustomCenter: AlignmentID {

    static func defaultValue(in context: ViewDimensions) -> CGFloat {

        context[HorizontalAlignment.center]

    }

     

}

A lot of this was after inserting stubs - like an auto complete. The static function means it is a type method - only accessed within the type rather than on an instance of it. 

The idea is that we can now use this within the code for the alignment guide on that text box...

Nice! Just found another shortcut - this one for switching between tabs! Command, shift then the left or right arrow! Another one to get used to... Only works for one switch...

OK control and tab works! Let's stick with that...

The whole thing is starting to make more sense. Here is all of Jessy's code - 

struct ContentView: View {

  var body: some View {

    VStack (alignment: .customCenter) {

      HStack {

        ScaledImage("Trig")

        ScaledImage("Patterns")

        Text("Learn SwiftUI layout!")

            .alignmentGuide(HorizontalAlignment.customCenter) { $0[.leading]

        }

      }

      HStack {

        Text("Help others learn it too!")

        .alignmentGuide(HorizontalAlignment.customCenter) { $0[.trailing]

        }

        ScaledImage("Hearts")

        

      }

      HStack {

        ScaledImage("Rocket")

        Text("Then let's all make some awesome apps!")

          .multilineTextAlignment(.center)

        ScaledImage("Party")

      }

    }

      .frame(width: 250, height: 250)

  }

}

extension HorizontalAlignment {

enum CustomCenter: AlignmentID {

    static func defaultValue(in context: ViewDimensions) -> CGFloat {

        context[HorizontalAlignment.center]

    }

}

    

    static let customCenter = Self(CustomCenter.self)

    

}

One of the key things here was the extension of HorizontalAlignment. We've added a custom option of CustomCenter! The code inside that is then meta - it uses Self. That is the property to add to the HorizontalAlignment guide option. Just about makes sense!

Another point about alignment. Here are the 8 different built-in alignments - 

Challenge!

Last bit for today! I'm pausing the challenge video at 3:55. If I try to rush through it, it won't be done properly! So a good time to stop.

Finished at 13:33 (approx 1 hour)