UIImageView

UIImageView widget displays a single image or a sequence of animated images.

UIImage class represents an image data.

loading

You can load image from assets.

// file extension can be omitted
let image = UIImage(named : "myimage.jpg")  
imageView.image = image 

To load images developers typically use libraries such as Kingfisher or AFNetwork which support memory and disk caching.

You can download the image yourself using the Data or UrlSession class.

extension UIImageView {
    func load(url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

// then use
// imgView.load(url: URL(string: "https://www.example.com/img/myimg.jpg")!)

Sometimes you need to change UIImageView height to show full image without changing width. You can add height constraint with const value to UIImageView, then use following code.

extension UIImageView {
    func loadToFitWidth(url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                        let ratio = image.size.width/image.size.height
                        let newHeight = ((self?.bounds.width ?? 0) / ratio)
                        
                        if let constraint = (self?.constraints.filter{$0.firstAttribute == .height}.first) {
                            constraint.constant = newHeight
                        } /*else {
                            // ... add default constraints
                            self?.widthAnchor.constraint(equalToConstant: self?.bounds.width ?? 0).isActive = true
                            self?.heightAnchor.constraint(equalToConstant: newHeight).isActive = true
                        }*/
                    }
                }
            }
        }
    }
}

animations

To make a frame animation you need to prepare an array of images of same size.

let myimgArr = ["1.jpg","2.jpg","3.jpg"]
var images = [UIImage]()

for i in 0..<myimgArr.count  {
    images.append(UIImage(named: myimgArr[i])!)
}

imgView.animationImages = images
imgView.animationDuration = 0.04
imgView.animationRepeatCount = 2
imgView.startAnimating()
// mgView.stopAnimating()

scaling mode

The contentMode property is very useful for UIImageView for specifying the scaling mode of the image.

Possible values of contentMode:

• scaleToFill - the image heights and widths are stretched to match the size of the view.
• scaleAspectFit - scales the content to fit the view but maintains the aspect ratio. Any part of the view bounds that is not filled with content is transparent.
• center - the image is centered in the view, but the length and width of the image are not stretched.
• top - the top edge of the image is centered horizontally at the top of the view, and the length and width of the image are not stretched. There is a similar value for the bottom edge: bottom.
• left - the left edge of the image is centered vertically at the left of the view, and the length and width of the image are not stretched. There is a similar value for the right edge: right
• topLeft - the top left corner of the image is placed at the top left corner of the view. The length and width of the image are not stretched. There are similar values for other corners: topRight, bottomLeft, bottomRight.

imgView.contentMode = .bottomLeft

transparency

When the image view and its image both have transparency, the image view uses alpha blending to combine the two.

If the image view’s isOpaque property is true, the image’s pixels are composited on top of the image view’s background color and the alpha property of the image view is ignored.

If the image view’s isOpaque property is false, the alpha value of each pixel is multiplied by the image view’s alpha value, with the resulting value becoming the actual transparency value for that pixel. If the image does not have an alpha channel, the alpha value of each pixel is assumed to be 1.0.

round image with border

Use layer property to make image round or with border.

// Shoud be half size of image view.
// For example, let size 40x40, then set cornerRadius to 20
imgView.layer.cornerRadius = 20
imgView.layer.masksToBounds = true

// Set border with 1 pixel width, and black color with 20% transparency.
imgView.layer.borderWidth = 1
imgView.layer.borderColor = UIColor.black.withAlphaComponent(0.2).cgColor

tint of image

UIImageView have a tintColor property that allows you to set the tint color for a vector image (*.pdf).

To apply a tint to a bitmap (*.png, *jpg), you need to change the rendering mode.

let image = UIImage(named: "ic-star-outline")!.withRenderingMode(.alwaysTemplate)
myImageView.image = image
myImageView.tintColor = .orange

clickable image

Image views ignore user events by default.

Set the isUserInteractionEnabled property to true to enable handling of user interactions. Then use any event handling methods to respond to touch events, such as attaching gesture recognizers.

override func viewDidLoad(){
    super.viewDidLoad()

    let tapGestureRecognizer = UITapGestureRecognizer(target: self, 
               action: #selector(imageTapped(tapGestureRecognizer:)))
    imageView.isUserInteractionEnabled = true
    imageView.addGestureRecognizer(tapGestureRecognizer)
}

@objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer){
    let tappedImage = tapGestureRecognizer.view as! UIImageView

    // ... do something
}

You can add UITapGestureRecognizer to the UIImageView in storyboard.

Also you can use button with image.

@IBOutlet var myButton: UIButton!
override func viewDidLoad(){
  super.viewDidLoad()

  var myUIImage: UIImage //set the UIImage here
  myButton.setImage(myUIImage, forState: UIControlState.Normal)
}

@IBAction func buttonTap(sender: UIButton!){
  // ... do something
}