Relearn AutoLayout (2) — UIStackView

The focus of the StackView

  1. UIStackView is just a container!! (It doesn’tintrinsic content size)
  2. UIStackView is differentdistributionsProperties work differently!! (Fill & fillEqual behave differently!)
  3. Element added to UIStackViewMust behaveIntrinsic Content Size

ScrollView is nested StackView

A few of the keys:

  1. The ScrollView Anchor configures the ViewPort of the ScrollView
  2. The StackView Anchor inside the ScrollView also needs to Pin to the ScrollView size
  3. Row must exist in StackViewIntrinsicContentSize
  4. Row can enforce horizontal constraint OverridesIntrinsicContent.width
{ func setupViews() { navigationItem.title = "Scrollable" let stackView = makeStackView(withOrientation: .vertical) let scrollView = makeScrollView() // scrollView is a stackView. view.addSubview(scrollView) for _ in 1... 30 {let row = RowView () stackView. AddArrangedSubview (row) / / control internal control constraints, external view, To stretch the width row. WidthAnchor. The constraint (equalTo: scrollView.widthAnchor).isActive = true } // Pinning to the sides of view stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true // Pinning scrollview scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true scrollView.bottomAnchor.constraint(equalTo: View. SafeAreaLayoutGuide. BottomAnchor). IsActive = true}} / / custom raow class RowView: UIView {override init (frame: CGRect) { super.init(frame: frame) setupViews() } required init? (coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func setupViews() { let titleLabel = makeLabel(withText: "Gapless Playback") let onOffSwith = makeSwitch(isOn: true) addSubview(titleLabel) addSubview(onOffSwith) // titleLabel titleLabel.topAnchor.constraint(equalTo: topAnchor).isActive = true titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true // offSwitch onOffSwith.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true onOffSwith.centerYAnchor.constraint(equalTo: Titlelabel.centeryanchor). IsActive = true} Intrinsic ContentSize -> for StackView! override var intrinsicContentSize: CGSize { return CGSize(width: 200, height: 31) } }Copy the code

Summary of StackView usage

  1. If we Pin a StackView to a side with certain margins, notice how the contents of the StackView change (definitely different from the result of the Center StackView).

  2. Objects managed by UIStackView must have Intrinsic sizes, so if you want to introduce some custom objects, override the IntrinsicContentSize method.

  3. On the axis, all distribution types except stackView.distribution =.fillequally, Stackview uses arrangedViews intrinsicContentSize to calculate stack axis dimensions!! (Presumably we can calculate the axial length of the StackView with no other external constraints).

    1. fillEquallyMakes all arrangeViews have the same size constraint on the axis!!

  4. On the cross axis, stackView.alignment =.fill is the only alignment type, The StackView is also the size of its interfacing axes using the Layout Views intrinsicContentSize (thus we can presumably calculate the length of the interfacing axes of the StackView with no other external constraints).

    1. .alignment = .fill, the Stack view will stretch all its managed views to match the maximum inherent size of their crossover axes

  5. In addition to managing valid contents, stackSpacerViews can also be added to Anchor to help modify the spacing between different arrangeSubviews!!

  6. When using StackView, there are two common ways to stretch the StackView on the cross axis so that the Anchor of required Priority can Override the Intrinsic Size constraint:

    1. Set widthAnchor directly to StackView
    2. Set an Anchor with cross axis to ArrangeView, the Anchor needs to be on the outside View.

  7. The design of a nested StackView must incorporate CRPCHP!!!! from the inside out For details, please refer to Apple’s official Auto Layout CookBook

Here is an example of StackSpacerView:

Create a spacerView!! Public func makeSpacerView(height: CGFloat? = nil) -> UIView { let spacerView = UIView(frame: Zero) / / increase its heightAchor and breakable () if the let height height = {spacerView. HeightAnchor. The constraint (equalToConstant: height).setActiveBreakable() } spacerView.translatesAutoresizingMaskIntoConstraints = false return spacerView } // Public Extension NSLayoutConstraint {@objc func setActiveBreakable(priority: priority) public Extension NSLayoutConstraint {@objc func setActiveBreakable(priority: priority) UILayoutPriority = UILayoutPriority(900)) { self.priority = priority isActive = true } }Copy the code

reference

  1. www.cnblogs.com/tieria/p/45…
  2. www.jianshu.com/p/633e238b2…
  3. Github.com/HChong3210/…