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.

Abecedary

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 – Overtax

Visit #46438004 – Velar

Answer 1

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

Fanchet

Unfortunately this approach will not work with image views with rounded borders. – Inexactitude

Answer 2

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

Ian

Dominik. Thanks. I'm a beginner, how do you place the imageView into a view? – Genitalia

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. – Unimposing

This works only if you assume the person is using a nib or storyboard. This won't help in code. – Urban

@TJOlsen you can apply the same approach in code with NSLayoutConstraint and UIView. – Ian

Answer 3

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)
    }
}

Liuka

Answer 4

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)
    }
}

Use Case:

let image = UIImage("Image Name")
image.addPadding(10)

Soupy

@CristianCapannini please be kind. I have added a use case, so you have an example. – Soupy

Answer 5

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)

Karame

Answer 6

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.

Westleigh

Answer 7

what others are saying is good but I made it like this (Swift 5)

    private var imgMagnifyingglass: UIImageView = {
    var img = UIImageView()
    img.image = UIImage(systemName: "magnifyingglass")?.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 32))
    img.contentMode = .left //that is important for proper image displaying 
    img.translatesAutoresizingMaskIntoConstraints = false
    return img
}()

especially img.contentMode = .left you can play with it to fulfill your needs

Lobotomy