how to add image view with some constraints programmatically using swift?

Question

I am new in iOS Development. If using storyboard, I can place an Image view in view controller like this

I need to make something like that programmatically.

so I have custom view from a library called RevealingSplashView , but I need to add an image view to that custom UI View. I just know to add the image view, maybe something like this

let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)

but I don't know how to set that constraint to image view to

a. align to center x to superview

b. proportional width to superview 0.8

c. height constraint = 25

d. align bottom to safe area = 32

how to do that ?

here is the code I use before want to add image view

let screenSize = UIScreen.main.bounds
            let iconWidth = (screenSize.width) * 0.8
            let iconHeight = iconWidth * 1 // ratio 1:1
            revealingSplashView = RevealingSplashView(iconImage: UIImage(named: "Loading Page Asset")!,iconInitialSize: CGSize(width: iconWidth, height: iconHeight), backgroundColor: AppColor.mainYellow.getUIColor())
            revealingSplashView.animationType = SplashAnimationType.twitter
            revealingSplashView.imageView?.contentMode = .scaleAspectFill


            // add loading indicator to RevealingSplashView Programatically
            revealingSplashViewIndicator.color = UIColor.white
            revealingSplashViewIndicator.frame = CGRect(x: 0.0, y: 0.0, width: 30.0, height: 30.0)
            revealingSplashViewIndicator.center =  CGPoint(x: self.view.center.x, y: self.view.center.y + (iconHeight/2) + 64 )
            revealingSplashView.addSubview(revealingSplashViewIndicator)
            revealingSplashViewIndicator.bringSubviewToFront(self.revealingSplashView)
            revealingSplashViewIndicator.startAnimating()

            let window = UIApplication.shared.keyWindow
            window?.addSubview(revealingSplashView)

Milan Nosáľ · Accepted Answer · 2019-04-30 10:33:32Z

5

I recommend using anchors:

let imageName = "yourImage.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 200)
revealingSplashView.addSubview(imageView)

// you need to turn off autoresizing masks (storyboards do this automatically)
imageView.translatesAutoresizingMaskIntoConstraints = false

// setup constraints, it is recommended to activate them through `NSLayoutConstraint.activate`
// instead of `constraint.isActive = true` because of performance reasons
NSLayoutConstraint.activate([
    imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor),
    imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8),
    imageView.heightAnchor.constraint(equalToConstant: 25),
    imageView.bottomAnchor.constraint(equalTo: revealingSplashView.safeAreaLayoutGuide.bottomAnchor, constant: -32),
    ])

edited Apr 30, 2019 at 10:33

answered Apr 30, 2019 at 8:14

Milan Nosáľ

19.8k6 gold badges62 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Agung Over a year ago

unfortunately it makes crash to my app: *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Unable to activate constraint with anchors <NSLayoutYAxisAnchor:0x283c9b7c0 "UIImageView:0x104057cd0.bottom"> and <NSLayoutYAxisAnchor:0x283c36e40 "UILayoutGuide:0x281e48620'UIViewSafeAreaLayoutGuide'.bottom"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'

Milan Nosáľ Over a year ago

@Alexa289 you have to add revealingSplashView as a subview of the self.view before activating constraints.. so make sure somewhere before adding those constraints you call self.view.addSubview(revealingSplashView)

Milan Nosáľ Over a year ago

@Alexa289 I have updated the answer.. if there is something else you have in mind regarding the view hierarchy why this is not possible, I suggest you update the question to reflect that

Agung Over a year ago

I have tried to add your code like this: i.sstatic.net/uiexP.png , it is no longer crash, but I don't know why the image shows in the top of the screen like this i.sstatic.net/8eepT.jpg

Milan Nosáľ Over a year ago

@Alexa289 did you set up constraints for the revealingSplashView? it has to have constraints too.. I assumed you already did that.. update the question to show how you want to constrain the revealingSplashView

|

Alastar · Accepted Answer · 2019-04-30 08:17:35Z

1

To add constraints programmatically you need to set

imageView.translatesAutoresizingMaskIntoConstraints = false

then you can set the constraints:

imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

if you want to activate constraints you need to set

isActive = true

also if you support iOS < 11 you need to put a control because you don't have the safeArea

answered Apr 30, 2019 at 8:17

Alastar

1,3841 gold badge8 silver badges15 bronze badges

2 Comments

Agung Over a year ago

unfortunately it makes crash to my app, error message: *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Unable to activate constraint with anchors <NSLayoutDimension:0x280d18f80 "UIImageView:0x10483ad70.width"> and <NSLayoutDimension:0x280d18cc0 "RevealingSplashView.RevealingSplashView:0x1048648d0.width"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.'

Alastar Over a year ago

did you added revealingSplashView to your view?

iDevid · Accepted Answer · 2019-04-30 09:57:17Z

0

revealingSplashView.addSubview(imageView)

imageView.centerXAnchor.constraint(equalTo: revealingSplashView.centerXAnchor).isActive = true
imageView.widthAnchor.constraint(equalTo: revealingSplashView.widthAnchor, multiplier: 0.8).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
imageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
imageView.translatesAutoresizingMaskIntoConstraints = false

edited Apr 30, 2019 at 9:57

answered Apr 30, 2019 at 8:13

iDevid

5173 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to add image view with some constraints programmatically using swift?

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related