iOS AutoLayout技术问询：如何让两个UIImageView居中且布局稳定

嘿，我来帮你搞定这个AutoLayout的小麻烦！你遇到的下移问题，核心是垂直方向的约束没抓对重心，咱们一步步来解决：

核心约束思路 #

要实现「居中同行+保持比例+父视图调整不位移」，需要这几个关键约束：

• 给每个UIImageView固定宽高比，确保缩放时比例不变
• 让两个视图水平排列并对齐
• 把整个组合和父视图的垂直、水平中心绑定，这是解决下移的关键！

最省心的实现方式：用UIStackView #

StackView能自动处理水平排列和间距，不用手动写一堆约束，代码更简洁：

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupImageViewLayout()
    }
    
    // 第一个图片视图
    let firstImageView: UIImageView = {
        let iv = UIImageView()
        iv.image = #imageLiteral(resourceName: "your-first-image") // 替换成你的图片名
        iv.contentMode = .scaleAspectFit // 保持图片比例不拉伸
        iv.clipsToBounds = true
        iv.translatesAutoresizingMaskIntoConstraints = false // 必须关闭自动布局开关
        return iv
    }()
    
    // 第二个图片视图
    let secondImageView: UIImageView = {
        let iv = UIImageView()
        iv.image = #imageLiteral(resourceName: "your-second-image")
        iv.contentMode = .scaleAspectFit
        iv.clipsToBounds = true
        iv.translatesAutoresizingMaskIntoConstraints = false
        return iv
    }()
    
    private func setupImageViewLayout() {
        // 创建水平方向的StackView，把两个ImageView加进去
        let horizontalStack = UIStackView(arrangedSubviews: [firstImageView, secondImageView])
        horizontalStack.axis = .horizontal
        horizontalStack.spacing = 20 // 两个视图之间的间距，按需调整
        horizontalStack.alignment = .center // 垂直方向对齐
        horizontalStack.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(horizontalStack)
        
        // 激活所有约束
        NSLayoutConstraint.activate([
            // 给每个ImageView设置宽高比（这里用1:1，你可以改成需要的比例，比如2:3）
            firstImageView.widthAnchor.constraint(equalTo: firstImageView.heightAnchor, multiplier: 1.0),
            secondImageView.widthAnchor.constraint(equalTo: secondImageView.heightAnchor, multiplier: 1.0),
            
            // StackView和父视图的约束：居中+尺寸限制
            horizontalStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            horizontalStack.centerYAnchor.constraint(equalTo: view.centerYAnchor), // 垂直居中，解决下移问题
            horizontalStack.widthAnchor.constraint(lessThanOrEqualTo: view.widthAnchor, multiplier: 0.8), // 留左右边距
            horizontalStack.heightAnchor.constraint(lessThanOrEqualTo: view.heightAnchor, multiplier: 0.4) // 限制最大高度，避免父视图太窄时图片过高
        ])
    }
}

为什么之前会下移？ #

大概率是你没给组合视图设置垂直中心对齐，反而用了topAnchor这类固定距离的约束。当父视图高度变化时，顶部距离不变，但整体就会被挤到下方。绑定centerYAnchor到父视图中心，不管父视图怎么变，都会稳稳待在垂直中间。

不用StackView的手动约束方案（可选） #

如果不想用StackView，也可以手动给两个ImageView加约束：

• 第一个ImageView的centerYAnchor绑定到父视图centerYAnchor
• 第二个ImageView的centerYAnchor同样绑定到父视图centerYAnchor
• 两个ImageView之间设置固定间距
• 给第一个ImageView加leadingAnchor和父视图的间距（或者用centerX偏移），第二个ImageView加trailingAnchor和父视图的间距
• 再加上各自的宽高比约束

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