2017-07-14 74 views
0

我一直在爲這一整天奮鬥 - 我需要在我的導航欄中添加一個視圖作爲rightBarButtonItems,包含UILabel和UIImageView ..因此,我需要創建視圖以編程方式,以編程方式設置約束並將視圖添加爲rightBarButtonItems。以編程方式設置約束的問題

我試圖實現這一目標是:

enter image description here

而這就是我得到:

enter image description here

看來,無論我做什麼,我不能移動的向下箭頭。它必須在標籤的右側,並與中心Y對齊。

這是我的代碼:

//Elements 
    let containerView = UIView() 
    containerView.frame = CGRect(x: 0, y: 0, width: 90, height: 30) 
    containerView.backgroundColor = UIColor.blueColor() 

    let codedLabel:UILabel = UILabel() 
    codedLabel.frame = CGRect(x: 0, y: 0, width: 80, height: 30) 
    codedLabel.textAlignment = .Center 
    codedLabel.text = "FILTRER" 
    codedLabel.numberOfLines = 1 
    codedLabel.textColor = UIColor.redColor() 
    codedLabel.font = UIFont(name: Constants.ubuntuBold, size: 18.0)! 
    codedLabel.backgroundColor = UIColor.lightGrayColor() 
    codedLabel.sizeToFit() 

    let codedImageView: UIImageView = UIImageView() 
    codedImageView.frame = CGRect(x: 0, y: 0, width: 10, height: 5.7) 
    codedImageView.image = UIImage(named: "dragToRefreshArrow") 
    codedImageView.backgroundColor = UIColor.cyanColor() 

    containerView.addSubview(codedLabel) 
    containerView.addSubview(codedImageView) 

    containerView.sizeToFit() 

    //Constraints 
    containerView.translatesAutoresizingMaskIntoConstraints = false 

    //Label 
    NSLayoutConstraint(item: codedLabel, attribute: .Top, relatedBy: .Equal, toItem: containerView, attribute: .Top, multiplier: 1, constant: 0).active = true 
    NSLayoutConstraint(item: codedLabel, attribute: .Bottom, relatedBy: .Equal, toItem: containerView, attribute: .Bottom, multiplier: 1, constant: 0).active = true 
    NSLayoutConstraint(item: codedLabel, attribute: .Leading, relatedBy: .Equal, toItem: containerView, attribute: .Leading, multiplier: 1, constant: 0).active = true 
    NSLayoutConstraint(item: codedLabel, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true 

    //ImageView 
    NSLayoutConstraint(item: codedImageView, attribute: .Leading, relatedBy: .Equal, toItem: codedLabel, attribute: .Leading, multiplier: 1, constant: 0).active = true 
    NSLayoutConstraint(item: codedImageView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true 
    NSLayoutConstraint(item: codedImageView, attribute: .CenterY, relatedBy: .Equal, toItem: codedLabel, attribute: .Top, multiplier: 1, constant: 0).active = true 

    let item = UIBarButtonItem() 
    item.customView = containerView 

    var negativeSpace:UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil) 
    negativeSpace.width = -10.0 

    self.navigationItem.rightBarButtonItems = [negativeSpace, item] 

任何人有什麼我做錯了的想法? :-)

+1

這裏是個愚蠢的問題。您是否關閉了'codedLabel'的自動識別掩碼?它不在你的代碼中。 – dfd

+0

是的,使用程序化自動佈局的* all *視圖必須將'translatesAutoresizingMaskIntoConstraints'設置爲'false' – BallpointBen

+0

@ BallpointBen-這可能是問題:)現在我至少可以移動箭頭!謝啦!我會發布最終的解決方案,當我得到它正常工作:)) –

回答

0

您需要將約束添加到視圖。喜歡的東西:

let myConstraint = NSLayoutConstraint(....) 
myConstraint.active = ture 
self.containerView.addConstraints(myConstraint) 
+0

對不起,但我不知道這應該有什麼幫助:)?你能再解釋一下嗎?它似乎是我已經添加的第一個約束? –

+0

@NicolaiHarbo兄弟你沒有添加任何限制。我想說的是將約束設置爲var,然後將該var添加到視圖。 – BooRanger

0

爲了對標籤(codedLabel)的右側的箭頭(codedImageView),對準CenterY和德容器內(ContainerView),你需要以下限制:

  • codedImageView.leading = codedLabel.trailing =>此將移動codedLabel的codedImageView右
  • codedImageView.centerY = codedLabel.centerY =>這將垂直中心時,它
  • codedImageView.trailing = containerView.trailing =>這將在最後和containerView中設置它。

這產生了以下的限制:

NSLayoutConstraint(item: codedImageView, attribute: .Leading, relatedBy: .Equal, toItem: codedLabel, attribute: .Trailing, multiplier: 1, constant: 0).active = true 
NSLayoutConstraint(item: codedImageView, attribute: .Trailing, relatedBy: .Equal, toItem: containerView, attribute: .Trailing, multiplier: 1, constant: 0).active = true 
NSLayoutConstraint(item: codedImageView, attribute: .CenterY, relatedBy: .Equal, toItem: codedLabel, attribute: .CenterY, multiplier: 1, constant: 0).active = true 

見第一和第三約束有何不同?在你的例子中,你將它附加到codedLabel的左上角,而不是右中間。

+0

謝謝Thomas!我只是嘗試了你的代碼,但箭頭仍然停留在左上角..這就像我不能移動它..我不確定這是因爲containerview沒有任何約束,因爲它是在導航欄中..可能是? –