Custom View - self.frame is not correct?

10
votes

So I have a custom UIView class

class MessageBox: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        createSubViews()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        createSubViews()
    }
    func createSubViews() {

        let testView = UIView(frame: self.frame)
        testView.backgroundColor = UIColor.brown
        self.addSubview(testView)
    }
}

I added a UIView inside the storyboard and gave it some constraints:

100 from the top (superview), 0 from the left and right, height is 180

But when I run the app the brown subview I created in the code is way to big. I printed self.frame in my custom view and it turns out that the frame is (0,0,1000,1000). But why? I set constraints, it should be something like (0,0,deviceWith, 180).

enter image description here

What did I do wrong?

EDIT: That's my Storyboard setup:

enter image description here

4
iosswiftuiviewstoryboard
try to constraint the brownView to its superView with 0 for all four edges! - Teja Nandamuri
Same result. I think it's because the superview's frame is (0,0,1000,1000) though it should not be that - Quantm
DId you set the superview constraints properly in IB ? PLease add screenshot of how you set the constrints. - Teja Nandamuri
I edited my question and added a screenshot - Quantm
try to call the method in layoutSubViews method. - Teja Nandamuri

4 Answers

24
votes

Short and simple answer:

You're doing it too early.

Detailed answer:

When a view is initialized from an Interface Builder file (a xib or a storyboard) its frame is initially set to the frame it has in Interface Builder. You can look at it as a temporary placeholder.

When using Auto Layout the constraints are resolved (= the view's actual frame is computed) inside the view's layoutSubviews() method.

Thus, there are two possible solutions for your problem:

  1. (preferrable) If you use Auto Layout, use it throughout your view.

    • Either add your testView in Interface Builder as well and create an outlet for it
    • or create your testView in code as you do, then set its translatesAutoResizingMaskIntoConstraints property to false (to sort of "activate Auto Layout") and add the required constraints for it in code.

  2. Set your testView's frame after the MessageBox view's frame itself has been set by the layout engine. The only place where you can be sure that the system has resolved the view's frame from the constraints is when layoutSubviews() is called.

    override func layoutSubviews() {
    super.layoutSubviews()
    testView.frame = self.frame
}

    (You need to declare your testView as a property / global variable, of course.)

1
votes

Try to use the anchors for your view: 

MessageBox.centerXAnchor.constraintEqualToAnchor(self.view.centerXAnchor).active
= true 
MessageBox.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor).active
= true 
MessageBox.widthAnchor.constraintEqualToConstant(150).active = true 
MessageBox.heightAnchor.constraintEqualToConstant(100).active = true

This method have to be used inside your class

1
votes
override func layoutSubviews() {
    super.layoutSubviews()
    testView.frame = self.frame
}

this also works when you add a custom class to a UIView in the storyboard and that uses autolayout. thanks Mischa !

0
votes

try to add a height and width constraint relative to the superview height, with some multiplier.