来自 xib 的奇怪约束/UI 错误

Question

我正在创建一个上拉式 google-maps-esque 底部抽屉视图，它看起来像这样（当它工作时）：

底部抽屉视图是从 xib 加载的：

问题是有时视图显示如下：

这似乎是一个约束问题，但我认为我的约束都是正确的。 CardView 被所有边约束到 superview 并且粉红色的 join 按钮被约束到右边缘、顶部和底部，并且对左侧的文本标签具有大于或等于约束。

我对使用 xibs 有点陌生，所以这个问题可能与我如何实例化它有关？这是我的 xib 初始化方法：

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

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

func loadFromXib() {
    // standard initialization logic
    Bundle.main.loadNibNamed("ChatroomCardView", owner: self, options: nil)
    contentView!.frame = bounds
   // contentView!.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    addSubview(contentView!)

    cardView.layer.shadowOffset = CGSize(width: 0, height: -3.0)
    cardView.layer.shadowRadius = 3.0
    cardView.layer.shadowOpacity = 0.6
    cardView.layer.masksToBounds = false

    joinButton.setRadiusWithShadow()
}

这是我实例化卡片视图的方式（前两行）：

// create small view
let chatroomCardView = ChatroomCardView(frame: CGRect(x: 0, y: 0, width: 375, height: 139))
chatroomCardView.chatRoom = chatRoom


// create fullsize view
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let chatroomDetailVC = storyboard.instantiateViewController(withIdentifier: "ChatRoomDetailVC") as! ChatRoomDetailVC
chatroomDetailVC.chatroom = chatRoom

bottomDrawerVC.mainFullVC = chatroomDetailVC
bottomDrawerVC.smallDrawerView = chatroomCardView
bottomDrawerVC.view.addSubview(bottomDrawerVC.mainFullVC.view)
bottomDrawerVC.view.addSubview(bottomDrawerVC.smallDrawerView)

我真的很困惑这个问题可能是什么，所以任何帮助都将不胜感激。

Answer 1

您将视图添加为视图控制器视图的子视图，但是您在哪里创建这两个视图之间的约束？您可能对 chatroomCardView 的子视图有约束，但您仍然需要以编程方式在 chatroomCardView 与其超级视图之间创建约束。即类似于 translatesAutoresizingMaskIntoConstraints = false，然后将 bottomAnchor 到 bottomAnchor、leadingAnchor 到leadingAnchor、 trailingAnchor 到 trailingAnchor 和一个恒定的高度约束，或者只是将两个子视图推到一个垂直的堆栈视图中。