2017-07-14 77 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没有任何约束,因为它是在导航栏中..可能是? –