Chapter 12 Stack Views

  • In the Main.storyboard, drag a new View Controller from the object library onto the canvas. Drag 4 instances of UILabel onto the canvas and name them Name, Serial, Value, and Date Created.

Content hugging priority – holds the view to a certain size, the higher the priority the lower the tolerance for view size change.

  • Select the Date Created and change the vertical content hugging priority to 249 in the inspector.

When the stack view is selected and the distribution is switched to fill equally the labels are spread equally. For the purposes of the Homepwner leave the distribution on fill.

Stack views are very powerful when is comes to developing the appearance of the application. When you combine stack views you end up with nested stack views that can be used to create may applications.

  • Select Name on the label on the canvas click on the left most button on the Auto Layout constraints menu bar, thus embedding a stack view inside another one.
  • In the attributes inspector change the axis to horizontal.
  • Drag a text field to the right of the label. Open the size inspector for the text field and set its Horizontal Content Compression Resistance Priority to 749.
  • Select the horizontal stack view and open the attributes inspector. Change the spacing to 8pts.
  • Repeat these steps for Serial and Value labels

To align the labels properly:

  • Select the Vertical stack, open the attributes inspector and change the spacing to 8pts.
  • Click on the Data label and centrally align the label
  • Control drag from Name to Serial and select leading, do the same from Serial and Value

Segue – moves another view controller’s view onto the screen. Each segue has a style, action item, and an identifier.

  • Control + drag from the ItemCell prototype to the new view controller and select show
  • Create a new file/class named DetailViewController
  • Opt + click on main.storyboard, click + drag from each text field to the class and name the outlet the proper name, do this for the date label
  • Include the the snippets of code shown below in the proper files

Download the PDF file .

Leave a Reply

Your email address will not be published. Required fields are marked *