请求修改iOS代码约束，使界面匹配第二张截图效果

请修改以下iOS项目代码的约束设置，使界面布局与目标截图效果一致：

原代码 #

class DetailsHomeViewController: UIViewController {

var images:[String] = ["label","label","label"]

let MainImageView: UIImageView = {
          let theImageView = UIImageView()
          theImageView.image = UIImage(named: "label.png")
          theImageView.translatesAutoresizingMaskIntoConstraints = false
          return theImageView
       }()

let someImageView: UIImageView = {
    let theImageView = UIImageView()
    theImageView.backgroundColor = .white
    theImageView.translatesAutoresizingMaskIntoConstraints = false
    theImageView.isUserInteractionEnabled = true
    return theImageView
}()

lazy var collectionView:UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.dataSource = self
    cv.delegate = self
    cv.register(ImageCell.self, forCellWithReuseIdentifier: ImageCell.identifier)
    cv.translatesAutoresizingMaskIntoConstraints = false
    return cv
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(MainImageView)
    view.addSubview(someImageView)
    someImageView.addSubview(collectionView)
    someImageViewConstraints()
    MainImageViewConstraints()
    
    view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    setupViews()
    mysetupViews()
}

private func setupViews() {
    someImageViewConstraints()
}

func someImageViewConstraints() {
    someImageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.width/2)
    someImageView.center = view.center

    let itemHeight = 120
    let padding = 25
    let width = (itemHeight * 3) + padding
    collectionView.frame = CGRect(x: Int(view.center.x) - (width / 2),
                                  y: Int(someImageView.frame.height) - (itemHeight + padding),
                                  width: width, height: itemHeight)
}

private func mysetupViews() {
        createCustomNavigationBar()
        
        let RightButton = createCustomButton(
            imageName: "square.and.arrow.up",
            selector: #selector(RightButtonTapped)
        )
        
        let customTitleView = createCustomTitleView(
            detailsName: "Label"
        )
        
        navigationItem.rightBarButtonItems = [RightButton]
        navigationItem.titleView = customTitleView
    }

@objc private func RightButtonTapped() {
    print("RightButtonTapped")
}

func MainImageViewConstraints() {
    MainImageView.translatesAutoresizingMaskIntoConstraints = false
}
}

extension DetailsHomeViewController:UICollectionViewDataSource , UICollectionViewDelegate {

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return images.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCell.identifier, for: indexPath) as! ImageCell
    cell.someImageView.image = UIImage(named: images[indexPath.row])
    return cell
}
}

extension DetailsHomeViewController:UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.height, height: collectionView.frame.height)
}
}

class ImageCell:UICollectionViewCell {
static let identifier = "ImageCell"

override var isSelected: Bool {
    didSet {
        self.someImageView.layer.borderColor = isSelected ? UIColor.green.cgColor : UIColor.clear.cgColor
        self.someImageView.layer.borderWidth = 5
    }
}

let someImageView: UIImageView = {
    let theImageView = UIImageView()
    theImageView.clipsToBounds = true
    return theImageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.layer.cornerRadius = 8
    self.clipsToBounds = true
    addSubview(someImageView)
    someImageView.frame = self.bounds
}

override func layoutSubviews() {
    super.layoutSubviews()
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

修改后的代码 #

class DetailsHomeViewController: UIViewController {

var images:[String] = ["label","label","label"]

let MainImageView: UIImageView = {
    let theImageView = UIImageView()
    theImageView.image = UIImage(named: "label.png")
    theImageView.translatesAutoresizingMaskIntoConstraints = false
    theImageView.contentMode = .scaleAspectFill
    theImageView.clipsToBounds = true
    return theImageView
}()

let someImageView: UIImageView = {
    let theImageView = UIImageView()
    theImageView.backgroundColor = .white
    theImageView.translatesAutoresizingMaskIntoConstraints = false
    theImageView.isUserInteractionEnabled = true
    return theImageView
}()

lazy var collectionView:UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.dataSource = self
    cv.delegate = self
    cv.register(ImageCell.self, forCellWithReuseIdentifier: ImageCell.identifier)
    cv.translatesAutoresizingMaskIntoConstraints = false
    cv.backgroundColor = .clear
    return cv
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(MainImageView)
    view.addSubview(someImageView)
    someImageView.addSubview(collectionView)
    
    setupConstraints()
    
    view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    mysetupViews()
}

private func setupConstraints() {
    NSLayoutConstraint.activate([
        MainImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        MainImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        MainImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        MainImageView.bottomAnchor.constraint(equalTo: someImageView.topAnchor),
        
        someImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        someImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        someImageView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        someImageView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5),
        
        collectionView.bottomAnchor.constraint(equalTo: someImageView.bottomAnchor, constant: -25),
        collectionView.leadingAnchor.constraint(equalTo: someImageView.leadingAnchor),
        collectionView.trailingAnchor.constraint(equalTo: someImageView.trailingAnchor),
        collectionView.heightAnchor.constraint(equalToConstant: 120)
    ])
}

private func mysetupViews() {
    createCustomNavigationBar()
    
    let RightButton = createCustomButton(
        imageName: "square.and.arrow.up",
        selector: #selector(RightButtonTapped)
    )
    
    let customTitleView = createCustomTitleView(
        detailsName: "Label"
    )
    
    navigationItem.rightBarButtonItems = [RightButton]
    navigationItem.titleView = customTitleView
}

@objc private func RightButtonTapped() {
    print("RightButtonTapped")
}
}

extension DetailsHomeViewController:UICollectionViewDataSource , UICollectionViewDelegate {

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return images.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCell.identifier, for: indexPath) as! ImageCell
    cell.someImageView.image = UIImage(named: images[indexPath.row])
    return cell
}
}

extension DetailsHomeViewController:UICollectionViewDelegateFlowLayout {

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 15
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 15
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 120, height: 120)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let totalItemWidth = 120 * 3 + 15 * 2
    let inset = (collectionView.bounds.width - totalItemWidth) / 2
    return UIEdgeInsets(top: 0, left: max(inset, 0), bottom: 0, right: max(inset, 0))
}
}

class ImageCell:UICollectionViewCell {
static let identifier = "ImageCell"

override var isSelected: Bool {
    didSet {
        self.someImageView.layer.borderColor = isSelected ? UIColor.green.cgColor : UIColor.clear.cgColor
        self.someImageView.layer.borderWidth = 5
    }
}

let someImageView: UIImageView = {
    let theImageView = UIImageView()
    theImageView.clipsToBounds = true
    theImageView.contentMode = .scaleAspectFill
    theImageView.translatesAutoresizingMaskIntoConstraints = false
    return theImageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    self.layer.cornerRadius = 8
    self.clipsToBounds = true
    addSubview(someImageView)
    
    NSLayoutConstraint.activate([
        someImageView.topAnchor.constraint(equalTo: self.topAnchor),
        someImageView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        someImageView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        someImageView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
    ])
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

核心修改说明 #

• 替换Frame布局为Auto Layout：移除原有的frame布局方法，新增setupConstraints()统一管理所有元素约束，适配不同屏幕尺寸和旋转场景
• 主图布局优化：给MainImageView添加填充安全区域上半部分的约束，设置scaleAspectFill模式避免图片拉伸变形
• CollectionView配置调整：
  • 设置横向布局方向，匹配目标界面的横向排列效果
  • 调整item间距为15pt，增加留白提升视觉舒适度
  • 固定item尺寸为120x120pt，通过section内边距计算实现三个item居中显示
• Cell内部约束优化：将cell内的图片改为Auto Layout约束，替换原frame布局，确保cell尺寸变化时图片正确填充
• 细节优化：设置collectionView背景透明，避免遮挡下层视图

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