0

在为输入附件视图的高度设置动画时,我遇到了奇怪的行为。我究竟做错了什么?

我创建了一个带有单个子视图的UIInputView子类 ( )。InputView的高度InputView和它的高度intrinsicContentSize由子视图控制。InputView为 50 像素高时isVisibletrue0 像素高时isVisible为假。

import UIKit

class InputView: UIInputView {
    private let someHeight: CGFloat = 50.0, zeroHeight: CGFloat = 0.0
    private let subView = UIView()
    private var hide: NSLayoutConstraint?, show: NSLayoutConstraint?

    var isVisible: Bool {
        get {
            return show!.isActive
        }
        set {
            // Always deactivate constraints before activating conflicting ones
            if newValue == true {
                hide?.isActive = false
                show?.isActive = true
            } else {
                show?.isActive = false
                hide?.isActive = true
            }
        }
    }

    // MARK: Sizing

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        return CGSize(width: size.width, height: someHeight)
    }

    override var intrinsicContentSize: CGSize {
        return CGSize.init(width: bounds.size.width, height: subView.bounds.size.height)
    }

    // MARK: Initializers

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect, inputViewStyle: UIInputViewStyle) {
        super.init(frame: frame, inputViewStyle: inputViewStyle)

        addSubview(subView)
        subView.backgroundColor = UIColor.purple

        translatesAutoresizingMaskIntoConstraints = false
        subView.translatesAutoresizingMaskIntoConstraints = false

        subView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor).isActive = true
        subView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        subView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        subView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor).isActive = true

        show = subView.heightAnchor.constraint(equalToConstant: someHeight)
        hide = subView.heightAnchor.constraint(equalToConstant: zeroHeight)
        hide?.isActive = true
    }
}

按下按钮时,主机视图控制器会isVisible在一秒钟的动画块中切换。

import UIKit

class MainViewController: UIViewController {
    let testInputView = InputView.init(frame: .zero, inputViewStyle: .default)

    @IBAction func button(_ sender: AnyObject) {
        UIView.animate(withDuration: 1.0) {
            let isVisible = self.testInputView.isVisible
            self.testInputView.isVisible = !isVisible
            self.testInputView.layoutIfNeeded()
        }
    }

    override var canBecomeFirstResponder: Bool {
        return true
    }

    override var inputAccessoryView: UIView? {
        return testInputView
    }

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

我希望输入附件视图在设置为时从屏幕底部平滑增长,并在设置isVisible为时true平滑收缩到屏幕按钮。取而代之的是,键盘背景覆盖层会立即以 50 像素的高度显示,并且输入附件视图从其框架的中心开始增长。isVisiblefalseisVisibletrue

紫色框不是从屏幕底部开始生长,被键盘覆盖背景包围

收缩时,输入附件视图会立即失去一些高度,然后才能平滑地继续动画。

我创建了一个显示此意外行为的输入附件视图演示项目。

4

1 回答 1

3

这将为您提供正确的动画:

    UIView.animate(withDuration: 1.0) {
        let isVisible = self.testInputView.isVisible
        self.testInputView.isVisible = !isVisible
        self.testInputView.superview?.superview?.layoutIfNeeded()
    }

但是,如果 Apple 更改设计,调用 superview 绝不是一个好习惯。所以可能会有更好的答案。

这就是超级视图所代表的内容:

print(testInputView.superview) // UIInputSetHostView

print(testInputView.superview?.superview) // UIInputSetContainerView

编辑:添加了更安全的解决方案

我对 UIInputView 不太熟悉。但是在不调用父视图的情况下解决它的一种方法是仅对子视图的高度变化进行动画处理:

第 1 步:
将 isVisible 移到动画块之外。

@IBAction func button(_ sender: AnyObject) {
    let isVisible = self.testInputView.isVisible
    self.testInputView.isVisible = !isVisible
    UIView.animate(withDuration: 1.0) {
        self.testInputView.layoutIfNeeded()
    }
}

第 2 步: 在 InputView 中创建一个新方法,该方法更改 InputView 的高度约束,而不是 intrinsicContentSize。

private func updateHeightConstraint(height: CGFloat) {
    for constraint in constraints {
        if constraint.firstAttribute == .height {
            constraint.constant = height
        }
    }
    self.layoutIfNeeded()
}

第 3 步: 并在 setter 中调用该方法。

if newValue == true {
     updateHeightConstraint(height: someHeight)
     hide?.isActive = false
     show?.isActive = true
} else {
     updateHeightConstraint(height: zeroHeight)
     show?.isActive = false
     hide?.isActive = true
}

第 4 步: 最后在 init 中进行一些更改。

override init(frame: CGRect, inputViewStyle: UIInputViewStyle) {
    super.init(frame: frame, inputViewStyle: inputViewStyle)

    addSubview(subView)

    backgroundColor = .clear
    subView.backgroundColor = UIColor.purple

    subView.translatesAutoresizingMaskIntoConstraints = false

    subView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    subView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
    subView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor).isActive = true

    show = subView.heightAnchor.constraint(equalToConstant: someHeight)
    hide = subView.heightAnchor.constraint(equalToConstant: zeroHeight)
    hide?.isActive = true
}

结论: 这导致 InputView 在动画紫色子视图的高度之前改变了它的高度。唯一的缺点是 UIInputView,它默认有某种灰色背景,不能更改为清除。但是,您可以使用与 VC 相同的背景颜色。

但是,如果您改为使用常规 UIView 作为 InputAccessoryView ,则默认为 UIColor.clear 。比第一次“跳跃”不会被注意到。

于 2017-11-07T19:28:49.263 回答