子视图的 UIStackView 不滚动

Posted

技术标签:

【中文标题】子视图的 UIStackView 不滚动【英文标题】:UIStackView of subviews not Scrolling 【发布时间】:2016-08-24 22:25:16 【问题描述】:

我有一个 UIScrollView,我在其中添加了一个 UIStackView 的子视图。子视图不可滚动,但如果我添加按钮而不是 UIView,则堆栈视图 可滚动。此代码出现在拆分视图控制器的详细视图中。关于为什么子视图不滚动的任何想法? 顺便说一句,detailItem 将携带索引,但现在我正在硬编码索引 [4] 以获得有保证的长滚动列表。

import UIKit

class DetailViewController: UIViewController 

    var scrollView: UIScrollView!
    var stackView: UIStackView!

    var detailItem: AnyObject? 
        didSet 
        // Update the view.
     //   self.configureView()
     //   print("didSet: configureView")
        
    

override func viewDidLoad() 
    super.viewDidLoad()

    scrollView = UIScrollView()
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(scrollView)

    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options: .AlignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options: .AlignAllCenterX, metrics: nil, views: ["scrollView": scrollView]))


    stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .Vertical

    scrollView.addSubview(stackView)

    scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[stackView]|", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))
    scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[stackView]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))
 /*
    for _ in 1 ..< 100 
        let vw = UIButton(type: UIButtonType.System)
        vw.setTitle("Button", forState: .Normal)
        stackView.addArrangedSubview(vw)
    
 */

    let selectedGroup: Group = GroupArray[4]

    let descriptorsArray = selectedGroup.descriptorsArray

    for descriptor in descriptorsArray 
        // Create a subview for each descriptor

        let subView = UIView()
        subView.frame = CGRectMake(0 , 0, self.view.frame.width-10, 50)
        subView.backgroundColor = UIColor.yellowColor()

        subView.heightAnchor.constraintEqualToConstant(50.0).active = true
        // Create a label for Descriptor subview
        let label = UILabel(frame: CGRectMake(20, 0, 200, 46))
        label.text = descriptor.name
        label.font = UIFont.boldSystemFontOfSize(22.0)
        label.textAlignment = .Left
        label.textColor = UIColor.brownColor()

        subView.addSubview(label)
        // Create a button for Checkbox

        stackView.addArrangedSubview(subView)

     

【问题讨论】:

【参考方案1】:

你缺少一个约束:

scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[stackView]|", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))
scrollView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[stackView]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["stackView": stackView]))

您忘记将堆栈视图固定到滚动视图的底部。没有它,滚动视图就没有contentSize。没有contentSize,就不能滚动。

【讨论】:

谢谢,马特。你让我想起了我之前尝试过的内容,但它不起作用,因为我之前没有适当的约束,我猜。我添加了这一行并滚动:scrollView.contentSize = CGSizeMake(400, 1000)【参考方案2】:

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

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

示例代码

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)
// ...

【讨论】:

以上是关于子视图的 UIStackView 不滚动的主要内容,如果未能解决你的问题,请参考以下文章

UIStackView 浮动视图

UIStackView 调整我的视图大小

当轴垂直时在 UIStackView 的子视图上设置恒定宽度

基于模板创建自定义视图

为啥 UIStackView 不堆叠 UILabel 安排的子视图?

UIStackView 中的图像未四舍五入