UIImageView

UIImageView is a container for displaying a single image or a series of images.

Example

UIImageView

Instructions

Create

  1. Open Xcode
  2. Click File
  3. Click New
  4. Click Project...
  5. Under iOS, click Application
  6. Click Single View Application
  7. Click Next
  8. After Product Name, type your product name
  9. After Organization Name, type your organization name or leave blank
  10. After Organization Identifier, type your organization identifier
  11. After Language, select Swift
  12. After Devices, select Universal
  13. Uncheck Use Core Data
  14. Click Next
  15. Select a folder
  16. After Source Control, uncheck Create Git repository on
  17. Click Create

Edit ViewController.swift

  1. Open ViewController.swift
  2. Copy and paste code

Edit Main.storyboard

  1. Open Main.storyboard
  2. Click View
  3. Click Utilities
  4. Click Show Object Library
  5. Drag Image View to View
  6. Click View
  7. Click Utilities
  8. Click Show Connections Inspector
  9. Under Referencing Outlets, after New Referencing Outlet, drag + to View Controller
  10. Click interfaceBuilderImageView

Add Images

  1. Click File
  2. Click Add Files to "UIImageView" ...
  3. Select images
  4. After Destination, check Copy items if needed
  5. After Added folders, select Create groups
  6. After Add to targets, check UIImageView
  7. Click Add

Run

  1. Click Product
  2. Click Run

Code

import UIKit

class ViewController: UIViewController
{
  @IBOutlet weak var interfaceBuilderImageView: UIImageView!
  
  override func prefersStatusBarHidden() -> Bool
  {
    return true
  }
  override func viewDidLoad()
  {
    super.viewDidLoad()

    let image1 = UIImage(named: "HappyFace1")!
    let image2 = UIImage(named: "HappyFace2")!
    let image3 = UIImage(named: "HappyFace3")!
    let image4 = UIImage(named: "HappyFace4")!
    let image5 = UIImage(named: "HappyFace5")!
    let image6 = UIImage(named: "HappyFace6")!
    
    self.interfaceBuilderImageView.animationImages = [image3, image4]
    self.interfaceBuilderImageView.highlightedAnimationImages = [image5, image6]
    self.interfaceBuilderImageView.highlightedImage = image2
    self.interfaceBuilderImageView.image = image1
    self.view.removeConstraints(self.view.constraints())
    
    let animateButton = UIButton.buttonWithType(UIButtonType.System) as UIButton
    animateButton.addTarget(self, action: "animateTouchUpInside:", forControlEvents: UIControlEvents.TouchUpInside)
    animateButton.setTitle("Animate", forState: UIControlState.Normal)
    animateButton.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(animateButton)
    self.view.addConstraint(NSLayoutConstraint(item: animateButton, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.interfaceBuilderImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let highlightButton = UIButton.buttonWithType(UIButtonType.System) as UIButton
    highlightButton.addTarget(self, action: "highlightTouchUpInside:", forControlEvents: UIControlEvents.TouchUpInside)
    highlightButton.setTitle("Highlight", forState: UIControlState.Normal)
    highlightButton.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(highlightButton)
    self.view.addConstraint(NSLayoutConstraint(item: highlightButton, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animateButton, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let imageImageView = UIImageView()
    imageImageView.image = image1
    imageImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(imageImageView)
    self.view.addConstraint(NSLayoutConstraint(item: imageImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: highlightButton, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let highlightedImageView = UIImageView()
    highlightedImageView.highlighted = true
    highlightedImageView.highlightedImage = image2
    highlightedImageView.image = image1
    highlightedImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(highlightedImageView)
    self.view.addConstraint(NSLayoutConstraint(item: highlightedImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: imageImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let tintColorImageView = UIImageView()
    tintColorImageView.image = image1.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    tintColorImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    tintColorImageView.tintColor = UIColor.blackColor()
    self.view.addSubview(tintColorImageView)
    self.view.addConstraint(NSLayoutConstraint(item: tintColorImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: highlightedImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let animationImagesImageView = UIImageView()
    animationImagesImageView.animationImages = [image3, image4]
    animationImagesImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    animationImagesImageView.startAnimating()
    self.view.addSubview(animationImagesImageView)
    self.view.addConstraint(NSLayoutConstraint(item: animationImagesImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: tintColorImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let highlightedAnimationImagesImageView = UIImageView()
    highlightedAnimationImagesImageView.animationImages = [image3, image4]
    highlightedAnimationImagesImageView.highlighted = true
    highlightedAnimationImagesImageView.highlightedAnimationImages = [image5, image6]
    highlightedAnimationImagesImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    highlightedAnimationImagesImageView.startAnimating()
    self.view.addSubview(highlightedAnimationImagesImageView)
    self.view.addConstraint(NSLayoutConstraint(item: highlightedAnimationImagesImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationImagesImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let animationDurationImageView = UIImageView()
    animationDurationImageView.animationDuration = 10
    animationDurationImageView.animationImages = [image3, image4]
    animationDurationImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    animationDurationImageView.startAnimating()
    self.view.addSubview(animationDurationImageView)
    self.view.addConstraint(NSLayoutConstraint(item: animationDurationImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: highlightedAnimationImagesImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let animationRepeatCountImageView = UIImageView()
    animationRepeatCountImageView.animationImages = [image3, image4]
    animationRepeatCountImageView.animationRepeatCount = 100
    animationRepeatCountImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    animationRepeatCountImageView.startAnimating()
    self.view.addSubview(animationRepeatCountImageView)
    self.view.addConstraint(NSLayoutConstraint(item: animationRepeatCountImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationDurationImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))

    let contentModeScaleToFillImageView = UIImageView()
    contentModeScaleToFillImageView.contentMode = UIViewContentMode.ScaleToFill
    contentModeScaleToFillImageView.image = image1
    contentModeScaleToFillImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(contentModeScaleToFillImageView)
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleToFillImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationRepeatCountImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleToFillImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1/4, constant: 0))

    let contentModeScaleAspectFitImageView = UIImageView()
    contentModeScaleAspectFitImageView.contentMode = UIViewContentMode.ScaleAspectFit
    contentModeScaleAspectFitImageView.image = image1
    contentModeScaleAspectFitImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(contentModeScaleAspectFitImageView)
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFitImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationRepeatCountImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFitImageView, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Right, multiplier: 1/4, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFitImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1/4, constant: 0))

    let contentModeScaleAspectFillImageView = UIImageView()
    contentModeScaleAspectFillImageView.contentMode = UIViewContentMode.ScaleAspectFill
    contentModeScaleAspectFillImageView.image = image1
    contentModeScaleAspectFillImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(contentModeScaleAspectFillImageView)
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFillImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationRepeatCountImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFillImageView, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Right, multiplier: 2/4, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: contentModeScaleAspectFillImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1/4, constant: 0))

    let clipsToBoundsImageView = UIImageView()
    clipsToBoundsImageView.clipsToBounds = true
    clipsToBoundsImageView.contentMode = UIViewContentMode.ScaleAspectFill
    clipsToBoundsImageView.image = image1
    clipsToBoundsImageView.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(clipsToBoundsImageView)
    self.view.addConstraint(NSLayoutConstraint(item: clipsToBoundsImageView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: animationRepeatCountImageView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: clipsToBoundsImageView, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Right, multiplier: 3/4, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: clipsToBoundsImageView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1/4, constant: 0))
  }
  func animateTouchUpInside(sender: UIButton!)
  {
    if (self.interfaceBuilderImageView.isAnimating())
    {
      self.interfaceBuilderImageView.stopAnimating()
    }
    else
    {
      self.interfaceBuilderImageView.startAnimating()
    }
  }
  func highlightTouchUpInside(sender: UIButton!)
  {
    let animating = self.interfaceBuilderImageView.isAnimating()
    
    if (self.interfaceBuilderImageView.highlighted)
    {
      self.interfaceBuilderImageView.highlighted = false
    }
    else
    {
      self.interfaceBuilderImageView.highlighted = true
    }
    
    if (animating)
    {
      self.interfaceBuilderImageView.startAnimating()
    }
  }
}

External

Apple iOS Developer Library