iOS多iPhone机型适配咨询：为表情ImageView添加Auto Layout代码

嘿，针对你要做的四个表情图标自适应布局需求，我整理了完整的Swift代码方案，能完美适配iPhone 8、SE、8+这类不同尺寸的机型。先看完整实现，我再给你拆解每个关键部分：

import UIKit

class ViewController: UIViewController {
    
    // 定义四个表情ImageView，先做好基础配置
    let firstView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "emoji1") // 替换成你的实际表情图片名
        imageView.contentMode = .scaleAspectFit // 保证图片自适应且不拉伸变形
        imageView.translatesAutoresizingMaskIntoConstraints = false // 必须关闭自动约束转换，才能用自定义Auto Layout
        return imageView
    }()
    
    let secondView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "emoji2")
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()
    
    let thirdView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "emoji3")
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()
    
    let fourthView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "emoji4")
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupSubviews()
        setupAutoLayoutConstraints()
    }
    
    // 把所有表情视图添加到父视图
    private func setupSubviews() {
        view.addSubview(firstView)
        view.addSubview(secondView)
        view.addSubview(thirdView)
        view.addSubview(fourthView)
    }
    
    // 核心的Auto Layout约束设置
    private func setupAutoLayoutConstraints() {
        NSLayoutConstraint.activate([
            // 第一个表情：水平居中，顶部距离父视图顶部20%的高度（自适应不同屏幕）
            firstView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            firstView.topAnchor.constraint(equalTo: view.topAnchor, constant: view.frame.height * 0.2),
            
            // 第二个表情：在第一个表情下方，水平居中，间距为父视图高度的10%
            secondView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            secondView.topAnchor.constraint(equalTo: firstView.bottomAnchor, constant: view.frame.height * 0.1),
            
            // 第三个表情：在第二个表情下方，左边距离父视图左边20%的宽度
            thirdView.topAnchor.constraint(equalTo: secondView.bottomAnchor, constant: view.frame.height * 0.1),
            thirdView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: view.frame.width * 0.2),
            
            // 第四个表情：和第三个表情同高度，右边距离父视图右边20%的宽度，两者间距为父视图宽度的10%
            fourthView.topAnchor.constraint(equalTo: secondView.bottomAnchor, constant: view.frame.height * 0.1),
            fourthView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -view.frame.width * 0.2),
            fourthView.leadingAnchor.constraint(equalTo: thirdView.trailingAnchor, constant: view.frame.width * 0.1),
            
            // 所有表情的宽高约束：用比例适配，保证在不同屏幕上的视觉大小一致
            firstView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2),
            firstView.heightAnchor.constraint(equalTo: firstView.widthAnchor), // 保持正方形
            
            secondView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2),
            secondView.heightAnchor.constraint(equalTo: secondView.widthAnchor),
            
            thirdView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
            thirdView.heightAnchor.constraint(equalTo: thirdView.widthAnchor),
            
            fourthView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
            fourthView.heightAnchor.constraint(equalTo: fourthView.widthAnchor)
        ])
    }
}

关键适配细节说明 #

• 必开设置：每个UIImageView都要加translatesAutoresizingMaskIntoConstraints = false，这是使用自定义Auto Layout的前提，不然系统会自动生成约束覆盖你的设置。
• 图片适配：设置contentMode = .scaleAspectFit，确保表情图片在视图里自适应大小，不会被拉伸变形。
• 比例约束技巧：
  • 用multiplier（比例）来设置视图宽高，比如widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2)，这样表情宽度会是父视图的20%，在不同屏幕上自动缩放。
  • 用父视图尺寸的百分比作为间距（比如view.frame.height * 0.1），避免用固定数值，保证在不同屏幕上的视觉间距一致。
  • 横向排列的两个表情（第三、第四个），通过leading、trailing和互相的间距约束，确保它们在不同宽度的屏幕上左右留白相等，间距也自适应。
• 保持正方形：每个表情视图的高度等于宽度，用heightAnchor.constraint(equalTo: widthAnchor)，保证表情始终是正方形，不会因为屏幕宽高比变形。

更简洁的StackView替代方案 #

如果你想减少手动写约束的工作量，可以用UIStackView来管理布局，代码更简洁，适配性也更强：

// 用StackView简化布局的版本
private func setupAutoLayoutWithStackView() {
    // 垂直堆叠前两个表情
    let verticalStack = UIStackView(arrangedSubviews: [firstView, secondView])
    verticalStack.axis = .vertical
    verticalStack.alignment = .center
    verticalStack.spacing = view.frame.height * 0.1
    verticalStack.translatesAutoresizingMaskIntoConstraints = false
    
    // 水平堆叠后两个表情
    let horizontalStack = UIStackView(arrangedSubviews: [thirdView, fourthView])
    horizontalStack.axis = .horizontal
    horizontalStack.alignment = .center
    horizontalStack.spacing = view.frame.width * 0.1
    horizontalStack.translatesAutoresizingMaskIntoConstraints = false
    
    // 把两个子StackView再垂直堆叠起来
    let mainStack = UIStackView(arrangedSubviews: [verticalStack, horizontalStack])
    mainStack.axis = .vertical
    mainStack.alignment = .center
    mainStack.spacing = view.frame.height * 0.1
    mainStack.translatesAutoresizingMaskIntoConstraints = false
    
    view.addSubview(mainStack)
    
    // 只需要给主StackView设置约束，子视图的布局由StackView自动管理
    NSLayoutConstraint.activate([
        mainStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        mainStack.topAnchor.constraint(equalTo: view.topAnchor, constant: view.frame.height * 0.2),
        
        // 还是给每个表情设置宽高比例约束
        firstView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2),
        firstView.heightAnchor.constraint(equalTo: firstView.widthAnchor),
        
        secondView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.2),
        secondView.heightAnchor.constraint(equalTo: secondView.widthAnchor),
        
        thirdView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
        thirdView.heightAnchor.constraint(equalTo: thirdView.widthAnchor),
        
        fourthView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
        fourthView.heightAnchor.constraint(equalTo: fourthView.widthAnchor)
    ])
}

用StackView的好处是它会自动管理子视图的间距和排列，你只需要管好整体布局和每个表情的大小约束就行，代码更易维护。

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