在Xcode 9中为iPhone和iPad的View设置不同宽度

嘿，这个问题我做iOS适配时刚好碰到过，给你分享几个实用的解决思路：

方案1：利用Size Classes针对性设置约束 #

这是最常用的适配方式，因为iPad的水平Size Class默认是.regular，而iPhone大多是.compact（除了Plus/Max横屏）。

用Storyboard/Xib实现 #

1. 选中你的View，先添加一个宽度约束（比如设为375，或者屏幕宽度的0.7倍）
2. 在约束的属性面板里，找到「Installed」选项，点击旁边的+号
3. 选择「Regular Width | Regular Height」，这样这个宽度约束只会在iPad上生效，iPhone上自动忽略
4. 保留原有的宽高比约束，这样iPhone上依然靠宽高比自适应，iPad则被宽度约束限制住

用代码实现 #

如果是纯代码布局，可以在traitCollectionDidChange方法里根据Size Class动态调整：

// 先提前定义好宽高比约束和iPad专属宽度约束
private var aspectRatioConstraint: NSLayoutConstraint!
private var ipadWidthConstraint: NSLayoutConstraint!

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

private func setupView() {
    let targetView = UIView()
    targetView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(targetView)
    
    // 宽高比约束（比如1:1）
    aspectRatioConstraint = targetView.widthAnchor.constraint(equalTo: targetView.heightAnchor, multiplier: 1)
    aspectRatioConstraint.isActive = true
    
    // 居中约束
    NSLayoutConstraint.activate([
        targetView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        targetView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])
    
    // iPad宽度约束（比如屏幕宽度的0.7）
    ipadWidthConstraint = targetView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.7)
    // 默认不激活
    ipadWidthConstraint.isActive = false
}

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    // 判断是否是iPad的水平Size Class
    let isiPad = traitCollection.horizontalSizeClass == .regular && traitCollection.verticalSizeClass == .regular
    ipadWidthConstraint.isActive = isiPad
}

方案2：添加最大宽度约束 #

不需要判断设备，直接给View加一个最大宽度约束，优先级高于宽高比约束：

// 比如设置最大宽度为414（适配iPhone 14 Plus的宽度）
let maxWidthConstraint = targetView.widthAnchor.constraint(lessThanOrEqualToConstant: 414)
maxWidthConstraint.priority = .defaultHigh
maxWidthConstraint.isActive = true

这样在iPhone上，View的宽高比会正常生效（因为屏幕宽度小于414，最大宽度约束不起作用）；在iPad上，View会被限制在最大宽度内，不会无限拉伸。

方案3：用UIStackView包裹 #

把目标View放在一个水平居中的UIStackView里，给StackView设置宽度约束：

let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .center
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

stackView.addArrangedSubview(targetView)

// 给StackView设置iPad下的宽度限制
let stackWidthConstraint = stackView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.7)
stackWidthConstraint.isActive = true

// 同时保留目标View的宽高比约束
targetView.widthAnchor.constraint(equalTo: targetView.heightAnchor, multiplier: 1).isActive = true

StackView会自动限制内部View的宽度，避免过度拉伸，这种方式适合布局复杂的场景。

我之前做一个电商详情页的时候，就是用方案2快速解决的，给商品图片设置了最大宽度400，iPhone上自适应，iPad上刚好居中显示，体验很好。

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