iOS UILabelのマージンが崩れているコードの制約がありますか？

Question

は、私は次のようなポップアップレイアウトを実装しようとしている：これは余白とすべてとストーリーボードで正常に動作

。ストーリーボードでは、次のようになります。

しかし、私はコードで同じ制約を加えた場合、私はこの結果を得る：

ラベルは、水色の背景とビューがありますラベルは内側に濃い青色の背景があります。ポップアップの背景には、周囲に境界線があります。だから基本的にポップアップは子供にマッチしますが、子供の中のラベルは親と祖父母をオーバーフローさせますが、それは余白があるからです...私が余白を取り除くと、ボーダーに向かいます！

私は、コード内でまったく同じ制約を作成しようとしました。私は、自動調整の幅を含む代替提案のために非常にオープンです。ポップアップを作成するための

マイコード：子を作成するための

func showPopup(caller: UIView) { 
    closePopups() 

    // setup view 
    currentPopup = UIView() 
    self.view.addSubview(currentPopup) 
    currentPopup.backgroundColor = UIColorFromHex(Constants.Colors.white, alpha: 1) 

    // setup constraints 
    currentPopup.translatesAutoresizingMaskIntoConstraints = false 

    // top constraint 
    let topSideConstraint = NSLayoutConstraint(item: currentPopup, attribute: .Top, relatedBy: .Equal, toItem: intoWordsBar.view, attribute: .Bottom, multiplier: 1.0, constant: 0) 
    self.view.addConstraint(topSideConstraint) 

    // setup child elements 
    var children = [PopupChildButton]() 

    let childOne = createChild("writing_strategy_1", parent: currentPopup, aboveChild: nil, hasBorder: true, feature: FeatureManager.BarFeature.WriteReadLetterName) 
    children.append(childOne) 
    let childTwo = createChild("writing_strategy_2", parent: currentPopup, aboveChild: children[0], hasBorder: true, feature: FeatureManager.BarFeature.WriteReadLetterSound) 
    children.append(childTwo) 
    let childThree = createChild("writing_strategy_3", parent: currentPopup, aboveChild: children[1], hasBorder: true, feature: FeatureManager.BarFeature.WriteReadWord) 
    children.append(childThree) 
    let childFour = createChild("writing_strategy_4", parent: currentPopup, aboveChild: children[2], hasBorder: false, feature: FeatureManager.BarFeature.WriteReadSentence) 
    children.append(childFour) 

    let parentSize = getWidth(caller) 

    //TODO MARK: <-- here working, need to add toggle function and graphics to childrens, documentation on methods, move to constructor class? 

    // setup rest of constraints 
    // add bottom constraint, equal to bottom of last child 
    let bottomSideConstraint = NSLayoutConstraint(item: currentPopup, attribute: .Bottom, relatedBy: .Equal, toItem: children[children.count-1], attribute: .Bottom, multiplier: 1.0, constant: 0) 
    self.view.addConstraint(bottomSideConstraint) 

    // left constraint 
    let leftSideConstraint = NSLayoutConstraint(item: currentPopup, attribute: .Left, relatedBy: .Equal, toItem: caller, attribute: .Right, multiplier: 1.0, constant: (-parentSize)/2) 
    self.view.addConstraint(leftSideConstraint) 

    // add border 
    currentPopup.addBorder(edges: [.All], colour: UIColorFromHex(Constants.Colors.dark_grey, alpha: 1), thickness: 1) 

    //TODO <-- last piece 
    //childOne.addTarget(self, action: #selector(KeyboardViewController.childClick(_:)), forControlEvents: .TouchUpInside) 
    //childTwo.addTarget(self, action: #selector(KeyboardViewController.childClick(_:)), forControlEvents: .TouchUpInside) 
    //childThree.addTarget(self, action: #selector(KeyboardViewController.childClick(_:)), forControlEvents: .TouchUpInside) 
    //childFour.addTarget(self, action: #selector(KeyboardViewController.childClick(_:)), forControlEvents: .TouchUpInside) 
    self.view.setNeedsLayout() 
    self.view.layoutIfNeeded() 
} 

私のコードは：

func createChild(text: String, parent: UIView, aboveChild: UIView?, hasBorder: Bool, feature: FeatureManager.BarFeature) -> PopupChildButton { 
    // setup child element 
    let childBtn = PopupChildButton() 
    childBtn.setRelatedFeature(feature) 

    // set the right background color 
    if intoWordsBar.getFeatureManager().isFeatureActive(feature) { 
     childBtn.backgroundColor = UIColorFromHex(Constants.Colors.light_blue, alpha: 1) 
     //childBtn.setImage(UIImage(named: "Checkmark")) 
    } else { 
     childBtn.backgroundColor = UIColorAndAlphaFromHex(Constants.Colors.transparent)//TODO Highlight implementation needs to be optimized, icon should be moved all the way to the left... somehow //TODO Add new checkmark icon 
     //childBtn.setImage(nil) 
    } 

    childBtn.translatesAutoresizingMaskIntoConstraints = false 

    parent.addSubview(childBtn) 


    // add constraints 
    // top constraint 
    if let aboveChild = aboveChild { 
     let topSideConstraint = NSLayoutConstraint(item: childBtn, attribute: .Top, relatedBy: .Equal, toItem: aboveChild, attribute: .Bottom, multiplier: 1.0, constant: 0) 
     parent.addConstraint(topSideConstraint) 
    } else { 
     let topSideConstraint = NSLayoutConstraint(item: childBtn, attribute: .Top, relatedBy: .Equal, toItem: parent, attribute: .Top, multiplier: 1.0, constant: 0) 
     parent.addConstraint(topSideConstraint) 
    } 

    // height constraint 
    let heightConstraint = NSLayoutConstraint(item: childBtn, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: CGFloat(Constants.Sizes.popupChildHeight)) 
    parent.addConstraint(heightConstraint) 

    // left constraint 
    let leftSideConstraint = NSLayoutConstraint(item: parent, attribute: .Leading, relatedBy: .Equal, toItem: childBtn, attribute: .Leading, multiplier: 1.0, constant: 0) 
    parent.addConstraint(leftSideConstraint) 

    // right constraint 
    let rightSideConstraint = NSLayoutConstraint(item: parent, attribute: .Trailing, relatedBy: .Equal, toItem: childBtn, attribute: .Trailing, multiplier: 1.0, constant: 0) 
    parent.addConstraint(rightSideConstraint) 

    // add border 
    if hasBorder { 
     childBtn.addBorder(edges: .Bottom, colour: UIColorFromHex(Constants.Colors.dark_grey, alpha: 1), thickness: 1) 
    } 

    // create grandchildren 
    let label = UILabel() 

    // setup looks 
    label.textColor = UIColorFromHex(Constants.Colors.black, alpha: 1) 
    label.textAlignment = .Center 

    childBtn.backgroundColor = UIColorFromHex(Constants.Colors.dark_blue, alpha: 1) 
    label.backgroundColor = UIColorFromHex(Constants.Colors.light_blue, alpha: 1) 
    label.text = text.localized 

    label.translatesAutoresizingMaskIntoConstraints = false 

    childBtn.addSubview(label) 

    // add constraints 
    // left constraint label 
    let leftLabelConstraint = NSLayoutConstraint(item: label, attribute: .Left, relatedBy: .Equal, toItem: childBtn, attribute: .Left, multiplier: 1.0, constant: CGFloat(Constants.Sizes.popupMargin)) 
    childBtn.addConstraint(leftLabelConstraint) 

    // right constraint label 
    let rightLabelConstraint = NSLayoutConstraint(item: label, attribute: .Right, relatedBy: .Equal, toItem: childBtn, attribute: .Right, multiplier: 1.0, constant: CGFloat(Constants.Sizes.popupMargin)) 
    childBtn.addConstraint(rightLabelConstraint) 

    // top constraint 
    let labelTopSideConstraint = NSLayoutConstraint(item: label, attribute: .Top, relatedBy: .Equal, toItem: childBtn, attribute: .Top, multiplier: 1.0, constant: 0) 
    childBtn.addConstraint(labelTopSideConstraint) 

    // bottom constraint 
    //let labelBottomSideConstraint = NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: childBtn, attribute: .Bottom, multiplier: 1.0, constant: 0) 
    //childBtn.addConstraint(labelBottomSideConstraint) 


    return childBtn 
} 

Answer 1

いいえ、それは壊れていません。 後続の制約を定義するときは、親ビューを最初のアイテムとして、子ビューを2番目のアイテムとして設定する必要があります。これは先頭の制約とは逆の順序です。

私はこれを説明するためにストーリーボードから制約を引きました。これらの制約により、ヘッダーの親ビューの先頭と末尾の10ピクセルの余白が確保されます。