Foundation: How to display images
Learn to use the contentMode property to change how images are rendered
In this Tip we will learn how to use a UIImageView to display an image on screen. We will also learn how to use the contentMode property of a UIImageView to change how the image is displayed.
To display an image we simply need to create a UIImageView and give it a UIImage.
let imageView: UIImageView = {
let imageView = UIImageView(image: MyViewController.image)
return imageView
}()If we run the program now we can see our image is displayed on screen. It doesn’t look great though. How an image view displays its image is controlled by the image view’s contentMode property. There are 13 different content modes we can choose from. What you see here is scaleToFill, the default value. scaleToFill stretches the image in both directions to fill its provided space but the images proportions are not kept.
Another option is scaleAspectFit. Here we can see the image is stretched proportionally until the first dimension fills all its available space, in this case, width.
imageView.contentMode = .scaleAspectFit
scaleAspectFill similarly scales the image proportionally but does not stop increasing its size until the second dimension fills all its available space.
imageView.contentMode = .scaleAspectFillThere are several other contentMode options to choose from. redraw makes sure the image is rendered each times the bounds of the image view change, during an animation to make the image view bigger, for example. The rest of the options have to do with placing the image in the image view. center is shown here but there is also right, left, top, bottom, topRight, bottomRight, topLeft and bottomLeft.
imageView.contentMode = .center
Full Code
import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
static let image = UIImage(named: "ZT")!
let imageView: UIImageView = {
let imageView = UIImageView(image: MyViewController.image)
return imageView
}()
let button_scaleAspectFit: UIButton = {
let button = UIButton()
button.setTitle("Scale Aspect Fit", for: .normal)
return button
}()
let button_scaleAspectFill: UIButton = {
let button = UIButton()
button.setTitle("Scale Aspect Fill", for: .normal)
return button
}()
let button_center: UIButton = {
let button = UIButton()
button.setTitle("Center", for: .normal)
return button
}()
override func loadView() {
let view = UIView()
view.backgroundColor = .gray
self.view = view
setUpLayout()
button_scaleAspectFit.addTarget(self, action: #selector(didSelectedButton_scaleAspectFit), for: .touchUpInside)
button_scaleAspectFill.addTarget(self, action: #selector(didSelectedButton_scaleAspectFill), for: .touchUpInside)
button_center.addTarget(self, action: #selector(didSelectedButton_center), for: .touchUpInside)
}
func setUpLayout() {
view.addSubview(imageView)
view.addSubview(button_scaleAspectFit)
view.addSubview(button_scaleAspectFill)
view.addSubview(button_center)
imageView.frame = CGRect(x: 0.0, y: 0.0, width: 200.0, height: 400.0)
let buttonWidth: CGFloat = 125.0
let buttonHeight: CGFloat = 30.0
let padding: CGFloat = 20.0
let buttonY: CGFloat = 500.0
button_scaleAspectFit.frame = CGRect(x: padding, y: buttonY, width: buttonWidth, height: buttonHeight)
button_scaleAspectFill.frame = CGRect(x: (padding * 2.0) + buttonWidth + padding, y: buttonY, width: buttonWidth, height: buttonHeight)
button_center.frame = CGRect(x: (padding * 3.0) + (buttonWidth * 2.0), y: buttonY, width: buttonWidth, height: buttonHeight)
}
@objc
func didSelectedButton_scaleAspectFit() {
imageView.contentMode = .scaleAspectFit
}
@objc
func didSelectedButton_scaleAspectFill() {
imageView.contentMode = .scaleAspectFill
}
@objc
func didSelectedButton_center() {
imageView.contentMode = .center
}
}
let viewController = MyViewController()
viewController.view.frame = CGRect(x: 0, y: 0, width: 500, height: 1000)
PlaygroundPage.current.liveView = viewController* This article originally appeared in the ZipTips app.
