Custom UIView won't take up entire screen width as should

632 views Asked by At

I've been cracking my head around this for days now and can't find what the issue is -.-

I have a MainActionButton which is a custom UIView that I created. These are the constraints I defined to it:

[enter image description here]

I need it to appear twice on the page as a signup and login buttons, one under the other. This is how it is supposed to look:

desired look of the two custom IUView

First problem I encountered was that for some reason, unless I put each button inside a StackView of its own - they refuse to be placed where I tell them to. Only inside stackViews they obey to stand at the bottom of the screen.

Current issue - even though the stackView is define to be aligned to the sides of the screen (with 20 margin each side) the custom UIView insist not to take on the full width as they should! This is what it looks like:

current look of the two custom UIViews

  • My code of the custom ui is super generic:
protocol MainActionButtonDelegate {
    func actionButtonDidPress(btnText: String)
}

class MainActionButtonView: UIView {
    
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var entireButton: UIView!
    @IBOutlet weak var buttonLabel: UILabel!
    @IBOutlet weak var buttonIcon: UIImageView!
    
    var delegate: MainActionButtonDelegate?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.translatesAutoresizingMaskIntoConstraints = false
        commonInit()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.frame = self.bounds
    }
    
    func commonInit() {
        Bundle.main.loadNibNamed("MainActionButtonView", owner: self, options: nil)
        addSubview(contentView)
        contentView.layer.cornerRadius = contentView.frame.size.height / 2
        contentView.clipsToBounds = true
        
        setGestureRecognizer()
    }
    
    func setGestureRecognizer() {
        contentView.addGestureRecognizer(UITapGestureRecognizer(target: contentView, action: #selector(buttonTapped)))
        contentView.isUserInteractionEnabled = true
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(buttonTapped(tapGestureRecognizer:)))
        contentView.addGestureRecognizer(tapGestureRecognizer)
    }
    
    @objc func buttonTapped(tapGestureRecognizer: UITapGestureRecognizer) {
        delegate?.actionButtonDidPress(btnText: buttonLabel.text!)
    }
}

What am I doing wrong and how can I solve this? Going insane here!

P.S I am using the storyboard

I tried adding different constraints programmatically on the viewDidLoad of the screen's ViewController, but nothing seems to work for me.

Example of my latest attempt:

topButton.contentView.widthAnchor.constraint(equalToConstant: CGFloat(UIScreen.main.bounds.width)).isActive = true

Edit #1: This is what it looks like in the hierarchy diagram of the screen: enter image description here I can see that my StackView (that I was forced to add to be able to place the button) is indeed the width of the screen, but then the View of the custom UIView doesn't get the same width (even though inside its swift file I constrained it to align to the leading and trailing of the superview)

0

There are 0 answers