4

I am working on the Implementing A Custom Control iOS tutorial (I would link it but I'm not allowed to use more than two links).

I am at the point where I have 5 buttons generate within a StackView. I implemented these constraints for each button:

button.translatesAutoresizingMaskIntoConstraints = false
button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true

I entered all code exactly as specified, but when I run the app, the buttons fill the stack view vertically and horizontally:

enter image description here

If I set the StackView's alignment property to Top, I can prevent the buttons from stretching vertically, but the last button is still stretched horizontally:

enter image description here

I have tried many different methods for preventing the last button being stretched to no avail. In the console, I see that the size constraints are being overridden, but I cannot figure out by what.

I would like these buttons to maintain the specified height and width (44) within the StackView. Any ideas on how to do this? I can give more info if needed.

wazawoo
  • 545
  • 5
  • 18
  • Can you try deleting this `button.translatesAutoresizingMaskIntoConstraints = false`? – nayem Apr 28 '17 at 04:49
  • Unfortunately I have tried that and it gives the same results. – wazawoo Apr 28 '17 at 05:01
  • What are the attributes of your stack view? – nayem Apr 28 '17 at 05:11
  • Hopefully [this](http://imgur.com/a/0Pn6D) is what you're looking for. Let me know if it isn't. – wazawoo Apr 28 '17 at 05:28
  • Try the **Distribution** property of stack view with `Fill Equally` or `Fill Proportionally`. – nayem Apr 28 '17 at 05:56
  • Fill Equally gives the buttons equal widths, but stretches each one so that the whole stack view is filled horizontally. Fill Proportionally does not appear to change anything. – wazawoo Apr 28 '17 at 06:03
  • " last button is still stretched horizontally" because last button is not equal width as the other buttons. – DHEERAJ Apr 28 '17 at 06:15
  • Yes but I set the same width constraint for all of them. It is getting overridden for some unknown reason. – wazawoo Apr 28 '17 at 06:17

3 Answers3

3

Try this it's working fine. 

-(void)makeFiveButton {

UIButton *button1 = [[UIButton alloc]init];
button1.backgroundColor = [UIColor greenColor];
UIButton *button2 = [[UIButton alloc]init];
button2.backgroundColor = [UIColor redColor];
UIButton *button3 = [[UIButton alloc]init];
button3.backgroundColor = [UIColor yellowColor];
UIButton *button4 = [[UIButton alloc]init];
button4.backgroundColor = [UIColor purpleColor];
UIButton *button5 = [[UIButton alloc]init];
button5.backgroundColor = [UIColor brownColor];



UIStackView *stackView = [[UIStackView alloc]init];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
stackView.alignment = UIStackViewAlignmentFill;
stackView.spacing = 10;


[stackView addArrangedSubview:button1];
[stackView addArrangedSubview:button2];
[stackView addArrangedSubview:button3];
[stackView addArrangedSubview:button4];
[stackView addArrangedSubview:button5];
[self.view addSubview:stackView];

button1.translatesAutoresizingMaskIntoConstraints = NO;
button2.translatesAutoresizingMaskIntoConstraints = NO;
button3.translatesAutoresizingMaskIntoConstraints = NO;
button4.translatesAutoresizingMaskIntoConstraints = NO;
button5.translatesAutoresizingMaskIntoConstraints = NO;
stackView.translatesAutoresizingMaskIntoConstraints = NO;


[button1.heightAnchor constraintEqualToConstant:44].active = true;
[button1.widthAnchor constraintEqualToConstant:44].active = true;

[button2.heightAnchor constraintEqualToConstant:44].active = true;
[button2.widthAnchor constraintEqualToConstant:44].active = true;

[button3.heightAnchor constraintEqualToConstant:44].active = true;
[button3.widthAnchor constraintEqualToConstant:44].active = true;

[button4.heightAnchor constraintEqualToConstant:44].active = true;
[button4.widthAnchor constraintEqualToConstant:44].active = true;

[button5.heightAnchor constraintEqualToConstant:44].active = true;
[button5.widthAnchor constraintEqualToConstant:44].active = true;

[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;

}
elk_cloner
  • 2,049
  • 1
  • 12
  • 13
  • Sorry for objective C. – elk_cloner Apr 28 '17 at 06:49
  • Looking through your code, mine was identical except I hadn't set the translatesAutoresizingMaskIntoConstraints property to false for the stack view itself. That fixed the resizing issue, but made all the buttons appear at the top of the window. I had to add constraints for the stack view spacing from other elements in the window, and now it works perfectly. Thanks! – wazawoo Apr 28 '17 at 07:12
  • Upvoted for the unusually pleasant looking Objective-C code. – RLoniello Dec 30 '17 at 21:20
0

I had a similar problem but the selected answer did not work for me. I was able to fix it by setting the alignment to leading and distrbution to equalSpacing:

private func setupButtons() {
    // My Fix
    self.alignment = .leading
    self.distribution = .equalSpacing

    for _ in 0..<5 {
        let button = UIButton()
        button.backgroundColor = UIColor.red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
        button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true
        button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
        addArrangedSubview(button)
    }
}

OR through IB:

enter image description here

uesports135
  • 1,083
  • 2
  • 16
  • 25
-5

everything will work later, if you follow manual

Sat
  • 29
  • 2