无法在Swift中调整多个设备上的布局

时间:2018-10-29 08:16:22

标签: ios swift xcode

我正在尝试在Swift中没有Storyboard的情况下调整布局。但是使用下面的代码,我无法调整iPhone Plus系列(6 +,7 +和8+)上的布局。

案例1
使用基于640x1136尺寸的图像,它可以在iPhone8、8 +和X上运行。

class Constants {

    // the image parts are based on 640x1136
    static let guiPartsWidthOnDesign = CGFloat(640)
    static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / guiPartsWidthOnDesign

}

制作按钮

for i in 1..<5 {

    let subButton = UIImageView.init(frame: CGRect(
        x: UIScreen.main.bounds.size.width/2-50*Constants.guiPartsMultiplier,
        y: (100*Constants.guiPartsMultiplier)+CGFloat(i*100),
        width: 187*Constants.guiPartsMultiplier,
        height: 100*Constants.guiPartsMultiplier))
    background.addSubview(subButton)
    subButton.backgroundColor = UIColor.blue
    subButton.alpha = 1.0

}

在多个设备上的结果看起来是相同的布局。

案例2
使用基于750x1334尺寸的图像,在iPhone8 +上效果不佳。

class Constants {

    // the images are based on 750x1334
    static let guiPartsWidthOnDesign = CGFloat(750)
    static var guiPartsMultiplier: CGFloat = UIScreen.main.bounds.width / guiPartsWidthOnDesign

}

使按钮(与上一个代码相同)

结果
iPhone8 Plus iPhone8

如您所见,iPhone8和8 Plus之间蓝色正方形的y位置不同。 (iPhone8和X的结果相同。)

我该如何解决这个问题?

更新
我尝试使用UIStackView,但效果不佳。 with stackview

UPDATE2

//Define this as class variable
    fileprivate lazy var stackView: UIStackView = {
        let sv = UIStackView()
        sv.backgroundColor = UIColor.green
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.axis = .vertical
        sv.alignment = .fill
        sv.distribution = .fillEqually
        sv.spacing = 10
        return sv
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(stackView)

        stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

        let background = UIImageView.init(frame: UIScreen.main.bounds)
        background.image = UIImage(named:"BG")
        stackView.addSubview(background)
        //        background.translatesAutoresizingMaskIntoConstraints = false
//        background.contentMode = .scaleAspectFill

for i in 1..<5 {

    let subButton = UIImageView()
    subButton.translatesAutoresizingMaskIntoConstraints = false
    subButton.backgroundColor = UIColor.blue
    subButton.alpha = 1.0
    stackView.addArrangedSubview(subButton)
    subButton.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.3).isActive = true

}

}

*对不起,我不知道,但我无法上传屏幕截图。

UPDATE3
我使用以下代码,结果在所有类型的设备上都是这样的:

result image

//Define this as class variable
    fileprivate lazy var stackView: UIStackView = {
        let sv = UIStackView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.axis = .vertical
        sv.alignment = .fill
        sv.distribution = .fillEqually
        sv.spacing = 10
        return sv
    }()

    fileprivate lazy var catBg: UIImageView = {
        let iv = UIImageView()
        iv.translatesAutoresizingMaskIntoConstraints = false
        iv.contentMode = .scaleAspectFill
        iv.image = UIImage(named: "BG")
        return iv
    }()


    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(catBg)
        catBg.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        catBg.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        catBg.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.7).isActive = true
        catBg.heightAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 1.78).isActive = true

        self.catBg.addSubview(stackView)
        stackView.centerXAnchor.constraint(equalTo: catBg.centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: catBg.centerYAnchor).isActive = true


        for i in 1..<5 {

            let subButton = UIImageView()
            subButton.translatesAutoresizingMaskIntoConstraints = false
            subButton.backgroundColor = UIColor.blue
            subButton.alpha = 1.0
            stackView.addArrangedSubview(subButton)
            subButton.widthAnchor.constraint(equalTo: catBg.widthAnchor, multiplier: 0.3).isActive = true
            //If you have an image you can remove or change this anchor
            subButton.heightAnchor.constraint(equalToConstant: 54).isActive = true
        }

    }

UPDATE4

我的理想是这张图片的中心。但是到目前为止,结果就像是正确的图像。

ideal image

1 个答案:

答案 0 :(得分:0)

即使您不使用情节提要,我也建议您使用 public GameObject YourGameObject; private List<AugmentedImage> m_TempAugmentedImages = new List<AugmentedImage>(); Session.GetTrackables<AugmentedImage>(m_TempAugmentedImages, TrackableQueryFilter.Updated); foreach (var image in m_TempAugmentedImages){ Anchor anchor = image.CreateAnchor(image.CenterPose); var obj = Instantiate(YourGameObject,anchor.transform); obj.transform.parent = anchor.transform; } 。在stackview中,您可以将特定轴设为垂直轴,并根据需要设置间距。将stackview设置为相等填充。

不要使用实际的帧来计算多个屏幕布局的位置,这将变得很乏味。 您应该在特定锚点中使用自动布局约束。

UIStackview