Sans Pareil Technologies, Inc.

Key To Your Business

Lab 6: Images


In this session we will use images as background for various UIView subclasses, as well as use UIImageView to display an image dynamically downloaded from the internet.
Button 
We will see the use of images as background images to use with custom buttons. We will also implement an action function that will change the image when clicked.

For the purpose of this exercise, you can use free images from any internet source such as iconfinder.

  1. Create a single view application named lab6.

  2. Drag and drop a button to the storyboard file.

  3. Set different background images for the Default and Selected states.

  4. Create an action function in the view controller which will swap the background images on each click (between play and pause icons for instance).
    • var playing = false
    • @IBAction func play(button: UIButton) {
    • playing = !playing
    • if playing {
    • button.setImage(UIImage(named: "button_grey_pause.png"), for: .normal)
    • } else {
    • button.setImage(UIImage(named: "button_black_play.png"), for: .normal)
    • }
    • }

  5. Run the application on the simulator and ensure that the background images are modified.

Text View 
We will now use a background image with a text view component. For this exercise we choose an image from toptal. Add a UITextView to the storyboard and connect it to the ViewController through an outlet named textView. Modify the viewDidLoad function to set the background colour for the text view to a pattern image. A pattern image will be used as a pattern, in other words will repeat if necessary to fill the parent frame.
  override func viewDidLoad() {
    super.viewDidLoad()
    let image = UIImage(imageLiteralResourceName: "vintage-concrete.png")
    textView.backgroundColor = UIColor(patternImage: image)
  }
Image View 
In this exercise, we will use an UIImageView to initially display a placeholder image, and then update with the contents of an image downloaded off the internet. We will explore running functions in a background thread, and then updating UI components in the main GUI thread only the background task is complete.

For the initial image, we chose one from lorempixel. For the target image that will be downloaded from the internet, we will be using https://static.pexels.com/photos/45911/peacock-plumage-bird-peafowl-45911.jpeg.

Add an Image View component to the storyboard file, and create an outlet for it in the view controller. Set the image to the initial image. Add a button that we will use to initialise a download request to the high resolution image that we will retrieve in a background thread and then display in the image view in the main GUI thread.
  @IBOutlet weak var imageView: UIImageView!
  
  @IBAction func download() {
    DispatchQueue.global().async { self.downloadImage() }
  }
  
  private func downloadImage() {
    do {
      let url = URL(string: "https://static.pexels.com/photos/45911/peacock-plumage-bird-peafowl-45911.jpeg")
      let data = try Data(contentsOf: url!)
      NSLog("Downloaded image with size: %d", data.count)
      replaceImage(data:data)
    } catch {
      NSLog("Error retrieving image")
    }
  }
  
  private func replaceImage(data: Data) {
    DispatchQueue.main.async(execute: {
      if let image = UIImage(data: data) { self.imageView.image = image }
    })
  }