IOS TutorialAirPrint tutorial in iOSCarthage iOS SetupChecking iOS versionCore SpotLight in iOSCreate a Custom framework in iOSDeep Linking in iOSExtension for rich Push Notification - iOS 10.Guideline to choose best iOS Architecture PatternsIOS - Implementation of XMPP with Robbie Hanson frameworkIOS 3D TouchIOS 10 Speech Recognition APIIOS AccessibilityIOS ADDING a SWIFT BRIDGING HEADERIOS AFNetworkingIOS AirDropIOS AlamofireIOS App Submission ProcessIOS App Transport Security (ATS)IOS App wide operationsIOS AppDelegateIOS Application rating/review requestIOS ARC (Automatic Reference Counting)IOS attributedText in UILabelIOS Auto LayoutIOS AVPlayer and AVPlayerViewControllerIOS AVSpeechSynthesizerIOS AWS SDKIOS Background ModesIOS Background Modes and EventsIOS Basic text file I/OIOS BlockIOS CAAnimationIOS Cache online imagesIOS CAGradientLayerIOS CALayerIOS CAShapeLayerIOS CategoriesIOS CGContext ReferenceIOS Chain Blocks in a Queue (with MKBlockQueue)IOS Change Status Bar ColorIOS Checking for Network ConnectivityIOS CLLocationIOS CloudKitIOS CodableIOS Code signingIOS ConcurrencyIOS Configure Beacons with CoreBluetoothIOS Contacts FrameworkIOS Content Hugging/Content Compression in AutoLayoutIOS Convert HTML to NSAttributed string and vice verseIOS Convert NSAttributedString to UIImageIOS Core DataIOS Core GraphicsIOS Core LocationIOS Core MotionIOS CoreImage FiltersIOS Create .ipa File to upload on appstore with ApplicationloaderIOS Create a video from imagesIOS Creating an App IDIOS CTCallCenterIOS Custom fontsIOS Custom KeyboardIOS Custom methods of selection of UITableViewCellsIOS Custom UITextFieldIOS Custom UIViews from XIB filesIOS Cut a UIImage into a circleIOS CydiaSubstrate tweakIOS Debugging CrashesIOS DispatchGroupIOS Dynamic TypeIOS Dynamically updating a UIStackViewIOS EventKitIOS Face Detection Using CoreImage/OpenCVIOS FacebookSDKIOS FastlaneIOS FCM Messaging in SwiftIOS FileHandleIOS GameCenter LeaderboardsIOS GameplayKitIOS GCD (Grand Central Dispatch)IOS Google Places APIIOS Graph (Coreplot)IOS Handle Multiple Environment using MacroIOS Handling URL SchemesIOS HealthkitIOS iBeaconIOS IBOutletsIOS In-App PurchaseIOS Initialization idioms

IOS UIImageView

From WikiOD

UIImage masked with Label[edit | edit source]

This makes image masked to the shape of the letters of the label:

Objective-C[edit | edit source]

self.maskImage.layer.mask = self.maskLabel.layer;
self.maskImage.layer.masksToBounds = YES;

Swift 3[edit | edit source]

maskImageView.mask = maskLabel
maskImageView.masksToBounds = true

Here is the result:


Making an image into a circle or rounded[edit | edit source]

This example shows, how to make a UIView or UIImageView, rounded with some radius like this:

example screenshot

Objective-C[edit | edit source]

someImageView.layer.cornerRadius = CGRectGetHeight(someImageView.frame) / 2;
someImageView.clipsToBounds = YES;

Swift[edit | edit source]

someImageView.layer.cornerRadius = someImageView.frame.height/2
// this should alleviate the performance hit that adding transparency may cause - see
// Be sure to check scrolling performance with Instruments if you take this approach.
someImageView.layer.shouldRasterize = true
someImageView.clipsToBounds = true // All parts of the image that are outside its bounds (the frame) are cut out (makes the rounded corners visible)

It is suggested that if you use autolayout that you put the someImageView.layer.cornerRadius code in viewDidLayoutSubviews. This will allow the image's cornerRadius to update if the image changes size.

override func viewDidLayoutSubviews() {
    someImageView.layer.cornerRadius = someImageView.frame.size.width/2
    someImageView.layer.masksToBounds = true

How the Mode property affects an image[edit | edit source]

The content mode property of a view tells how its content should be laid out. In the Interface Builder, the various modes can be selected in the Attributes Inspector.

attributes inspector screenshot

Let's use two image views to see how the various modes work.

Interface builder screenshot

Scale to Fill[edit | edit source]

Scale to Fill

The image heights and widths are stretched to match the size of the UIImageView.

Aspect Fit[edit | edit source]

Aspect Fit

The longest side (either height or width) of the image is stretched to match the view. This makes the image as big as possible while still showing the entire image and not distorting the height or width. (I set the UIImageView background to blue so that its size is clear.)

Aspect Fill[edit | edit source]

Aspect Fill

The shortest side (either height or width) of the image is stretched to match the view. Like "Aspect Fit", the proportions of the image are not distorted from their original aspect ratio.

Redraw[edit | edit source]


Redraw is only for custom views that need to do their own scaling and resizing. We aren't using a custom view, so we shouldn't use Redraw. Notice that here UIImageView just gives us the same result as Scale to Fill, but it is doing more work behind the scenes.

About Redraw, the Apple documentation says:

Content modes are good for recycling the contents of your view, but you can also set the content mode to the UIViewContentModeRedraw value when you specifically want your custom views to redraw themselves during scaling and resizing operations. Setting your view’s content mode to this value forces the system to call your view’s drawRect: method in response to geometry changes. In general, you should avoid using this value whenever possible, and you should certainly not use it with the standard system views.

Center[edit | edit source]


The image is centered in the view, but the length and width of the image are not stretched.

Top[edit | edit source]


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.

Bottom[edit | edit source]


The bottom edge of the image is centered horizontally at the bottom of the view, and the length and width of the image are not stretched.

Left[edit | edit source]


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.

Right[edit | edit source]


The right edge of the image is centered vertically at the right of the view, and the length and width of the image are not stretched.

Top Left[edit | edit source]

Top Left

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.

Top Right[edit | edit source]

Top Right

The top right corner of the image is placed at the top right corner of the view. The length and width of the image are not stretched.

Bottom Left[edit | edit source]

Bottom Left

The bottom left corner of the image is placed at the bottom left corner of the view. The length and width of the image are not stretched.

Bottom Right[edit | edit source]

Bottom Right

The bottom right corner of the image is placed at the bottom right corner of the view. The length and width of the image are not stretched.

Notes[edit | edit source]

This example comes originally from here.

If the content (in our case the image) is the same size as the view (in our case the UIImageView), then changing the content mode will make no noticeable difference.

See this and this question for a discussion about content modes for views other than UIImageView.

In Swift, to set to set the content mode programmatically you do the following:

  imageView.contentMode = UIViewContentMode.scaleToFill
  imageView.contentMode = UIViewContentMode.scaleAspectFit
  imageView.contentMode = UIViewContentMode.scaleAspectFill
  imageView.contentMode = UIViewContentMode.redraw
  imageView.contentMode =
  imageView.contentMode =
  imageView.contentMode = UIViewContentMode.bottom
  imageView.contentMode = UIViewContentMode.left
  imageView.contentMode = UIViewContentMode.right
  imageView.contentMode = UIViewContentMode.topLeft
  imageView.contentMode = UIViewContentMode.topRight
  imageView.contentMode = UIViewContentMode.bottomLeft
  imageView.contentMode = UIViewContentMode.bottomRight

Animating a UIImageView[edit | edit source]

You can animate a UIImageView by quickly displaying images on it in a sequence using the UIImageView's animation properties:

imageView.animationImages = [UIImage(named: "image1")!,
                             UIImage(named: "image2")!,
                             UIImage(named: "image3")!,
                             UIImage(named: "image4")!,
                             UIImage(named: "image5")!,
                             UIImage(named: "image6")!,
                             UIImage(named: "image7")!,
                             UIImage(named: "image8")!] 
imageView.animationDuration = 0.3
imageView.animationRepeatCount = 1

The animationImages property is an Array of UIImages that is run through from top to bottom when the animation is triggered.

The animationDuration property is a Double saying how many seconds the animation will run for.

The animationRepeatCount property is an Int that says how many times the animation will run.

To start and stop the animation, you can call the appropriate methods to do so:


There is method isAnimating() which returns a Boolean value indicating whether the animation is running at a moment or not.

Please note that this's not a very efficient way to create animations: it's quite slow and resource-consuming. Consider using Layers or Sprites for better results

Create a UIImageView[edit | edit source]

To create a UIImageView programmatically, all you need to do is create an instance of UIImageView:

let imageView = UIImageView()

UIImageView *imageView = [[UIImageView alloc] init];

You can set the size and position of the UIImageView with a CGRect:

imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

imageView.frame = CGRectMake(0,0,200,200);

Or you can set the size during initialization:

UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,200,200);

//Alternative way of defining frame for UIImageView
UIImageView *imageView = [[UIImageView alloc] init];
CGRect imageViewFrame = imageView.frame;
imageViewFrame.size.width = 200;
imageViewFrame.size.height = 200;
imageViewFrame.origin.x = 0;
imageViewFrame.origin.y = 0;
imageView.frame = imageViewFrame;

Note: You must import UIKit to use a UIImageView.

Assigning an image to a UIImageView[edit | edit source]

You can assign an image to a UIImageView during initialization, or later using the image property:

UIImageView(image: UIImage(named: "image1"))

UIImageView(image: UIImage(named: "image1"), highlightedImage: UIImage(named: "image2"))

imageView.image = UIImage(named: "image1") 

[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"];

[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1"] highlightedImage:[UIImage imageNamed:@"image2"]];

imageView.image = [UIImage imageNamed:@"image1"];

Change color of an image[edit | edit source]

imageView.tintColor = UIColor.redColor()
imageView.image = imageView.image?.imageWithRenderingMode(.AlwaysTemplate)

//Swift 3
imageView.tintColor =
imageView.image = imageView.image?.withRenderingMode(.alwaysTemplate)

imageView.tintColor = [UIColor redColor];
imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]