Swift中NSLayoutConstraints的奇怪行为

时间:2018-09-26 13:18:41

标签: ios swift uitableview nslayoutconstraint

我的视图顶部有一个textField,应该在textField下方放置一个tableView。

所以我添加它们的代码如下:

private func setupSearchBar() {
    searchtextField = UITextField()
    mapView.addSubview(searchtextField)
    searchtextField.translatesAutoresizingMaskIntoConstraints = false

    let constraints = [
        NSLayoutConstraint(item: searchtextField, attribute: .leading, relatedBy: .equal, toItem: mapView.safeAreaLayoutGuide, attribute: .leading, multiplier: 1.0, constant: 16.0),
        NSLayoutConstraint(item: searchtextField, attribute: .trailing, relatedBy: .equal, toItem: mapView.safeAreaLayoutGuide, attribute: .trailing, multiplier: 1.0, constant: -16.0),
        NSLayoutConstraint(item: searchtextField, attribute: .top, relatedBy: .equal, toItem: mapView.safeAreaLayoutGuide, attribute: .top, multiplier: 1.0, constant: 24.0),
        NSLayoutConstraint(item: searchtextField, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 46.0)
        ]

    NSLayoutConstraint.activate(constraints)
}

在此之后,我设置了tableView:

private func setupResultsTableView() {
    tableView = UITableView()
    mapView.addSubview(tableView)
    tableView.translatesAutoresizingMaskIntoConstraints = false

    tableViewHeightAnchor = tableView.heightAnchor.constraint(equalToConstant: 0)
    let constraints = [
        tableView.safeAreaLayoutGuide.topAnchor.constraint(equalTo: searchtextField.safeAreaLayoutGuide.bottomAnchor),
        tableView.safeAreaLayoutGuide.leadingAnchor.constraint(equalTo: mapView.safeAreaLayoutGuide.leadingAnchor),
        tableView.safeAreaLayoutGuide.trailingAnchor.constraint(equalTo: mapView.trailingAnchor),
        tableViewHeightAnchor!,
        tableView.safeAreaLayoutGuide.bottomAnchor.constraint(lessThanOrEqualToSystemSpacingBelow: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 1.0)
    ]
    NSLayoutConstraint.activate(constraints)
}

我想做的是: 1.将tableView高度设置为0 2.当用户开始输入我的textField时,根据搜索结果显示tablView并将其高度设置为tableView的contentSize。因此,最大大小将固定在设备底部,如果显示1-2个结果,则使tableView变小。

当用户开始输入内容时,我运行下一个:

func textFieldDidBeginEditing(_ textField: UITextField) {        
    filterContentForSearchText(textField.text!)
    tableView.reloadData()

    UIView.animate(withDuration: 0.6) {
        self.tableView.layoutIfNeeded()

        if textField.isEditing {
            self.tableViewHeightAnchor.constant = self.tableView.contentSize.height
        } else {
            self.tableViewHeightAnchor.constant = 0.0
        }
    }
}

但是我的代码有问题,因为我得到了如此丑陋的结果: 当我开始向上滑动时,tableView开始向上移动并越过我的textField

enter image description here

,当我完成滚动时,它会停在视图中间 enter image description here

是否有解决此问题的方法?如有任何疑问,请问我

1 个答案:

答案 0 :(得分:1)

让tableView设置为全高并切换其可见性,如下所示:

tableView.backgroundColor = .clear
tableView.isHidden = true
tableView.tableFooterView = UIView()

对于tableView具有以下约束:

NSLayoutConstraint.activate([
    tableView.topAnchor.constraint(equalTo: searchtextField.bottomAnchor),
    tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 1.0)
])

现在,我们可以使用UITextFieldDelegate方法来切换tableView:

func textFieldDidBeginEditing(_ textField: UITextField) {
    self.toggleSearch(true)
}

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    textField.resignFirstResponder()
    return true
}

func textFieldDidEndEditing(_ textField: UITextField) {
    self.toggleSearch(false)
}

private func toggleSearch(_ value: Bool) {
    self.tableView.isHidden = !value
}

别忘了设置searchtextField.delegate = self

另外,您可以添加半透明backgroundView并使用toggleSearch的动画版本淡入/淡出tableView:

let backgroundView = UIView()
backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.3)
backgroundView.layer.opacity = 0
tableView.backgroundView = backgroundView

private func toggleSearch(_ value: Bool) {
    var completionBlock: ((Bool) -> Void)?
    if (value) {
        self.tableView.isHidden = false
    } else {
        completionBlock = { [weak self] _ in self?.tableView.isHidden = true }
    }

    UIView.animate(withDuration: 0.3, animations: {
        self.tableView.backgroundView?.layer.opacity = value ? 1 : 0
    }, completion: completionBlock)
}