不同尺寸iPhone上Swift布局约束适配问题求助

我在小屏和大屏iPhone上遇到布局适配问题，即便使用了从Figma获取的约束，实际显示效果仍与设计图存在差异。

设计与实际效果对比 #

Figma设计图：

实际布局效果：

实现代码 #

private let welcomeImage: UIImageView = {
    let view = UIImageView()
    view.contentMode = .scaleToFill
    view.image = UIImage(named: "welcomeImage")
    return view
}()

private lazy var welcomeLabel: HMLabel = {
    let label = HMLabel()
    label.text = "Найди свою \nполовинку!"
    label.textAlignment = .center
    label.numberOfLines = 2
    label.font = UIFont.hobbiesFont(style: .huge)
    return label
}()

private let heartButton: UIImageView = {
    let view = UIImageView()
    view.contentMode = .scaleAspectFit
    view.image = UIImage(named: "heartImage")
    return view
}()

private func addConstraints() {
    welcomeImage.snp.makeConstraints { make in
        make.top.equalToSuperview().inset(79)
        make.width.height.equalTo(238)
        make.centerX.equalToSuperview()
    }
    welcomeLabel.snp.makeConstraints { make in
        make.centerX.equalToSuperview()
        make.top.equalTo(welcomeImage.snp.bottom).offset(32)
    }
    heartButton.snp.makeConstraints { make in
        make.top.equalTo(welcomeLabel.snp.bottom).offset(32)
        make.width.height.equalTo(232)
        make.centerX.equalToSuperview()
        make.bottom.equalToSuperview().inset(170)
    }
}

问题分析 #

1. 固定像素值适配失效：所有间距（79、170）和图片尺寸（238、232）都是固定像素，仅适配设计图对应的屏幕尺寸，在小屏上会出现元素挤压，大屏上则间距过大。
2. heartButton约束冲突：同时绑定顶部间距和底部内边距，屏幕高度变化时两个约束会互相拉扯，导致布局变形。

解决方案 #

方案1：用UIStackView统一管理垂直布局

通过垂直StackView包裹所有元素，让布局自适应屏幕高度，同时保留元素间固定间距：

private func setupAdaptiveLayout() {
    let stackView = UIStackView(arrangedSubviews: [welcomeImage, welcomeLabel, heartButton])
    stackView.axis = .vertical
    stackView.alignment = .center
    stackView.spacing = 32
    stackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(stackView)
    
    // 让StackView居中，同时限制上下最小间距避免贴边
    NSLayoutConstraint.activate([
        stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        stackView.topAnchor.constraint(greaterThanOrEqualTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
        stackView.bottomAnchor.constraint(lessThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
    ])
    
    // 固定图片最大尺寸，防止大屏上过度放大
    welcomeImage.widthAnchor.constraint(equalToConstant: 238).isActive = true
    welcomeImage.heightAnchor.constraint(equalToConstant: 238).isActive = true
    heartButton.widthAnchor.constraint(equalToConstant: 232).isActive = true
    heartButton.heightAnchor.constraint(equalToConstant: 232).isActive = true
}

方案2：修改约束为相对值

保留原有布局结构，将固定像素改为相对屏幕高度的比例，同时调整heartButton的底部约束优先级：

private func addAdaptiveConstraints() {
    let safeArea = view.safeAreaLayoutGuide
    let screenHeight = UIScreen.main.bounds.height
    
    welcomeImage.snp.makeConstraints { make in
        // 顶部间距用屏幕高度比例替代固定79
        make.top.equalTo(safeArea.snp.top).offset(screenHeight * 0.1)
        make.width.height.equalTo(238)
        make.centerX.equalToSuperview()
    }
    
    welcomeLabel.snp.makeConstraints { make in
        make.centerX.equalToSuperview()
        make.top.equalTo(welcomeImage.snp.bottom).offset(32)
    }
    
    heartButton.snp.makeConstraints { make in
        make.top.equalTo(welcomeLabel.snp.bottom).offset(32)
        make.width.height.equalTo(232)
        make.centerX.equalToSuperview()
        // 底部设为最小间距，优先级低于顶部约束，避免挤压
        make.bottom.lessThanOrEqualTo(safeArea.snp.bottom).offset(-20)
    }
}

额外优化点 #

• 将welcomeImage的contentMode改为.scaleAspectFit，避免图片拉伸变形；
• 确保UIFont.hobbiesFont(style: .huge)支持动态字体，或根据屏幕尺寸调整字号，提升文字适配性。

内容的提问来源于stack exchange，提问作者kesape