Swift - 在不同的Y位置居中多个UILabel

时间:2016-03-03 00:32:37

标签: ios xcode swift uilabel

我是Swift的新手,我尝试制作我的第一个iOS应用程序。

我的UILabels有问题。

制作一个居中的(x和y) - 它在框架的中间是完美的。

//UILabel1 (works)
    Level = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 100))
            Level.center = (self.view?.center)!
            Level.textAlignment = NSTextAlignment.Center

现在我还有2个,我希望在x的中心,但是y应该更高,以便它们在屏幕上更高。

我可以像Level一样将它们集中在一起..这样可行,但是如果我尝试更改“y”(在CGRect()中)或者如果我删除.center (self.view?.center)!它就会消失在屏幕上。

    GeschwindigkeitUILabel = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    GeschwindigkeitUILabel.center = (self.view?.center)!

    Regel = UILabel(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
    Regel.center = (self.view?.center)!

如何将GeschwindigkeitUILabel和Regel置于x的中心但y值更高?

尝试self.view.height / 2 + 150以及类似的事情,但后来我根本看不到标签。

2 个答案:

答案 0 :(得分:1)

更新答案:

您可以使用自动布局轻松完成框架,而不是计算框架。

我已经完成了你的场景的演示项目,下面是它看起来的视图(我打开了ShowViewFrame):

enter image description here

以下是我用来做这个的限制:

    let topLabel = UILabel()
    topLabel.translatesAutoresizingMaskIntoConstraints = false
    topLabel.text = "TopLabel"
    topLabel.textAlignment = NSTextAlignment.Center

    let middleLabel = UILabel()
    middleLabel.translatesAutoresizingMaskIntoConstraints = false
    middleLabel.text = "MiddleLabel"
    middleLabel.textAlignment = NSTextAlignment.Center

    let bottomtLabel = UILabel()
    bottomtLabel.translatesAutoresizingMaskIntoConstraints = false
    bottomtLabel.text = "BottomLabel"
    bottomtLabel.textAlignment = NSTextAlignment.Center

    self.view.addSubview(topLabel)
    self.view.addSubview(middleLabel)
    self.view.addSubview(bottomtLabel)

    //Ideally we should create dictionary for metrics and view to increase the code readability.

    //Metrics are used specify width, height, spacing between views.
    let metrics = ["spacingBetweenMiddleLabelAndTopLabel" : 25, "spacingBetweenMiddleLabelAndBottomLabel": 25]

    //Views we provide the subview for which we are setting the constraints
    let views = ["topLabel": topLabel, "middleLabel": middleLabel, "bottomtLabel": bottomtLabel]

    //Placing middleLabel at the centre of screen Horizontal
    let centreXMiddleLabel:NSLayoutConstraint = NSLayoutConstraint(item: middleLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);

    //Placing middleLabel at the centre of screen Vertical
    let centreVMiddleLabel:NSLayoutConstraint = NSLayoutConstraint(item: middleLabel, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0);

    //Placing topLabel at the centre of screen Horizontal
    let centreXTopLabel:NSLayoutConstraint = NSLayoutConstraint(item: topLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);

    //Placing bottomtLabel at the centre of screen Horizontal
    let centreXBottomtLabel:NSLayoutConstraint = NSLayoutConstraint(item: bottomtLabel, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0);

    //Setting height of 50pts to topLable
    let heightTopLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel(50)]", options: [], metrics: nil, views: views)

    //Setting width of 300pts to topLable
     let widthTopLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[topLabel(300)]", options: [], metrics: nil, views: views)

    //Setting height of 100pts to middleLabel
    let heightMiddleLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[middleLabel(100)]", options: [], metrics: nil, views: views)

    //Setting width of 150pts to middleLabel
    let widthMiddleLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[middleLabel(150)]", options: [], metrics: nil, views: views)

    //Setting height of 50pts to bottomtLabel
    let heightBottomLabel = NSLayoutConstraint.constraintsWithVisualFormat("V:[bottomtLabel(50)]", options: [], metrics: nil, views: views)

    //Setting width of 300pts to bottomtLabel
    let widthBottomLabel = NSLayoutConstraint.constraintsWithVisualFormat("H:[bottomtLabel(300)]", options: [], metrics: nil, views: views)

    /*This is important
      Here you are setting the Y position of all lables
      We are placing top label on top of middleLabel with standand spacing (8 pts) and bottom label below middle label with standard spacing.
    */
    let labelYConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel]-(spacingBetweenMiddleLabelAndTopLabel)-[middleLabel]-(spacingBetweenMiddleLabelAndBottomLabel)-[bottomtLabel]", options: [], metrics: metrics, views: views)

    //If you want to set spacing or height and width with certain priority you can do that
    let labelYConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:[topLabel]-(spacingBetweenMiddleLabelAndTopLabel@1000)-[middleLabel]-(spacingBetweenMiddleLabelAndBottomLabel@750)-[bottomtLabel]", options: [], metrics: metrics, views: views)



    topLabel.addConstraints(heightTopLabel)
    topLabel.addConstraints(widthTopLabel)

    middleLabel.addConstraints(heightMiddleLabel)
    middleLabel.addConstraints(widthMiddleLabel)

    bottomtLabel.addConstraints(heightBottomLabel)
    bottomtLabel.addConstraints(widthBottomLabel)

    self.view.addConstraint(centreXMiddleLabel)
    self.view.addConstraint(centreVMiddleLabel)


    self.view.addConstraint(centreXTopLabel)
    self.view.addConstraint(centreXBottomtLabel)

    self.view.addConstraints(labelYConstraint)

在视图之间设置固定点间距后的结果:

enter image description here

答案 1 :(得分:0)

最好的解决方案是使用自动布局,但如果您要在这里坚持使用框架,那么可以使用一些信息。

通过更改中心点将覆盖帧中的x和y设置。如果您想要实现定位,我可以在这种情况下提供最好的建议。未经测试但这可能会给你一个想法。

Level = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 100))
            Level.center = (self.view?.center)!
            Level.textAlignment = NSTextAlignment.Center

GeschwindigkeitUILabel = UILabel(frame: CGRect(x: 0, y: Level.frame.origin.y+Level.frame.size.height + PADDING, width: 300, height: 50))
    GeschwindigkeitUILabel.center = CGPointMake(self.view?.center.x, GeschwindigkeitUILabel.center.y)

    Regel = UILabel(frame: CGRect(x: 0, y: GeschwindigkeitUILabel.frame.origin.y+GeschwindigkeitUILabel.frame.size.height+ PADDING, width: 300, height: 50))
    Regel.center = CGPointMake(self.view?.center.x, Regel.center.y)