Editing the UI to Improve the UX

Topics Covered in This IOS Development Tutorial:

Adding a Loader, Adding Refresh

Exercise Preview

Exercise Overview

Now that we are interacting with the web, there’s a few things we should put into place to improve the User Experience (UX). We are all used to using apps on our phones and Apple has set the bar high in terms of User Experience. In fact Apple has defined the concept of good user experience and certain things are expected by users. The first is “friendly messaging” when something goes wrong. For instance, let’s say the app’s data didn’t load because the user’s cell or WiFi service failed, etc. What you don’t want to do is let a user sit there for a few minutes and not give them an indication that something went wrong. This will cause frustration and lead to users not wanting to use your app. Two of the things that are expected when dealing with external data are:

• UI that lets a user know data is loading
• UI that allows the user to refresh their data

Getting Started

1. If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–4C) before starting this one.

   If you completed the previous exercise, Jive Factory.xcworkspace should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).

   If You Did Not Complete the Previous Exercises (1B–4C)

   1. Close any files you may have open and switch to the Desktop.
   2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
   3. Duplicate the Jive Factory Ready for Improving the UX folder.
   4. Rename the folder to Jive Factory.
   5. Open Jive Factory > Jive Factory.xcworkspace.

Adding a Loader

1. In the Project navigator, go to BandsTableViewController.swift.

2. In the viewDidLoad method, add the following bold code:

   override func viewDidLoad() {
      super.viewDidLoad()
   
      let loader = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
   
      FirebaseApp.configure()
      bandsModel.fetch {[weak self] () -> () in
         if let strongSelf = self {
            strongSelf.tableView.reloadData()
         }

   This creates an instance of a standard Apple UIApplication loader, also known as a spinner! You will likely recognize it when you see it.

3. Set the frame position for the loader and align it in the center by adding the following code:

   override func viewDidLoad() {
      super.viewDidLoad()
   
      let loader = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
      loader.frame = CGRect(X: (self.view.frame.size.width-40)/2, y: (self.view.frame.size.height-40)/2, width: 40.0, height: 40.0)
   
      FirebaseApp.configure()
      bandsModel.fetch {[weak self] () -> () in
         if let strongSelf = self {
            strongSelf.tableView.reloadData()
         }

4. Next add the loader to our main view:

   let loader = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
   loader.frame = CGRect(X: (self.view.frame.size.width-40)/2, y: (self.view.frame.size.height-40)/2, width: 40.0, height: 40.0)
   self.view.addSubview(loader)
   
   FirebaseApp.configure()

5. Get the loader spinning by adding the bold code:

   let loader = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
   loader.frame = CGRect(X: (self.view.frame.size.width-40)/2, y: (self.view.frame.size.height-40)/2, width: 40.0, height: 40.0)
   self.view.addSubview(loader)
   loader.startAnimating()
   
   FirebaseApp.configure()

6. The loader should stop spinning once the data is complete. To do this, we need to call the stopAnimating() method on the loader from within our fetch() method. Add the following bold code:

   FirebaseApp.configure()
   bandsModel.fetch {[weak self] () -> () in
      if let strongSelf = self {
         loader.stopAnimating()
         strongSelf.tableView.reloadData()
      }
   }

7. Go ahead and Run to see the spinner in action. Pay close attention to the Simulator, as the spinner will only flash for a second before the data loads.

Adding Refresh

1. Return to Xcode.
2. In the Project navigator, click on Main.storyboard.
3. At the bottom left of the Editor, click the Show Document Outline button if it’s not already showing.
4. In the Document Outline, select Bands (within Bands Scene).
5. In the Utilities area on the right, click the Attributes inspector tab .
6. In the Table View Controller section, next to Refreshing, set the menu to Enabled.

7. In the Project navigator, go to BandsTableViewController.swift and add the following bold code to the viewDidLoad method (and don’t worry about the error message):

   self.view.addSubview(loader)
      loader.startAnimating()
   
      self.refreshControl?.addTarget(self, action: #selector(BandsTableViewController.refresh), for: UIControlEvents.valueChanged)
   
      FirebaseApp.configure()

8. Create a method called refresh and add it below the viewDidLoad method as shown below:

   }
   
   @objc func refresh() {
   
   }

9. Add this line to the refresh method. It will clear the data in the model:

   func refresh() {
      bandsModel.bandDetails.removeAll(keepingCapacity: false)
   }

10. We need to call the fetch method again. Select the code shown below and copy (Cmd–C) it:

    bandsModel.fetch {[weak self] () -> () in
       if let strongSelf = self {
          loader.stopAnimating()   
          strongSelf.tableView.reloadData()
       }
    }

11. As shown below, paste (Cmd–V) the code inside the refresh method:

    func refresh() {
       bandsModel.bandDetails.removeAll(keepCapacity: false)
       bandsModel.fetch {[weak self] () -> () in
          if let strongSelf = self {
             loader.stopAnimating()
             strongSelf.tableView.reloadData()
          }
       }
    }

12. Update the pasted code by replacing the stopAnimating() line with the bold code:

    func refresh() {
       bandsModel.bandDetails.removeAll(keepCapacity: false)
       bandsModel.fetch {[weak self] () -> () in
          if let strongSelf = self {
             strongSelf.refreshControl?.endRefreshing()    
             strongSelf.tableView.reloadData()
          }

13. Time to test. Make sure your WiFi/internet connection is turned on.
14. Hit Run.
15. Once the table has loaded, click and drag the cell down until you see the animated loader, which simulates a refresh!

16. If you have time, continue with the bonus exercises to customize the app for iPad.