为什么堆栈视图中的自定义视图重叠?

时间:2016-12-10 05:54:06

标签: ios swift stackview

我正在尝试创建一个包含自定义视图的堆栈视图。此示例中的每个自定义视图都具有相同的信息。由于某些原因,而不是每个后面的子视图重叠,我无法弄清楚为什么。我没有任何约束(在布局中)。堆栈视图位于滚动视图内部,因为可能有许多子视图。

自定义视图的代码:

import UIKit

class AddressComponentView: UIView {

    @IBOutlet weak var labelStreet: UILabel!
@IBOutlet weak var labelCity: UILabel!
@IBOutlet weak var labelOfficialRegionType: UILabel!
@IBOutlet weak var labelOfficialRegionTitle: UILabel!
@IBOutlet weak var labelCountry: UILabel!
@IBOutlet weak var labelZip: UILabel!

var view: UIView!

func loadData(address: AddressData){
    self.labelStreet.text = address.street
    self.labelCity.text = address.city
    self.labelOfficialRegionType.text = address.region?.officialRegionType
    self.labelOfficialRegionTitle.text = address.region?.officialRegionTitle
    self.labelZip.text = address.zip
    self.labelStreet.sizeToFit()
}

override init(frame: CGRect) {
    super.init(frame: frame)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

}

以下是我动态添加子视图的方法(viewContent是堆栈视图):

viewScroll.contentSize = CGSize(width: 320, height: 1000)

            let viewsDictionary = ["stackView":viewContent]
            let stackView_H = NSLayoutConstraint.constraints(
                withVisualFormat: "H:|-20-[stackView]-20-|",  //horizontal constraint 20 points from left and right side
                options: NSLayoutFormatOptions(rawValue: 0),
                metrics: nil,
                views: viewsDictionary)
            let stackView_V = NSLayoutConstraint.constraints(
                withVisualFormat: "V:|-30-[stackView]-30-|", //vertical constraint 30 points from top and bottom
                options: NSLayoutFormatOptions(rawValue:0),
                metrics: nil,
                views: viewsDictionary)
            view.addConstraints(stackView_H)
            view.addConstraints(stackView_V)


let addressView = UINib(nibName: "AddressComponent", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! AddressComponentView

addressView.loadData(address: (item?.addressData)!)
viewContent.addArrangedSubview(addressView)

let addressView1 = UINib(nibName: "AddressComponent", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! AddressComponentView

addressView1.loadData(地址:( item?.addressData)!) viewContent.addArrangedSubview(addressView1)

这是可怕的结果:

crap

That's what happened if I add 30 subviews:

enter image description here

如果我添加30个子视图,那就是发生了什么:

另一件非常奇怪的事情是我将背景自定义视图设置为蓝色,并将其设置为不透明,并且由于某种原因这些属性被忽略。这就是组件在设计时看起来的样子: 现在我正在尝试将这些子视图添加到UITableView的Prototype单元格中:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    if indexPath.row == 3 || indexPath.row == 7 {
        var text = "Run the app again, and it will look nothing has really changed. You are now using your bioLabel, but it’s just showing one line of text in each cell. Even though the number of lines is set to 0 and your constraints are properly configured so your bioLabel takes up"

        let customView1 = UINib(nibName: "CustomView1", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! CustomView1
        customView1.frame = CGRect(x:0, y:0, width: 200, height: 60)
        customView1.loadData(text: text)
        cell.container.addSubview(customView1)
    } else {
        let customView2 = UINib(nibName: "CustomView2", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! CustomView2

        customView2.loadData(text: "aaaaa adfsd")
        cell.container.addSubview(customView2)

    }

    // Configure the cell...

    return cell
}

这段代码非常愚蠢,我只是尝试了不同的视图(我创建了2个自定义视图)。它们都有大致相同的代码:

class CustomView1: UIView {

@IBOutlet weak var label1: UILabel!

func loadData(text: String){
    label1.text = text
}
override init(frame: CGRect) {
    super.init(frame: frame)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

}

NB cell.container是我放入Prototype单元格的视图。

2 个答案:

答案 0 :(得分:2)

问题是UIStackView行不知道UIStackView的高度,尝试设置该视图的高度或者可能改变UIStackView的分配属性。 为什么你现在用户UITableView,这看起来像使用UITableView的完美示例,而不是你不需要UIScrollView?

答案 1 :(得分:1)

尝试覆盖自定义视图的.GlobalEnv。堆栈视图将知道子视图的高度。