Add views in UIStackView programmatically Add views in UIStackView programmatically ios ios

Add views in UIStackView programmatically


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)


Swift 5.0

//Image Viewlet imageView = UIImageView()imageView.backgroundColor = UIColor.blueimageView.heightAnchor.constraint(equalToConstant: 120.0).isActive = trueimageView.widthAnchor.constraint(equalToConstant: 120.0).isActive = trueimageView.image = UIImage(named: "buttonFollowCheckGreen")//Text Labellet textLabel = UILabel()textLabel.backgroundColor = UIColor.yellowtextLabel.widthAnchor.constraint(equalToConstant: self.view.frame.width).isActive = truetextLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = truetextLabel.text  = "Hi World"textLabel.textAlignment = .center//Stack Viewlet stackView   = UIStackView()stackView.axis  = NSLayoutConstraint.Axis.verticalstackView.distribution  = UIStackView.Distribution.equalSpacingstackView.alignment = UIStackView.Alignment.centerstackView.spacing   = 16.0stackView.addArrangedSubview(imageView)stackView.addArrangedSubview(textLabel)stackView.translatesAutoresizingMaskIntoConstraints = falseself.view.addSubview(stackView)//ConstraintsstackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = truestackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

Based on @user1046037 answer.


In Swift 4.2

let redView = UIView()redView.backgroundColor = .redlet blueView = UIView()blueView.backgroundColor = .bluelet stackView = UIStackView(arrangedSubviews: [redView, blueView])stackView.axis = .verticalstackView.distribution = .fillEquallyview.addSubview(stackView)// stackView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)// autolayout constraintstackView.translatesAutoresizingMaskIntoConstraints = falseNSLayoutConstraint.activate([    stackView.topAnchor.constraint(equalTo: view.topAnchor),    stackView.leftAnchor.constraint(equalTo: view.leftAnchor),    stackView.rightAnchor.constraint(equalTo: view.rightAnchor),    stackView.heightAnchor.constraint(equalToConstant: 200)])