Setting Up UI

• Background image is an image view component that is stretched to fill the whole screen
  • Change the Content Mode under the View section in the right side
  • Aspect Fit: keeps the ratio of the image
  • Scale to Fill: STRETCHES the image to fit
  • Aspect Fill: increases the ratio proportionally to fit the image
  • Technique used to create a custom background image instead of using background color for the view

Copying a Component

• Click on element and hold option then drag to new location

Linking Component to Code

• Code written in ViewController.swift
• Since Main.storyboard and ViewController.swift are 2 different files, you need to link somehow:
  • Click on the hamburger icon (in the Main.storyboard and then select Assistant so that the design is on one side and the code editor is on the right side of it
  • IBOutlet: InterfaceBuilderOutlet: used to connect components to code
  • Hold down on the component and then press on control and drag it to the editor before the viewDidLoad() with the following options:
    • Name: give the component a specific name (camelCased)
      • If you decide to change the name of the component, right click on the name and select Refactor
      • Then select Rename. This picks up all areas where the name is used and will rename it.
• When using an imageView component:
  • To change the value of its image property:
    • component.image = imageLiteral -> tab -> click on the image to select which image to use
• To detect user interaction on elements like buttons:
  • Use IBAction, which is automatically selected when you drag the component on to the code editor (ctrl + drag)
  • If you needed to change the appearance of the button, you will need to change it to Outlet
  • Give name and change Type to UIButton
  • Connect
  • Touch up Inside means that the user landed within the boundaries of the button and was lifted up when they released from within the boundary.

Creating an Array of Image Literals

• Create an array of image literals by FIRST typing imglit -> tab and THEN surround with []

Variables

• Created using the var keyword