Search code examples
swiftxcodeuiimageviewuistoryboard

UIImageView not shaping into a proper circle shape in UITableViewCell

I have a UIImageView inside a TableViewCell where I want to display the Image View into a Circle and have done some research online, but the UIImageView converts to a circular rectangular type instead.

Here is the example issue:

Example Issue As you can see the Image is rounded but it's more like a rectangle circle rather than an actual circle which is what I want to achieve.

Storyboard object placements

Storyboard Object Placements

Here's what I've tried doing

  • Setting both the height and width of the UIImageView to the same value
  • Content Mode: Aspect Fill (Was already enabled in storyboard)
  • cellForRowAt function - See code below
cell.backgroundImageView.layer.borderWidth = 1
cell.backgroundImageView.layer.masksToBounds = true
cell.backgroundImageView.layer.cornerRadius = cell.backgroundImageView.frame.width / 2

Appreciate if the Stackoverflow community could help me on this mystery issue and show a normal circle instead.

Edit: Added Constraints

<constraint firstAttribute="width" secondItem="SN7-KQ-bLs" secondAttribute="height" multiplier="1:1" id="fnk-DG-TK8"/>

<constraint firstItem="VVM-Vf-iwJ" firstAttribute="trailing" secondItem="IYt-ky-1cl" secondAttribute="trailing" id="0f0-6E-N9y"/>
                                        <constraint firstItem="VVM-Vf-iwJ" firstAttribute="top" secondItem="C1t-o2-7NZ" secondAttribute="topMargin" id="0oA-se-a9X"/>
                                        <constraint firstItem="SN7-KQ-bLs" firstAttribute="leading" secondItem="C1t-o2-7NZ" secondAttribute="leadingMargin" id="953-xq-W2Y"/>
                                        <constraint firstItem="IYt-ky-1cl" firstAttribute="top" secondItem="VVM-Vf-iwJ" secondAttribute="bottom" constant="-3" id="BFj-p7-RM6"/>
                                        <constraint firstItem="VVM-Vf-iwJ" firstAttribute="leading" secondItem="C1t-o2-7NZ" secondAttribute="leadingMargin" constant="54" id="hVv-nQ-bAl"/>
                                        <constraint firstAttribute="trailingMargin" secondItem="SN7-KQ-bLs" secondAttribute="trailing" constant="218" id="k47-df-sZ3"/>
                                        <constraint firstItem="SN7-KQ-bLs" firstAttribute="top" secondItem="VVM-Vf-iwJ" secondAttribute="top" id="sbF-ni-mJE"/>
                                        <constraint firstItem="VVM-Vf-iwJ" firstAttribute="leading" secondItem="IYt-ky-1cl" secondAttribute="leading" id="uoy-hv-n5V"/>
                                        <constraint firstItem="VVM-Vf-iwJ" firstAttribute="trailing" secondItem="C1t-o2-7NZ" secondAttribute="trailingMargin" id="xr8-93-737"/>
                                        <constraint firstAttribute="bottomMargin" secondItem="SN7-KQ-bLs" secondAttribute="bottom" constant="7" id="ysw-uw-sXi"/>
Solution

  • Go to your uitableViewCell class and use below code it works for me and will work for you.

     override func awakeFromNib() {
    super.awakeFromNib()
    backGroundImageView.layer.cornerRadius = backGroundImageView.frame.width / 2
    backGroundImageView.clipsToBounds = true
 }