Programmatic UIButton Constraints Not Working - ios

Question

I'm building a view programmatically where a blue button is supposed to be laid out in the center of the screen under a user image, but it's getting constrained to the top left corner every time. I have self.translatesAutoresizingMaskIntoConstraints set to false in the init method of this view. Here is my code where I restrain this button:
addSubview(continueMessagingButton)
continueMessagingButton.anchor(top: currentUserImage.bottomAnchor, leading: leadingAnchor, bottom: nil, trailing: trailingAnchor, padding: .init(top: 32, left: 48, bottom: 0, right: 48), size: .init(width: 0, height: 60))
continueMessagingButton.layer.cornerRadius = 30
Here is an image of what's happening:
Please help thank you!
full code:
import UIKit
import FirebaseCore
import FirebaseAuth
import FirebaseDatabase
import FirebaseStorage
import FirebaseAnalytics
class MatchView: UIView {
var userId: String! {
didSet {
API.User.observeCurrentUser { (user) in
self.currentUserImage.sd_setImage(with: URL(string:
user.profileImages!.first!))
self.currentUserImage.alpha = 1
}
API.User.observeUsers(withId: userId) { (user) in
self.otherUserImage.sd_setImage(with: URL(string:
user.profileImages!.first!))
self.otherUserImage.alpha = 1
}
}
}
let partyPopperImage: UIImageView = {
let imageView = UIImageView(image: #imageLiteral(resourceName:
"party-popper-emoji"))
imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true
return imageView
}()
var username: String! {
didSet {
descriptionLabel.text = "Congratulations!\n\(username!) is
interested in you!"
}
}
let descriptionLabel: UILabel = {
let label = UILabel()
label.text = ""
label.lineBreakMode = .byWordWrapping
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.08732911403, green:
0.7221731267, blue: 1, alpha: 1)
label.font = UIFont(name: "Avenir-Medium", size: 19)
label.numberOfLines = 0
return label
}()
let currentUserImage: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.borderWidth = 2
imageView.layer.borderColor = #colorLiteral(red: 0.08732911403,
green: 0.7221731267, blue: 1, alpha: 1)
imageView.alpha = 0
return imageView
}()
let otherUserImage: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
imageView.layer.borderWidth = 2
imageView.layer.borderColor = #colorLiteral(red: 0.08732911403,
green: 0.7221731267, blue: 1, alpha: 1)
imageView.alpha = 0
return imageView
}()
let continueMessagingButton: UIButton = {
let button = GlympsGradientButton(type: .system)
button.setTitle("CONTINUE MESSAGING", for: .normal)
button.setTitleColor(#colorLiteral(red: 1, green: 1, blue: 1,
alpha: 1), for: .normal)
button.backgroundColor = #colorLiteral(red: 0.08732911403, green: 0.7221731267, blue: 1, alpha: 1)
button.clipsToBounds = true
return button
}()
let messageLaterButton: UIButton = {
let button = GlympsGradientBorderButton(type: .system)
button.setTitle("Message Later", for: .normal)
button.setTitleColor(#colorLiteral(red: 0.08732911403, green:
0.7221731267, blue: 1, alpha: 1), for: .normal)
button.clipsToBounds = true
button.backgroundColor = .clear
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
continueMessagingButton.translatesAutoresizingMaskIntoConstraints =
true
setupBlurView()
setupLayout()
//setupAnimations()
let tap = UIGestureRecognizer(target: self, action:
#selector(handleDismiss))
self.addGestureRecognizer(tap)
}
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style:
.light))
func setupAnimations() {
let angle = 30 * CGFloat.pi / 180
currentUserImage.transform = CGAffineTransform(rotationAngle: -
angle).concatenating(CGAffineTransform(translationX: 200, y: 0))
otherUserImage.transform = CGAffineTransform(rotationAngle:
angle).concatenating(CGAffineTransform(translationX: -200, y: 0))
continueMessagingButton.transform = CGAffineTransform(translationX:
-500, y: 0)
messageLaterButton.transform = CGAffineTransform(translationX: 500,
y: 0)
UIView.animateKeyframes(withDuration: 1.3, delay: 0, options:
.calculationModeCubic, animations: {
UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration:
0.45, animations: {
self.currentUserImage.transform =
CGAffineTransform(rotationAngle: -angle)
self.otherUserImage.transform =
CGAffineTransform(rotationAngle: angle)
})
UIView.addKeyframe(withRelativeStartTime: 0.8,
relativeDuration: 0.5, animations: {
self.currentUserImage.transform = .identity
self.otherUserImage.transform = .identity
})
}) { (_) in
}
UIView.animate(withDuration: 0.75, delay: 0.6 * 1.3,
usingSpringWithDamping: 0.5, initialSpringVelocity: 0.1, options:
.curveEaseOut, animations: {
self.continueMessagingButton.transform = .identity
self.messageLaterButton.transform = .identity
})
}
func setupLayout() {
addSubview(partyPopperImage)
addSubview(descriptionLabel)
addSubview(currentUserImage)
addSubview(otherUserImage)
addSubview(continueMessagingButton)
//addSubview(messageLaterButton)
partyPopperImage.anchor(top: nil, leading: nil, bottom:
descriptionLabel.topAnchor, trailing: nil, padding: .init(top: 0, left:
0, bottom: 16, right: 0), size: .init(width: 150, height: 150))
partyPopperImage.centerXAnchor.constraint(equalTo:
self.centerXAnchor).isActive = true
descriptionLabel.anchor(top: nil, leading: self.leadingAnchor,
bottom: currentUserImage.topAnchor, trailing: trailingAnchor, padding:
.init(top: 0, left: 0, bottom: 32, right: 0), size: .init(width: 0,
height: 80))
currentUserImage.anchor(top: nil, leading: nil, bottom: nil,
trailing: centerXAnchor, padding: .init(top: 0, left: 0, bottom: 0,
right: 16), size: .init(width: 140, height: 140))
currentUserImage.layer.cornerRadius = 70
currentUserImage.centerYAnchor.constraint(equalTo:
centerYAnchor).isActive = true
otherUserImage.anchor(top: nil, leading: centerXAnchor, bottom:
nil, trailing: nil, padding: .init(top: 0, left: 16, bottom: 0, right:
0), size: .init(width: 140, height: 140))
otherUserImage.layer.cornerRadius = 70
otherUserImage.centerYAnchor.constraint(equalTo:
centerYAnchor).isActive = true
continueMessagingButton.anchor(top: currentUserImage.bottomAnchor,
leading: leadingAnchor, bottom: nil, trailing: trailingAnchor, padding:
.init(top: 32, left: 48, bottom: 0, right: 48), size: .init(width: 0,
height: 60))
continueMessagingButton.layer.cornerRadius = 30
// messageLaterButton.anchor(top:
continueMessagingButton.bottomAnchor, leading:
continueMessagingButton.leadingAnchor, bottom: nil, trailing:
continueMessagingButton.trailingAnchor, padding: .init(top: 16, left:
0, bottom: 0, right: 0), size: .init(width: 0, height: 60))
// messageLaterButton.layer.cornerRadius = 30
self.layoutIfNeeded()
}
func setupBlurView() {
addSubview(visualEffectView)
visualEffectView.fillSuperview()
visualEffectView.alpha = 0
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping:
1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.visualEffectView.alpha = 1
}) { (_) in
}
}
#objc func handleDismiss() {
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping:
1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
self.alpha = 0
}) { (_) in
self.removeFromSuperview()
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

Answer 1

I've figured out the issue. For my gradient colors I had:
let leftColor = UIColor.blue
let rightColor = UIColor.green
gradientLayer.colors = [leftColor, rightColor]
Once I added .cgColor to the ends of these, it worked:
gradientLayer.colors = [leftColor.cgColor, rightColor.cgColor]
Super minor, but this fixed the gradient!
I also needed to change the frame from
self.frame
to
gradientLayer.frame
Also minor, but this fixed the button location.