Search code examples
iosobjective-cios9uistackview

Add views in UIStackView programmatically


I'm trying to add views in UIStackView programmatically. For now My code is:

UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor blackColor];
[view1 setFrame:CGRectMake(0, 0, 100, 100)];

UIView *view2 =  [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
[view2 setFrame:CGRectMake(0, 100, 100, 100)];

[self.stack1 addArrangedSubview:view1];
[self.stack1 addArrangedSubview:view2];

When i deploy the app, there is only 1 view and it is with black colour.(view1 get the parameters for view2 too)


Solution

  • Stack views use intrinsic content size, so use layout constraints to define the dimensions of the views.

    There is an easy way to add constraints quickly (example):

    [view1.heightAnchor constraintEqualToConstant:100].active = true;
    

    Complete Code:

    - (void) setup {
    
        //View 1
        UIView *view1 = [[UIView alloc] init];
        view1.backgroundColor = [UIColor blueColor];
        [view1.heightAnchor constraintEqualToConstant:100].active = true;
        [view1.widthAnchor constraintEqualToConstant:120].active = true;
    
    
        //View 2
        UIView *view2 = [[UIView alloc] init];
        view2.backgroundColor = [UIColor greenColor];
        [view2.heightAnchor constraintEqualToConstant:100].active = true;
        [view2.widthAnchor constraintEqualToConstant:70].active = true;
    
        //View 3
        UIView *view3 = [[UIView alloc] init];
        view3.backgroundColor = [UIColor magentaColor];
        [view3.heightAnchor constraintEqualToConstant:100].active = true;
        [view3.widthAnchor constraintEqualToConstant:180].active = true;
    
        //Stack View
        UIStackView *stackView = [[UIStackView alloc] init];
    
        stackView.axis = UILayoutConstraintAxisVertical;
        stackView.distribution = UIStackViewDistributionEqualSpacing;
        stackView.alignment = UIStackViewAlignmentCenter;
        stackView.spacing = 30;
    
    
        [stackView addArrangedSubview:view1];
        [stackView addArrangedSubview:view2];
        [stackView addArrangedSubview:view3];
    
        stackView.translatesAutoresizingMaskIntoConstraints = false;
        [self.view addSubview:stackView];
    
    
        //Layout for Stack View
        [stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
        [stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
    }
    

    Note: This was tested on iOS 9

    UIStackView Equal Spacing (centered)