宽度约束动画时UITextfield文本位置没有动画

Posted 2023-03-06

【中文标题】宽度约束动画时UITextfield文本位置没有动画

【英文标题】：UITextfield text position not animating while width constraint is animated

【发布时间】：2017-02-26 16:31:32

【问题描述】：

我在一个用于选择日期的容器中对齐了三个 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()

【问题讨论】：

@shallowThought 我知道我迟到了几个月，但请看看我的回答。谢谢

@ZionPerez 我猜你指的是马蒂亚斯，而不是我。 :-)

@shallowThought :) 是的，你和马蒂亚斯。我想你可能在编辑后也有同样的问题，但也许没有？

【参考方案1】：

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

解决方案演示

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

说明

为每个字段（月、日）创建两个文本字段，例如monthTextField 和 monthBorderTextField。 删除monthTextField 的边框和背景颜色。保留borderTextField 的边框和背景颜色。 在borderTextField 内居中monthTextField。 根据需要为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 宽度设置动画，但里面的内容没有动画。”

我研究了如何为字体更改设置动画并遇到了这个问题：Is there a way to animate changing a UILabel's textAlignment?

在那个问题中@CSmith 提到“您可以为 FRAME 设置动画，而不是 textAlignment”https://***.com/a/19251634/2179970

该问题中接受的答案建议在另一个框架内使用 UILabel。 https://***.com/a/19251735/2179970

【讨论】：

在 Apple 修复之前，我将采用此解决方案，谢谢 :)

没问题！很高兴帮助:)