Padding around UIImageView. Swift 3

Question

I have a UIImageView, where I don't want the image to 'touch' the edge of the view, rather have some 'padding' around it. However, I have tried the following, and for some reason it doesnt change:

@IBOutlet weak var pictureOutletOne: UIImageView!

//set the image
pictureOutletOne.image = UIImage(named: itemOne)

//set the padding
pictureOutletOne.layoutMargins = UIEdgeInsetsMake(10, 10, 10, 10);

I have also tried:

pictureOutletOne.translatesAutoresizingMaskIntoConstraints = false
pictureOutletOne.layoutMargins = UIEdgeInsets(top: 10, left: 100, bottom: 10, right: 0)

I have read alot about this, but these are the solutions I have found, but they aren't working. Using Swift 3.

Thanks so much.

`layoutMargins` only affect subviews that use them. `UIImageView` renders image inside in a non-UIView way so you should follow with the answer below where you wrap it into `UIView` — pronebird, May 28 '17 at 20:16
Visit https://stackoverflow.com/questions/46437504/adding-padding-and-border-to-an-uiimageview — Saeed Alizadeh, Dec 05 '18 at 23:07

score 26 · Answer 1 · answered Oct 10 '19 at 17:29

26

Swift 4.2 & 5

let imageView = UIImageView()
imageView.image = UIImage(named: 
"image")?.withAlignmentRectInsets(UIEdgeInsets(top: -5, left: -5, bottom: -5, 
right: -5))

Insets should be given in negative value

answered Oct 10 '19 at 17:29

Barath

1,656
19
19

2

Unfortunately this approach will not work with image views with rounded borders. – geoff Dec 13 '22 at 21:13

score 8 · Answer 2 · answered May 28 '17 at 19:37

8

You can insert the imageView into a view and set constraints to sides, guaranteed approach :)

answered May 28 '17 at 19:37

Dominik Bucher

2,120
2
16
25

Dominik. Thanks. I'm a beginner, how do you place the imageView into a view? – RJB May 29 '17 at 19:36
2

You can select the imageView and go to menu, Editor > Embed In > View. Doing it, you imageView will be allocated into a new created view. But don't forget to reapply the constraints. – dede.exe May 30 '17 at 01:49
This works only if you assume the person is using a nib or storyboard. This won't help in code. – TJ Olsen Apr 22 '22 at 19:53

score 6 · Answer 3 · edited May 18 '20 at 11:34

6

Override the alignmentRectInsets property in a new class:

class PaddedImageView: UIImageView {
    override var alignmentRectInsets: UIEdgeInsets {
        return UIEdgeInsets(top: -10, left: -10, bottom: -10, right: -10)
    }
}

edited May 18 '20 at 11:34

Olcay Ertaş

5,987
8
76
112

answered Feb 06 '19 at 17:01

Aaron Halvorsen

2,610
1
23
31

Ali Pacman · Answer 4 · 2023-03-08T09:30:37.227

3

Here is a little helper extension I build:

extension UIImage {
    func addPadding(_ padding: CGFloat) -> UIImage {
        let alignmentInset = UIEdgeInsets(top: -padding, left: -padding,
                                          bottom: -padding, right: -padding)
        return withAlignmentRectInsets(alignmentInset)
    }
}

edited Mar 08 '23 at 09:30

answered Nov 19 '21 at 13:19

Ali Pacman

719
7
12

score 0 · Answer 5 · answered Aug 04 '20 at 15:23

0

let padding: CGFloat = 10    
myImageView.contentMode = .scaleAspectFill
myImageView.image = UIImage(named: "myImage.png").resizableImage(withCapInsets: UIEdgeInsets(top: padding, left: padding, bottom: padding, right: padding), resizingMode: .stretch)

answered Aug 04 '20 at 15:23

Teja Kumar Bethina

3,486
26
34

score 0 · Answer 6 · edited Mar 16 '23 at 19:06

Swift 5

Adds padding to right and left of an image place in an image view.

let image = UIImage(systemName: "circle.fill")
let insets = UIEdgeInsets(top: 0, left: -15, bottom: 0, right: -15)
let imageView = UIImageView(image: image.withAlignmentRectInsets(insets))

Note: UIStackView honors alignment insets as contributors to an image view's intrinsic content size.

Use case example:

In my application, I have a vertical stack comprised of a small center-aligned UILabel stacked above a UIImageView in a UITableViewCell. Label width varies from cell to cell, varying respective vertical stack widths and shifting images' respective horizontal alignments. I.e. the images don't line up in the table.... By padding images with horizontal alignment insets, it forces vertical stack to have a consistent width greater than max expected label width, keeping images center-aligned vertically in the table.

Padding around UIImageView. Swift 3

6 Answers6