宽度约束动画时，UITextfield文本位置不动画

Question

我在用于选择日期的容器中对齐了三个UITextField。

最初，容器中仅显示月份文本字段并采用完整宽度，然后，当用户选择月份时，将显示日期文本字段，并且它们都占用了一半的容器。

这些文本字段中的文本对齐方式居中。

我的问题是，当我设置其大小的动画时，文本不设置动画，而是直接跳到最终位置，而文本字段的宽度正确地设置了动画。

步骤1：动画之前的TextField

步骤2：TexField宽度正在设置动画，但是文本已经在最终位置

步骤3：TexField完成动画处理

我的代码过去常常用来制作约束：

monthTextfieldTrailingConstraint.priority = currentDateSelectionType == .month ? UILayoutPriorityDefaultHigh : UILayoutPriorityDefaultLow
dayTextfieldTrailingConstraint.priority = currentDateSelectionType == .day ? UILayoutPriorityDefaultHigh : UILayoutPriorityDefaultLow
yearTextfieldTrailingConstraint.priority = currentDateSelectionType == .year ? UILayoutPriorityDefaultHigh : UILayoutPriorityDefaultLow

UIView.animate(withDuration: nextStepAnimationDuration) {
    self.layoutIfNeeded()
}

Answer 1

我有几乎完全相同的问题。请参阅我的问题及其答案以供参考：UITextField text Jumps when animating width constraint

解决方案演示

解决方案是将文本字段嵌入到另一个视图中（例如另一个 UITextField 或 UIView）。在下面的 gif 中，我将一个文本字段放在一个文本字段中。请注意，它helloWorldTextField有一个蓝色边框，显示其在其后面的第二个文本字段中的位置。

指示

1. 对于每个字段（月、日），创建两个文本字段，例如monthTextField和monthBorderTextField。
2. 删除monthTextField的边框和背景颜色。保留borderTextField的边框和背景颜色。
3. 中心monthTextField内borderTextField。
4. borderTextField根据需要对宽度进行动画处理。

Github 链接和代码

这是我在 Github 上的项目的链接： https: //github.com/starkindustries/ConstraintAnimationTest

这是我的 MyViewController 类的测试项目的代码。其他所有内容都在故事板中设置，可以通过上面的链接在 Github 上查看。

class MyViewController: UIViewController {

    // Hello World TextField Border var
    @IBOutlet weak var borderTextFieldWidth: NSLayoutConstraint!

    // Button Vars
    @IBOutlet weak var myButton: UIButton!
    var grow: Bool = false

    func animateGrowShrinkTextFields(grow: Bool, duration: TimeInterval) {
        if grow {
            UIView.animate(withDuration: duration, animations: {
                self.borderTextFieldWidth.constant = 330
                self.view.layoutIfNeeded()
            }, completion: { (finished: Bool) in
                print("Grow animation complete!")
            })
        } else {
            UIView.animate(withDuration: duration, animations: {
                self.borderTextFieldWidth.constant = 115
                self.view.layoutIfNeeded()
            }, completion: { (finished: Bool) in
                print("Shrink animation complete!")
            })
        }
    }

    @IBAction func toggle(){
        let duration: TimeInterval = 1.0
        grow = !grow
        let title = grow ? "Shrink" : "Grow"
        myButton.setTitle(title, for: UIControlState.normal)
        animateGrowShrinkTextFields(grow: grow, duration: duration)
    }
}

注释和参考文献

促使我找到这个解决方案的是 @JimmyJames 的评论：“您只是对 UITextField 宽度进行动画处理，但其中的内容并未进行动画处理。”

我研究了如何对字体更改进行动画处理，并遇到了这个问题：是否有一种方法可以对 UILabel 的 textAlignment 进行动画更改？

在该问题中@CSmith提到“您可以对框架进行动画处理，而不是对文本对齐进行动画处理” /sf/answers/1347614411/

该问题中接受的答案建议在另一个框架内使用 UILabel。/sf/answers/1347621481/