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

Question

我创建了一个go-up-google-maps-esque底部抽屉视图，看起来像这样（当它工作时）：

从xib加载底部抽屉视图：

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

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

我使用xib有点新鲜，所以这个问题可能与我实例化它有什么关系？这是我的xib init方法：

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()
}

以下是我实例化cardview（前两行）的方法：

// 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 to leadingAnchor，trailingAnchor to trailingAnchor和一个恒定的高度约束，或者只是将两个子视图推入一个垂直的stackview。