Placing UILabel in the center of screen

Question

I have a UILabel which I want to be displayed at the center of screen regardless of which iPhone it is played on!

But I can't get it right! It's always somewhere else but not in the middle.

what am i doing wrong?

Here is the picture and code of what is happening!

class end: SKScene {

    var label = UILabel()


    override func didMoveToView(view: SKView) {
        scene?.backgroundColor = UIColor(red: CGFloat(59.0/255.0), green: CGFloat(89.0/255.0), blue: CGFloat(152.0/255.0), alpha: CGFloat(1.0))

        let w = UIScreen.mainScreen().bounds.width
        let h = UIScreen.mainScreen().bounds.height
        label = UILabel(frame: CGRect(x: w / 2, y: h / 2, width: 120, height: 30))
        label.text = "REPLAY"
        label.center = CGPoint(x: w / 2, y: 2)
        label.textColor = UIColor.whiteColor()
        self.view?.addSubview(label)

It is simple as adding two constraints in IB (center label horizontally and vertically in container). But why do you need UILabel? UILabel is added to the view, not to the scene. This may require additional handling (disposing) when transitioning to another scenes. There is a SKLabelNode, which is not that powerful as UILabel, but it is native SpriteKit component. — Whirlwind, Aug 14 '16 at 09:59

pbodsk · Answer 1 · 2016-08-14T10:26:50.407

I think your label actually is centered.

If I add a red background color like so:

label.backgroundColor = UIColor.redColor()

and change the vertical center to be the center of the screen, that is, changes this line in your example:

label.center = CGPoint(x: w / 2, y: 2)

to this:

label.center = CGPoint(x: w / 2, y: h / 2)

I end up with this:

So, the label actually is centered. The text however, is not centered in the label, which makes it seems as if the text is not centered when you have no background color.

If I change the textAlignment to .Center and remove the background color again I end up with this result:

The final code example looks like this:

override func didMoveToView(view: SKView) {
    scene?.backgroundColor = UIColor(red: CGFloat(59.0/255.0), green: CGFloat(89.0/255.0), blue: CGFloat(152.0/255.0), alpha: CGFloat(1.0))

    let w = UIScreen.mainScreen().bounds.width
    let h = UIScreen.mainScreen().bounds.height

    label = UILabel(frame: CGRect(x: w / 2, y: h / 2, width: 120, height: 30))
    label.text = "REPLAY"
    label.center = CGPoint(x: w / 2, y: h / 2)
    label.textAlignment = .Center
    label.textColor = UIColor.whiteColor()
    self.view?.addSubview(label)
}

And when all that is said, then maybe you should look into the SKLabelNode as @whirlwind suggests in the comment, that way your label becomes an integrated part of the SKScene and not something that is bolted to the outer UIView (if that makes any sense to you).

Hope this helps you.

@OsaamaShehzad you're welcome, glad you got it working and learned something about center aligned text along the way. Don't feel stupid...we're all there...on a daily basis :) Feel free to mark the answer as accepted if you think it helped you :) — pbodsk, Aug 14 '16 at 10:49

score 1 · Answer 2 · answered Aug 14 '16 at 09:11

1

Best option is going for autolayout. You can set it vertically and horizontally aligned to view. Regardless of display or orientation it works.

You can use either interface builder or you can add autolayoutconstraints

answered Aug 14 '16 at 09:11

renjithr

313
4
12

score 0 · Answer 3 · answered Dec 12 '22 at 09:35

0

The easiest way would be to use:

label.center = view.center

answered Dec 12 '22 at 09:35

maxmitz

258
1
4
17

Placing UILabel in the center of screen

3 Answers3