Circular Image View iOS Tutorial

Image View shapes are square by default. It is possible by using the layer property of the image view to display the image as a circular image. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSCircularImageTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

An image is needed to display inside the circular image view, so download the pictures zip file, extract the zip file and drag the pictures to the Assets Library.

Go to the Storyboard and drag an Image View to the main view. Select the image view and go to the Size Inspector. Set the Width and Height to 200 points.

Go to the Attributes inspector and set the Image field to apple-picture.

The Storyboard should look like this.

Select the Assistant Editor and make sure the ViewController.swift is visible. Ctrl and drag from the Image View to the ViewController class and create the following Outlet

Go to the ViewController.swift file and change the viewDidLoad(_:) method to

override func viewDidLoad() {
    super.viewDidLoad()

    circularImage.layer.masksToBounds = true
    circularImage.layer.cornerRadius = circularImage.bounds.width / 2
}

For every view there is a layer property. To make a circular image from a squared image, the radius is set to the half the width of the image view. When the value of the maskToBounds property is true, an implicit clipping mask is created that matches the bounds of the layer and includes any corner radius effects

Build and Run the project. The Image is displayed with as a Circular Image.

You can download the source code of the IOSCircularImageTutorial at the ioscreator repository on Github.