UIStackView inside UIScrollview

Question

I've added UIScrollView in which added UIStackView in storyboard. I'm trying to add UIStackView having two UILabels dynamically in parent UIStackView Although i'm giving height of child view ,it takes all the space of parent UIStackView how do i solve this or any other way to achieve this?

My code is

func createSummaryView()
{
    let labelSummary:UILabel = UILabel(frame: CGRectZero)
    labelSummary.text = "Summary"
    labelSummary.heightAnchor.constraintEqualToConstant(30).active = true


    let summaryparentView:UIStackView = UIStackView(frame: CGRectZero)
    summaryparentView.axis = .Vertical
    summaryparentView.alignment = .Leading
    summaryparentView.spacing = 1
    let summaryViewWidth = width!-50
    summaryparentView.heightAnchor.constraintEqualToConstant(180).active = true
    //summaryparentView.heightAnchor.constraintEqualToAnchor(summaryparentView.heightAnchor, multiplier: 2).active = true
    summaryparentView.addArrangedSubview(labelSummary)

    for _ in 1...5
    {
        let viewParent:UIStackView = UIStackView(frame: CGRectZero)
        viewParent.axis = .Horizontal
        viewParent.widthAnchor.constraintEqualToConstant(summaryViewWidth).active = true
        viewParent.heightAnchor.constraintEqualToConstant(30).active = true
        viewParent.distribution = .FillEqually

        let labelTitle:UILabel = UILabel()
        let labelValue:UILabel = UILabel()
        print("summary view width \(summaryViewWidth)")

        labelTitle.text = "BUILD"
        labelValue.text = "2012"
        viewParent.addArrangedSubview(labelTitle)
        viewParent.addArrangedSubview(labelValue)

        summaryparentView.addArrangedSubview(viewParent)
        summaryparentView.translatesAutoresizingMaskIntoConstraints = false
    }

    stackViewVertical.layoutMarginsRelativeArrangement = true
    stackViewVertical.addArrangedSubview(summaryparentView)
    stackViewVertical.translatesAutoresizingMaskIntoConstraints = false
}

where width is width = stackViewVertical.frame.size.width

Have you considered a UICollectionView with a Collection View Flow Layout? Easy to setup in Storyboard. — Greg Robertson

mgyky mgyky · Accepted Answer · 2016-12-20T19:48:48

Maybe this library could help you : https://github.com/gurhub/ScrollableStackView

It's Objective-C and Swift compatible.

Sample Code (Swift)

import ScrollableStackView

var scrollable = ScrollableStackView(frame: view.frame)
view.addSubview(scrollable)

// add your views with 
let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 55))
rectangle.backgroundColor = UIColor.blue
scrollable.stackView.addArrangedSubview(rectangle)
// ...

Sample Code (Objective-C)

@import ScrollableStackView

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame];
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally;
scrollable.stackView.alignment = UIStackViewAlignmentCenter;
scrollable.stackView.axis = UILayoutConstraintAxisVertical;
[self.view addSubview:scrollable];

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)];
[rectangle setBackgroundColor:[UIColor blueColor]];

// add your views with
[scrollable.stackView addArrangedSubview:rectangle]; 
// ...

UIStackView inside UIScrollview

1 Answers