Issue with auto layout

Hello everyone,


I am working with auto layouts for the first time, but I am a but confused. Let me explain you my problem by showing the code I have

func setupView() {
    self.view.translatesAutoresizingMaskIntoConstraints = false
       
    var createdButton = UIButton()
    createdButton.setTitle(CREATED_BUTTON_TITLE, for: .normal)
    createdButton.setTitleColor(DARK_BLUE_COLOR, for: .normal)
    createdButton.backgroundColor = UIColor.white
    createdButton.addTarget(self, action: #selector(fetchMyChallenges), for: .touchDown)
    createdButton.layer.borderWidth = 1.5
    createdButton.layer.borderColor = UIColor.white.cgColor
    self.view.addSubview(createdButton)
       
    createdButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
    createdButton.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: self.view.frame.width / 3).isActive = true
    createdButton.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 60).isActive = true
    createdButton.heightAnchor.constraint(equalTo: self.view.heightAnchor, constant: 54).isActive = true
     ...

So basically, I just want to show a button with some properties set on my view controller. The button appears correctly with the code above, however, the view (self.view) itself is black. I expect it to be black.


My questions:

1.) Do I always have to set translatesAutoresizingMaskIntoConstraints for super views? Like in this case for self.view?

2.) What is actually the correct way of solving it? Is my approach correct? If yes, how I do avoid that black background color?


Best regards,

Nazar Medeiros

Replies

View is probably black because you did not set its bacjground color.


translatesAutoresizingMaskIntoConstraints.

Doc explains this:

When this property is set to

true
, the view’s superview looks at the view’s autoresizing mask, produces constraints that implement it, and adds those constraints to itself (the superview). If your view has flexible constraints that require dynamic adjustment, set this property to
false
and apply the constraints yourself.


If you create constraints (NSConstraint) yourself, you don't need it.


Why don't you set the constraints in IB ? It is muche simpler. You can set it propostional, with multiply, for line 14.

View is probably black because you did not set its bacjground color.


I am setting the background color of the view but it is still black.

If you create constraints (NSConstraint) yourself, you don't need it.

If I remove self.view.translatesAutoresizingMaskIntoConstraints = false, then my button has a wrong position and the background color of the view turns to white.

Why don't you set the constraints in IB ? It is muche simpler. You can set it propostional, with multiply, for line 14.

My view will be much more complex with sub views etc. I thought, doing some layout stuff with IB and the rest programmatically could be confusing. I want to stick to one UI creation approach and that would be the programmatically way.

You don't show much code, so it is impossible to answer some questions on view color.

Where do you set the color ? How ?


I was not clear in my explanation on self.view.translatesAutoresizingMaskIntoConstraints.


Doc explains this:

When this property is set to

true
, the view’s superview looks at the view’s autoresizing mask, produces constraints that implement it, and adds those constraints to itself (the superview). If your view has flexible constraints that require dynamic adjustment, set this property to
false
and apply the constraints yourself.


That means you don't need self.view.translatesAutoresizingMaskIntoConstraints

IF you set constraints (that's not what you are doing here, you set anchors)

Hi Claude31,


please have a look at the updated code:

func setupView() {
        // background color of view
        self.view.backgroundColor = DARK_BLUE_COLOR
           
        self.view.translatesAutoresizingMaskIntoConstraints = false
        createdButton.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(createdButton)
        
        createdButton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        createdButton.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: self.view.frame.width / 3).isActive = true
        createdButton.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 60).isActive = true
        createdButton.heightAnchor.constraint(equalTo: self.view.heightAnchor, constant: 54).isActive = true
       
        createdButton.setTitle(CREATED_BUTTON_TITLE, for: .normal)
        createdButton.setTitleColor(DARK_BLUE_COLOR, for: .normal)
        createdButton.backgroundColor = UIColor.white
        createdButton.addTarget(self, action: #selector(fetchMyChallenges), for: .touchDown)
      //  createdButton.title
        createdButton.layer.borderWidth = 1.5
        createdButton.layer.borderColor = UIColor.white.cgColor
    }

w I do avoid that black background color?


You mean of the superview or of the button ?


Changing the backgroundcolor this way doesn't work.

have a look here:

https://stackoverflow.com/questions/14523348/how-to-change-the-background-color-of-a-uibutton-while-its-highlighted

Hi Claude31,


thanks for the reply. I meant the background color of the superview (self.view) actually.

BTW: The way I am changing the background color of my button works the way as you can see above.

Ok, clear (sorry my previous post was messed up, probably a mishandling on the first line, which is totally meaningless…)


I tested


          self.view.backgroundColor = .systemBlue


It works perfectly OK.


How did you define DARK_BLUE_COLOR ?

Could you try with another color as .systemBlue, or .blue ?

I have it like this:

let DARK_BLUE_COLOR = UIColor(red: 10.0/255.0, green: 120.0/255.0, blue: 147.0/255.0, alpha: 1)

defined as a constant to be used everywhere.