Swift - Center multiple UILabel in different Y Positions

Question

I'm new to Swift and I try to make my first iOS app.

I have a problem with UILabels.

Made one which is centered (x and y) - its in the middle of the frame which is perfect.

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

Now I have 2 more, which I want in the center of x, but y should be higher so that they are higher on the screen.

I can center them like Level .. That works, but if I try to change "y" (in CGRect()) or if I delete the .center (self.view?.center)! it just disappears of the screen.

    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)!

How can I make GeschwindigkeitUILabel and Regel in the center of x but with a higher y value?

Tried self.view.height / 2 + 150 and things like that too, but then I can't see the label at all.

Answer 1

Updated Answer:

Instead of calculating frames, you can do it pretty easily using Auto layouts.

I have done demo project for your scenario, and below is the View it looks like (I have turned on the ShowViewFrame):

Here are the constraints i have used to make this:

    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)

Result after setting fixed points spacing between views:

Answer 2

The best solution would be to use auto layout but if you're going to stick with frames here's a bit of information.

Setting x and y in the frame will be overridden by changing the center point. If you'd like to achieve the positioning the best advice I could give in this situation would be something like. Untested but this might give you an idea.

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)