如何在iOS中将屏幕上的对象居中

Question

If I create a rectangular object for example like this:

square = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 100))
square.backgroundColor = UIColor.redColor()
view.addSubview(square)

How to position it, that it always be centered on all devices?

Answer 1

Rather than set the frame directly with calculation, and have to do it all over again under rotation, This can be done with autolayout.

Here is a complete and simple view controller subclass that adds a red subview in its centre, and works even when the screen is rotated.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupSubview()
    }

    func setupSubview() {
        let square = UIView()
        square.translatesAutoresizingMaskIntoConstraints = false
        square.backgroundColor = .redColor()
        view.addSubview(square)

        let views = ["square" : square]
        let metrics = ["width" : 300, "height" : 100]

        view.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat(
                "H:[square(width)]",
                options: [],
                metrics: metrics,
                views: views)
        )

        view.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:[square(height)]",
                options: [],
                metrics: metrics,
                views: views)
        )

        view.addConstraints([
            NSLayoutConstraint(
                item: square,
                attribute: .CenterX,
                relatedBy: .Equal,
                toItem: view,
                attribute: .CenterX,
                multiplier: 1.0,
                constant: 0.0
            ),
            NSLayoutConstraint(
                item: square,
                attribute: .CenterY,
                relatedBy: .Equal,
                toItem: view,
                attribute: .CenterY,
                multiplier: 1.0,
                constant: 0.0
            )
        ])
    }

}

Yes, it's a lot of code, but its mostly boilerplate - it only took me a few minutes to write this example.

If you use nibs or storyboards, this becomes even easier.

Answer 2

xAxis = superview.frame.size.width / 2 - x.frame.size.width / 2
yAxis = superview.frame.size.height / 2 - x.frame.size.height / 2