iOS中点击关闭按钮隐藏closingView后如何调整detailsView尺寸

核心实现逻辑 #

这种视图间的布局联动不需要手动计算、修改detailsView的frame，基于AutoLayout的约束驱动机制即可实现自动适配，搭配IBAnimatable的动画能力可以做到平滑过渡的交互效果，避免生硬的视图跳变。

前置布局配置要求 #

在Storyboard/XIB完成初始布局搭建时，需要保证垂直方向的约束链闭环、无冲突：

• 给closingView绑定固定高度约束，将该约束连线到代码中作为可调整的属性
• 配置closingView与下方detailsView的垂直间距约束，同样连线到代码中
• 保证detailsView的上下、左右约束可以顺着约束链传递到容器视图/ScrollView的contentLayoutGuide，确保AutoLayout可以自动计算出detailsView的最终可用尺寸

交互逻辑代码实现 #

改造原有按钮点击的处理逻辑，通过调整约束常量的方式触发布局更新，搭配IBAnimatable的内置动画实现平滑交互：

import UIKit
import IBAnimatable

class ViewController: UIViewController {
    @IBOutlet weak var closingView: AnimatableView!
    @IBOutlet weak var detailsView: AnimatableView!
    @IBOutlet weak var btnClose: UIButton!
    @IBOutlet weak var closeViewBtn: UIView!
    @IBOutlet weak var scrollView: UIScrollView!
    // 从Storyboard连线的约束引用
    @IBOutlet weak var closingViewHeightConstraint: NSLayoutConstraint!
    @IBOutlet weak var closingToDetailsSpacingConstraint: NSLayoutConstraint!

    var isCloseButtonTapped = false
    // 缓存closingView的初始高度，便于展开时恢复
    private var originalClosingViewHeight: CGFloat = 0
    // 两个视图的初始设计间距，可根据实际设计稿调整
    private let defaultSpacing: CGFloat = 16

    override func viewDidLoad() {
        super.viewDidLoad()
        // 加载时记录closingView的初始高度
        originalClosingViewHeight = closingViewHeightConstraint.constant
    }

    @IBAction func btnCloseAction(_ sender: Any) {
        isCloseButtonTapped.toggle()
        if isCloseButtonTapped {
            // 关闭状态：消除closingView的高度、消除两个视图的间距
            closingViewHeightConstraint.constant = 0
            closingToDetailsSpacingConstraint.constant = 0
            // 调用IBAnimatable的渐隐动画，动画结束后隐藏视图
            closingView.fadeOut(duration: 0.3) { _ in
                self.closingView.isHidden = true
            }
        } else {
            // 展开状态：恢复初始高度与间距
            closingView.isHidden = false
            closingViewHeightConstraint.constant = originalClosingViewHeight
            closingToDetailsSpacingConstraint.constant = defaultSpacing
            closingView.fadeIn(duration: 0.3)
        }
        // 用动画块包裹约束更新，实现布局变化的平滑过渡
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
}

注意事项 #

• 无需手动修改detailsView的frame或高度约束：只要垂直方向约束链闭环，调整上游closingView的高度、间距后，AutoLayout会自动计算出detailsView的正确可用尺寸，手动修改反而容易引发约束冲突
• 不建议直接依赖系统对isHidden视图的默认约束处理：系统在视图标记为隐藏时，会自动将该视图的约束优先级降到较低值，遇到复杂布局时容易出现布局跳动、约束报错的问题，手动调整约束常量的实现方式稳定性更高
• 如果界面是普通UIView容器（非ScrollView），只要垂直约束链从顶部到底部是闭环的，上述逻辑可以直接复用，不需要额外适配

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