首页 > 解决方案 > 将子视图设置为隐藏在 UIStackView 中时出现奇怪的拉伸效果

问题描述

我正在尝试创建一个UITableView底部有一个隐藏的子视图,当点击单元格时它会滑动打开。我有以下演示代码:

class ViewController: UIViewController {
    
    let tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
        
        tableView.separatorStyle = .none
        tableView.register(ExpandTableCell.self, forCellReuseIdentifier: "Cell")
        tableView.dataSource = self
        tableView.delegate = self
    }

}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
        return cell ?? UITableViewCell()
    }
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
}

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        guard let cell = tableView.cellForRow(at: indexPath) as? ExpandTableCell else { return }
        tableView.performBatchUpdates({ cell.animate() }, completion: nil)
    }
}

和细胞:

class ExpandTableCell: UITableViewCell {

    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setup()
    }

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

    private func setup() {
        setupViews()
    }
    
    private let blueView = UIView()
    
    // MARK: - Views
    
    private func setupViews() {
        selectionStyle = . none
        
        let titleLabel  = UILabel()
        titleLabel.text = "Some Title"
        
        let subtitleLabel = UILabel()
        subtitleLabel.text = "Some othere sdfhdslkjl dsfljdslfj sdlj sdfldsjfldsjf sdfjdslfjds"
        subtitleLabel.numberOfLines = 2
        
        blueView.backgroundColor = .blue
        blueView.translatesAutoresizingMaskIntoConstraints = false
        blueView.heightAnchor.constraint(equalToConstant: 50.0).isActive = true
        
        let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel, blueView])
        stackView.axis = .vertical
        stackView.spacing = 8.0
        
        blueView.isHidden = true
        
        addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
    
    func animate() {
        UIView.animate(withDuration: 0.1, animations: { [blueView] in
            blueView.isHidden.toggle()
        })
    }

}

问题是动画有以下效果:

在此处输入图像描述

它正在挤压其上方标签的内容。它应该只是从底部滑下来。

我在这里做错了什么?

标签: iosswiftuitableviewuistackview

解决方案


只需更改动画时间以匹配 tableView 的时间。试试 0.3

    func animate() {
        UIView.animate(withDuration: 0.3, animations: { [blueView] in
            blueView.isHidden.toggle()
        })
    }

神器不见了。


推荐阅读