Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine UIStackView contentsize

Is there a simple way to get the total content size of a UIStackView?


To give an example:

I programmatically create an array of UIViews...

var numberOfSubViews = 5

let subViews: [UIView] = {
var array: [UIView] = []

for _ in 0..<numberOfSubViews {
    let height: CGFloat = 40
    let width: CGFloat = 100

    let subView = UIView(frame: CGRect(x: 0, y: 0, width: width, height: height))
    subView.widthAnchor.constraint(equalToConstant: width).isActive = true
    subView.heightAnchor.constraint(equalToConstant: height).isActive = true

    array.append(subView)
}

return array
}()

Then I create a simple UIStackView from that array...

var spacing: CGFloat = 4

let stackView = UIStackView(arrangedSubviews: subViews)
stackView.axis = .horizontal
stackView.spacing = spacing
stackView.translatesAutoresizingMaskIntoConstraints = false;

Finally I insert the stackView in an existing view and anchor the top and leading.

view.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true

Note that I purposely do not define a height and width constraint or the bottom and trailing constraints. I don't want the subViews or the spacing to be resized based on the stackViews distribution property.

In this simple example, the total content height is 40 (height of the tallest subView).

Total width = width of all subviews + width of all spacing = (100 * 5) + (4 * 4) = 516


When I initialize the subView in this way, the UIStackView's frame and bounds is 0,0,0,0.

like image 425
HNK Avatar asked Mar 19 '17 04:03

HNK


People also ask

What is a UIStackView?

A streamlined interface for laying out a collection of views in either a column or a row.

How remove all Subviews from Stackview?

Managing Subviews To remove an arranged subview that you no longer want around, you need to call removeFromSuperview() on it. The stack view will automatically remove it from the arranged subview list.

What is Stackview alignment?

A layout where the stack view aligns the center of its arranged views with its center along its axis. case leading. A layout for vertical stacks where the stack view aligns the leading edge of its arranged views along its leading edge.

How do I use Stackview?

Xcode provides two ways to use stack view: You can drag a Stack View (horizontal / vertical) from the Object library, and put it right into the storyboard. You then drag and drop view objects such as labels, buttons, image views into the stack view. Alternatively, you can use the Stack option in the auto layout bar.


1 Answers

Your example is runs fine on simulator iOS 11.3
use this to get your desired width, after adding you constraints

stackView.layoutIfNeeded() print("width: ", stackView.bounds.width)

add subView.backgroundColor = .red to debug you views

like image 92
ChanOnly123 Avatar answered Oct 11 '22 01:10

ChanOnly123