Programmatically adding constraints breaks auto layout constraints

Question

Edit 1

Hello, This is my first time using code to add constraints. I normally just use interface builder. I am trying to add a vertical UISlider, before I thought that mixing visually added constraints was interfering with coded constraints. I have now updated my code and therefore this question to create constrains using ONLY code in this particular view container.

What I have done is I created a view directly underneath another view. I created 3 small views inside that that match the width of the textfields in the view above and then spaced them out the same as how the textfields are spaced out.

For testing purposes only I gave these 3 small views a color to see if it worked, and it does.

When I actually finish the app those red, green, and blue views will be clear. The only reason I wanted them was so when I create the sliders I can constrain each one of them to the center of the view...which is how the labels above the textfields are constrained.

Here is the code for this which works

    // Mark: Hidden View

    let leftHiddenView = UIView()
    let centerHiddenView = UIView()
    let rightHiddenView = UIView()

    let hiddenViews = [leftHiddenView, centerHiddenView, rightHiddenView]

    for views in hiddenViews {

        views.translatesAutoresizingMaskIntoConstraints = false
        sliderContainer.addSubview(views)
        views.backgroundColor = .white

        let widthConstraint = views.widthAnchor.constraint(equalToConstant: 35)
        let heightConstraint = views.heightAnchor.constraint(equalToConstant: 5)

        NSLayoutConstraint.activate([widthConstraint, heightConstraint])
    }

    let centerViewHorizontalConstraint = centerHiddenView.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
    let centerViewTopConstraint = centerHiddenView.topAnchor.constraint(equalTo: sliderContainer.topAnchor, constant: 50)

    NSLayoutConstraint.activate([centerViewHorizontalConstraint, centerViewTopConstraint])

    let leftViewVerticalCenterConstraint = leftHiddenView.centerYAnchor.constraint(equalTo: centerHiddenView.centerYAnchor, constant: 0)
    let leftViewTrailingConstraint = leftHiddenView.trailingAnchor.constraint(equalTo: centerHiddenView.leadingAnchor, constant: -60)


    NSLayoutConstraint.activate([leftViewVerticalCenterConstraint, leftViewTrailingConstraint])

    let rightViewVerticalCenterConstraint = rightHiddenView.centerYAnchor.constraint(equalTo: centerHiddenView.centerYAnchor, constant: 0)
    let rightViewTrailingConstraint = rightHiddenView.leadingAnchor.constraint(equalTo: centerHiddenView.trailingAnchor, constant: 60)

    NSLayoutConstraint.activate([rightViewVerticalCenterConstraint, rightViewTrailingConstraint])

Now, I started to add a UISlider as vertical. And the exact same thing that happened before happened now.

As you can see everything breaks.

Here is the code thus far on that

    // Mark: Slider View

    let leftSlider = UISlider()
    let centerSlider = UISlider()
    let rightSlider = UISlider()

    let colorSliders = [leftSlider, centerSlider, rightSlider]

    for slider in colorSliders {

        slider.translatesAutoresizingMaskIntoConstraints = false
        sliderContainer.addSubview(slider)

        let w = sliderContainer.bounds.width
        slider.bounds.size.width = w
        slider.center = CGPoint(x: w/2, y: w/2)
        slider.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_2))

        slider.value = 0
        slider.minimumValue = 0
        slider.maximumValue = 255

        let sliderTopConstraint = slider.topAnchor.constraint(equalTo: centerHiddenView.bottomAnchor, constant: 5)
        let sliderBottomConstraint = slider.bottomAnchor.constraint(equalTo: sliderContainer.bottomAnchor, constant: 5)

        NSLayoutConstraint.activate([sliderTopConstraint, sliderBottomConstraint])
        slider.backgroundColor = .purple

    }

    let centerSliderHorizontalConstraints = centerSlider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)
    NSLayoutConstraint.activate([centerSliderHorizontalConstraints])

I mean its not only breaking its own container but a separate container too — RubberDucky4444, Dec 06 '16 at 02:22

score 1 · Answer 1 · answered Dec 05 '16 at 09:40

1

Don't ever misc the Design time constraints with adding Runtime constraints. Either add all constraints at design time or all constraints at runtime only. Else you will be in MESS. Make this as a good practice.

In case you need to change the frame, just change the constant property of the constraints and add all the required constraint at design time.

There will be very rare times when you need to add runtime constraints. (I am saying this because I always design in that way only. And that helps me a lot.) Design your screen in such a ways that even if you need to add 2 controls for dynamic UI changes, then keep 2 controls and do show hide with that controls. In can you need some kind of Animation with your controls, you don't need to change design time constraints.

I know this does not answer your question directly, but hope you will get the understanding of how to use constraints.

From your screenshot, I am not able understand exactly what is your UI looks like. Can you give little bit more idea of how your UI looks like? so that I can suggest some idea of how to give constraints...

answered Dec 05 '16 at 09:40

DShah

9,768
11
71
127

Hi, yes so the UI is basically on the top row 3 UILabels: R, G, B. Directly beneath each UILabel is a UITextField. What I am trying to accomplish is adding a vertical UISlider directly beneath EACH UITextField. And each column, that is the R, the textfield beneath it, and the added slider will be horizontally centered to each other, and the same for the G and the B – RubberDucky4444 Dec 05 '16 at 09:44
Have you tried keeping translatesAutoresizingMaskIntoConstraints= true? – DShah Dec 05 '16 at 10:21
Yes, made it worse – RubberDucky4444 Dec 05 '16 at 10:22
ohk... then can you please try http://stackoverflow.com/questions/13706255/cgaffinetransform-and-scaling-to-center-of-the-image/15607895#15607895. It seems to be CGAffineTransform is your main culprit for your issue. Due to that you are facing issue with AutoLayout. So, try to play with anchorpoint if that helps... – DShah Dec 05 '16 at 10:25
http://stackoverflow.com/questions/12943107/how-do-i-adjust-the-anchor-point-of-a-calayer-when-auto-layout-is-being-used/14105757#14105757 – DShah Dec 05 '16 at 10:26
One more found on SO: http://stackoverflow.com/questions/20758321/vertical-uislider-in-ios-with-autolayout – DShah Dec 05 '16 at 10:28

score 0 · Answer 2 · answered Dec 06 '16 at 02:31

Well, it turns out that the problem was actually quite easy to solve from the beginning. I only overlooked it because of being intimidated by the vertical UISlider. Since I did not give the above container a fixed height when I added the container below it and ran the app, the containers equally filled the space and the contents inside messed up accordingly. I simply gave the top container with just the labels and textfield a fixed height of 61 and its now much closer to being done. Sorry

Programmatically adding constraints breaks auto layout constraints

2 Answers2