We're Hiring!

Table of Contents

• Scroll View
• Keyboard Dismiss
• Backpropagation Function
• Loading Icon
• Light/Dark Mode

Extras

When writing a tutorial for my latest iOS app, SnapShot, there were bits of code that appeared often. I thought these steps were generally useful, so I created this collection of them to post separately.

Scroll View

Below are my steps to incorporating a scroll view, but for more visual instruction check out this video.
     1. Add a scroll view to the chosen controller
     2. Drag it so it fills up the whole screen
     3. Hover over the scrollView -> click control -> drag to View -> select Leading/Top/Trailing/Bottom Space to Safe Area
     4. Add a view on top of the scrollView
     5. Repeat steps 2 & 3 but with the view and scroll view, also clicking Equal Widths/Heights
     6. Click on the equal heights constraints and in the Attributes Inspector, set the priority to 250
     7. Then click the controller -> Size Inspector -> Simulated Size -> Freeform and set the height to a suitable value (for signup: 950)
     8. Now add all the elements and make sure to add constraints to everything (otherwise the scrollView won’t work)
     9. Finally, click scrollView -> Attributes Inspector -> Scroll View -> Keyboard -> Dismiss Interactively

Keyboard Dismiss

You can override touchesBegan to dismiss the keyboard:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        // option 1
        self.view.endEditing(true)
        // option2
        usernameTextField.resignFirstResponder()
        passwordTextField.resignFirstResponder()
}

Backpropagation Function

     1. In 1viewDidLoad1 of the controller, you want the function to run in:

NotificationCenter.default.addObserver(self, selector: #selector(reloadContent), name: Notification.Name("reloadContent"), object: nil)

     2. In the same file, add the function:

@objc func reloadContent (notification: NSNotification){
        // stuff you want to run in func - e.g...
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
    }

     3. In the controller you want to call the function from, write:

NotificationCenter.default.post(name: Notification.Name("reloadContent"), object: nil)

Loading Icon

     1. In the Classes folder, create a new file called AIUtil.swift
     2. Add the following code:

@objc func reloadContent (notification: NSNotification) {
        self.memTitle.text = page.title
        memTitle.adjustsFontSizeToFitWidth = true
        self.memImage.image = page.Image
        self.memDesc.text = page.desc
        self.memCategory.text = page.category
        self.memLocation.text = page.location
        self.memTags.text = page.tags
        self.memDate.text = page.date
    }

     3. When you want to show the spinner: self.showSpinner()
     4. When you want to remove the spinner: self.removeSpinner()

Light/Dark mode

If your computer’s simulation shows the default color as white (lightmode) but your phone is in darkmode, the colors will be black when you run the app on your phone. This is an issue I ran into, but luckily there is an easy solution:
     1. Go to SceneDelegate.swift
     2. In the first function (scene), add the following code:

if #available(iOS 13.0, *) {
        window?.overrideUserInterfaceStyle = .light // for light mode
        window?.overrideUserInterfaceStyle = .dark // for dark mode
}

Happy Coding!

Resources

SnapShot: How to Create a Digital Scrapbook in iOS - Part 1
SnapShot: How to Create a Digital Scrapbook in iOS - Part 2
Video Demo
SnapShot GitHub Repo
SashiDo
Parse Documentation
Parse Video Playlist