Объекты отображаются по-разному, зависит от устройств в iOS

Question

Когда я запускаю на iPhone X, объекты на виде выглядят в другом положении, чем при запуске на других устройствах, таких как iPhone 6.
Например, на этих рисунках, когда я запускаю на iPhone 6s, зеленый и голубой представления находятся почти в том же положении у, что и белый треугольник фонового изображения. Но при запуске на iPhone X два вида выглядят с верхней стороны, чем белый треугольник.

Я хочу, чтобы объекты выглядели так же, как и на других устройствах, когда я работаю на iPhone X.
Как я могу решить эту проблему? Есть ли у вас лучшие идеи для настройки макета?

class Constants {

    //width of base design size
    static let guiPartsWidthOnDesign = CGFloat(750.0)

    //ratio for layout
    static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / (Constants.guiPartsWidthOnDesign / 2.0)

    //detect safe area
    static let safeArea = UIApplication.shared.delegate?.window??.safeAreaInsets.bottom

}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.frame = CGRect(x: 0,
                                 y: 0,
                                 width: self.view.frame.size.width,
                                 height: self.view.frame.size.height)

        //backgrond
        let background = UIImageView.init(frame: UIScreen.main.bounds)
        background.center.x = self.view.frame.size.width/2
        background.image = UIImage(named:"BG")
        background.contentMode = UIViewContentMode.scaleAspectFill
        self.view.insertSubview(background, at: 0)

        //downleft blue button
        let blueButton = UIImageView.init(frame: CGRect(
            x: 64/2*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(blueButton)
        blueButton.backgroundColor = UIColor.blue

        //green button
        let greenButton = UIImageView.init(frame: CGRect(
            x: (60/2+64/2+128/2)*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(greenButton)
        greenButton.backgroundColor = UIColor.green

        //cyan button
        let cyanButton = UIImageView.init(frame: CGRect(
            x: (64/2+(60/2)*2+(128/2*2))*Constants.guiPartsMultiplier,
            y: self.view.frame.size.height-(52/2+34/2)*Constants.guiPartsMultiplier-Constants.safeArea!,
            width: 60/2*Constants.guiPartsMultiplier,
            height: 52/2*Constants.guiPartsMultiplier))
        self.view.addSubview(cyanButton)
        cyanButton.backgroundColor = UIColor.cyan

        //4 blue buttons
        for i in 1..<5 {
            let subBlueButton = UIImageView.init(frame: CGRect(
                x: 64/2*Constants.guiPartsMultiplier,
                y: self.view.frame.size.height-((43.0+CGFloat(50*i))*Constants.guiPartsMultiplier)-Constants.safeArea!,
                width: 60/2*Constants.guiPartsMultiplier,
                height: 52/2*Constants.guiPartsMultiplier))
            self.view.addSubview(subBlueButton)
            subBlueButton.alpha = 1.0
            subBlueButton.backgroundColor = UIColor.blue
        }

        //down bar
        let bar = UIImageView.init(frame: CGRect(
            x:0,
            y: self.view.frame.size.height-50,
            width: self.view.frame.size.width,
            height: 50))
        bar.alpha = 0.3
        bar.backgroundColor = UIColor.blue
        self.view.addSubview(bar)

        print("Constants: \(UIScreen.main.bounds.size.width, Constants.guiPartsWidthOnDesign, Constants.guiPartsMultiplier)")
        print("SafeArea: \(String(describing: Constants.safeArea))")
        print("Height: \(UIScreen.main.bounds.size.height)")

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

Answer 1

В качестве быстрого обходного пути можно добавить safeAreaLayout, используя Auto Layout's Top и Bottom для фонового изображения.

Будет полезен приведенный ниже фрагмент кода:

 let background = UIImageView.init(frame: UIScreen.main.bounds)
 background.image = UIImage(named:"bg")
 self.view.insertSubview(background, at: 0)
 background.translatesAutoresizingMaskIntoConstraints = false

 if #available(iOS 11.0, *) {
 let statusFrame = UIApplication.shared.statusBarFrame.size.height
 NSLayoutConstraint.init(item: background, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.top, multiplier: 1.0, constant: statusFrame).isActive = true
 background.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

 } else {
      // Fallback on earlier versions
 };

Answer 2

Вам нужно использовать AutoLayout, либо в раскадровке, либо в коде с использованием языка визуальных форматов.

В этом уроке Рэй Вендерлих показано, как использовать VFL Рэй Вендлих Язык визуальных форматов

Рэй Ведерлих Автослои в раскадровке Учебник

Цель AutoLayout - делать именно то, что вы просите.