假设我在UIStackView中添加了更多可以显示的视图,我如何让UIStackView滚动?


当前回答

你可以试试ScrollableStackView: https://github.com/gurhub/ScrollableStackView

它是Objective-C和Swift兼容的库。它可以通过CocoaPods获得。

样本代码(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)
// ...

样例代码(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]; 
// ...

其他回答

只需将这个添加到viewdidload:

let insets = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)
scrollVIew.contentInset = insets
scrollVIew.scrollIndicatorInsets = insets

来源: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html

到2020年为止。

100%故事板或100%代码。

这个例子是垂直的:


下面是最简单的解释:

有一个空白的全屏场景 添加一个滚动视图。Control-drag从滚动视图拖到基本视图,添加左-右-上-下,全部为零。 在滚动视图中添加堆栈视图。从堆栈视图Control-drag到滚动视图,添加左-右-上-下,全部为零。 在堆栈视图中放置两个或三个标签。

为了清晰,标签的背景颜色为红色。设置标签高度为100。

现在设置每个UILabel的宽度: 令人惊讶的是,从UILabel控件拖动到滚动视图,而不是堆栈视图,并选择相同的宽度。

重复:

不要从UILabel控件拖动到UILabel的父控件,而是拖到祖父控件。(换句话说,一直到滚动视图,不要到堆栈视图。)

就是这么简单。这就是秘诀。

秘密提示——苹果臭虫: 只有一件物品是不行的!添加几个标签以使演示正常工作。

你就完成了。

提示:必须为每个新项添加高度。任何滚动堆栈视图中的每个项都必须具有固有大小(例如标签)或添加显式高度约束。


另一种方法:

回顾一下上面的方法:令人惊讶的是,将标签的宽度设置为滚动视图的宽度(而不是堆栈视图)。

这里有另一种方法……

从堆栈视图拖动到滚动视图,并添加一个“宽度相等”约束。这看起来很奇怪,因为你已经左右固定了,但这就是你怎么做的。不管看起来有多奇怪,这就是秘密。

所以你有两个选择:

令人惊讶的是,将堆栈视图中每个项的宽度设置为scrollview祖父类(而不是stackview父类)的宽度。

or

令人惊讶的是,设置一个“宽度相等”的stackview到scrollview -即使你有stackview的左右边固定到scrollview。

需要明确的是,只使用其中一种方法,不要同时使用两种方法。

水平滚动(UIScrollView中的UIStackView)

用于水平滚动。首先,创建一个UIStackView和一个UIScrollView,并按以下方式将它们添加到您的视图中:

let scrollView = UIScrollView()
let stackView = UIStackView()

scrollView.addSubview(stackView)
view.addSubview(scrollView)

记住在UIStackView和UIScrollView上设置translatesAutoresizingMaskIntoConstraints为false:

stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false

为了让一切正常工作,UIStackView的尾随,领先,顶部和底部锚应该等于UIScrollView锚:

stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

但是UIStackView的宽度锚点必须等于或大于UIScrollView锚点的宽度:

stackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor).isActive = true

现在锚定你的UIScrollView,例如:

scrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

scrollView.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true 

接下来,我建议尝试以下设置UIStackView对齐和分布:

topicStackView.axis = .horizontal
topicStackView.distribution = .equalCentering
topicStackView.alignment = .center

topicStackView.spacing = 10

最后,你需要使用addArrangedSubview:方法来添加子视图到你的UIStackView。

文本Insets

另一个你可能会发现有用的特性是,因为UIStackView保存在UIScrollView中,你现在可以访问文本insets,使事情看起来更漂亮一点。

let inset:CGFloat = 20
scrollView.contentInset.left = inset
scrollView.contentInset.right = inset

// remember if you're using insets then reduce the width of your stack view to match
stackView.widthAnchor.constraint(greaterThanOrEqualTo: topicScrollView.widthAnchor, constant: -inset*2).isActive = true

在我的例子中,stackView内的视图数量是可变的,我想将项目居中。例如,在stackView中有一个视图,我希望这个视图位于屏幕中央,如果所有的视图都不适合屏幕,我希望视图是可滚动的。

这是我的视图的层次结构。

所以我为按钮设置了一个固定的宽度,然后,为stackView:

与按钮相同的固定宽度,但优先级为650。 对齐X中心到containerView 尾随>= 0和前导>= 0到containerView 底部和顶部空间到containerView

对于containerView:

拖尾,领先,底部,顶部,等高,等宽(250优先级)到superview 固定的高度

对于scrollView:

尾随,领先,底部,顶部到父视图

scrollView也嵌入到具有前导和后导约束的视图中。

关于我用来解决这个问题的代码:

for index in 0...array.count - 1 {

      if index == 0 {
          firstButton.setTitle(title, for: .normal)
      } else {
          let button = UIButton()
          button.setTitle(title, for: .normal)
          stackView.addArrangedSubview(button)
          stackView.setNeedsLayout()
      }
}
containerView.layoutIfNeeded()
        
stackView.distribution = .fillEqually
stackView.spacing = 10
stackView.alignment = .fill

将stackview中的动态元素嵌入到scrollview中的一种简单方法。在XIB中,在UIScrollView中添加一个UIStackView,并添加stackview适合scrollview的约束(top, bottom, lead, trail),并添加一个约束来匹配它们之间的水平中心。但是将最后一个约束标记为“在构建时移除”。它使XIB高兴,避免错误。

水平滚动示例:

然后:

然后在你的代码中,像这样在你的stackview中添加按钮这样的元素:

array.forEach { text in
     let button = ShadowButton(frame: .zero)
     button.setTitle(text, for: .normal)
     myStackView.addArrangedSubview(button)
     button.heightAnchor.constraint(equalToConstant: 40).isActive = true
     button.widthAnchor.constraint(equalToConstant: 80).isActive = true
}