添加和布局从xib加载到自定义单元格的子视图

Question

我有一个自定义单元格＆＃39; CustomCell＆＃39;我希望根据自定义数据元素进行撰写。 我正在尝试将子视图添加到CustomCell，但是对于从xib（https://stackoverflow.com/a/26326006/3546621）加载的子视图，我无法弄清楚如何将它们布局到单元格的contentView中;即以编程方式设置其框架或添加约束似乎都有效。 （CustomCell没有附加xib，每个子视图都是以编程方式加载的。其中一些子视图是从xib加载的。）

例如，这是我的自定义单元格。它有两个子视图，一个用UIView初始化的yellowView（frame：CGRect（））和一个用UIView.fromNib初始化的blueView。

这是BlueView.xib

我没有成功将blueView放在yellowView下面，而是将blueView堆叠在yellowView的顶部：

import {Location} from '@angular/common';

@Component({ ... })
export class MyComponent {
    constructor(private location: Location) { }

    public goBack() {
        this.location.back();
    }
}

查看控制器

class CustomCell: UITableViewCell {

  let yellowView: UIView = UIView()
  let blueViewFromXib: BlueView = UIView.fromNib()

  override init(style: UITableViewCellStyle, reuseIdentifier: String?){
    super.init(style: style, reuseIdentifier: reuseIdentifier)
  }

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

  fun configureForData(custom: Custom){

    yellowView.backgroundColor = UIColor.yellowColor()
    yellowView.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(yellowView)

    blueView.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(blueView)

    layoutIfNeeded()
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    let height = NSLayoutConstraint(item: contentView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 80)
    contentView.translatesAutoresizingMaskIntoConstraints = false
    contentView.addConstraint(height)

    yellowView.frame = CGRect(x: 0, y: 0, width: contentView.frame.width, height: 40)

    // I want to add the blueView at the bottom of the yellowView

    // Option 1: not working
    blueView.frame = CGRect(x: 0, y: 40, width: contentView.frame.width, height: 40)

    // Option 2: not working
    let top = NSLayoutConstraint(item: blueView, attribute: .Top, relatedBy: .Equal, toItem: contentView, attribute: .Top, multiplier: 1, constant: 40)
    let bottom = NSLayoutConstraint(item: blueView, attribute: .Bottom, relatedBy: .Equal, toItem: contentView, attribute: .Bottom, multiplier: 1, constant: 0)
    let leading = NSLayoutConstraint(item: blueView, attribute: .Leading, relatedBy: .Equal, toItem: contentView, attribute: .Leading, multiplier: 1, constant: 0)
    let trailing = NSLayoutConstraint(item: blueView, attribute: .Trailing, relatedBy: .Equal, toItem: contentView, attribute: .Trailing, multiplier: 1, constant: 0)
    contentView.addConstraints([top, bottom, leading, trailing])
  }
}

class BlueView: UIView {
  // the project includes a BlueView.xib which is simply a UIView whose background color is blue
}

Answer 1

要注意的几件事

1. 在layoutSubviews中，您不应该添加/删除不会更改的约束。如果设置约束，则默认实现（super.layoutSubviews()）将根据约束调整大小/布局。

2. 如果设置约束，它们将覆盖已设置的任何帧。

3. blueView.frame = UIView(frame: CGRect(x: 0, y: 40, width: contentView.frame.width, height: 40))甚至不应该编译。您将blueView的框架（CGRect）设置为UIView的新实例。

无论如何，您似乎正在使用blueCon的layoutConstraints，并为yellowView手动设置框架。我猜你是否使用其中一种，你将能够解决正在发生的事情。

为了简化操作，请尝试将子视图设置为选项：

let yellowView: UIView?
let blueViewFromXib: BlueView?

然后注释掉layoutSubviews，并使用它：

func configureForData(custom: Custom){

    if yellowView == nil {
        yellowView = UIView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: 40))
        yellowView?.backgroundColor = UIColor.yellowColor()
        self.addSubview(yellowView)
    }
    if blueView == nil {
        blueView = BlueView.fromNib()
        blueView?.frame = CGRect(x: 0, y: 40, width: self.frame.width, height: 40)
        self.addSubview(blueView)
    }
}