宽度约束动画时，UITextfield文本位置不动画 [英] UITextfield text position not animating while width constraint is animated

问题描述

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

首先，只有月份文本字段显示在容器中并采用完整宽度，然后，当用户选择月份时，将显示日期文本字段，并且它们都占用一半的时间。容器。

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

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

第1步：动画之前的文本字段

第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（）
} 
  

解决方案

我有几乎完全相同的问题。请参阅我的问题及其答案以供参考：

说明

1. 对于每个字段（月，日），请创建两个文本字段，例如 monthTextField 和 monthBorderTextField 。


2. 删除 monthTextField 的边框和背景颜色。保留 borderTextField 的边框和背景颜色。


3. 在 borderTextField 中将 monthTextField 居中。


4. 根据需要设置 borderTextField 的宽度。

Github链接和代码

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

这里是代码我的MyViewController类的测试项目。其他所有内容都在情节提要中进行了设置，可在上述链接的Github上查看。

  class MyViewController：UIViewController {
 
 // Hello World TextField Border var 
 @IBOutlet弱var borderTextFieldWidth：NSLayoutConstraint！ 
 
 //按钮变量
 @IBOutlet弱var myButton：UIButton！ 
 var grow：Bool = false 
 
 func animateGrowShrinkTextFields（grow：Bool，duration：TimeInterval）{
 if grow {
 UIView.animate（withDuration：持续时间，动画：{{
 self.borderTextFieldWidth.constant = 330 
 self.view.layoutIfNeeded（）
}，完成：{（完成：Bool）在
 print（完成动画制作！ ）
}）
}否则{
 UIView.animate（withDuration：持续时间，动画：{
 self.borderTextFieldWidth.constant = 115 
 self.view.layoutIfNeeded （）
}，完成：{（完成：布尔）in 
 print（收缩动画完成！）
}）
} 
} 
 
 @IBAction func toggle（）{
 let持续时间：TimeInterval = 1.0 
 grow =！grow 
 let title = grow吗？ 收缩：增长 
 myButton.setTitle（标题，用于：UIControlState.normal）
 animateGrowShrinkTextFields（增长：生长，持续时间：持续时间）
} 
} 
  

注释和参考

导致我想到此解决方案的是@JimmyJames的评论：您只是在动画UITextField宽度，但是里面的内容没有动画。

我研究了如何制作动画字体更改并遇到以下问题：有没有办法要动画化UILabel的textAlignment？

在该问题中@CSmith提到您可以动画化FRAME，而不是textAlignment动画 https://stackoverflow.com/a/19251634/2179970

在这个问题建议在另一个框架中使用UILabel。 https://stackoverflow.com/a/19251735/2179970

I have three UITextField aligned in a container used to choose a date.

At first only the month textfield is shown in the container and takes the full width, then when the user chose the month, the day textfield appear and they both take half of the container.

The text alignement in these textfields is centered.

My problem is that when I animate their size, the text doesn't animate and jumps directly to the final position while the width of the textfields animate correctly.

Step 1 : The TextField Before Animation

Step 2 : The TexField width is animating but the text is already in the final position

Step 3 : The TexField Finished Animating

My code used to animate the constraint :

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

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

解决方案

I had almost the exact same question. Please see my question and its answer for reference: UITextField text jumps when animating width constraint

Solution Demo

The solution is to embed your textfields within another view (e.g. another UITextField or a UIView). In the gif below, I put a textfield within a textfield. Note that helloWorldTextField has a blue border to show its location within the second textfield behind it.

Instructions

1. For each field (month, day), make two textfields, e.g. monthTextField and monthBorderTextField.
2. Remove monthTextField's border and background color. Keep borderTextField's border and background color.
3. Center monthTextField within borderTextField.
4. Animate the width of borderTextField as needed.

Github link and Code

Here is the link to my project on Github: https://github.com/starkindustries/ConstraintAnimationTest

Here is the code for my test project for my MyViewController class. Everything else is setup in the storyboard which can be viewed on Github at the link above.

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)
    }
}

Notes and References

What led me to this solution was @JimmyJames's comment: "You are just animating the UITextField width, but the content inside is not animated."

I researched how to animate font changes and came across this question: Is there a way to animate changing a UILabel's textAlignment?

In that question @CSmith mentioned that "you can animate the FRAME, not the textAlignment" https://stackoverflow.com/a/19251634/2179970

The accepted answer in that question suggests to use a UILabel within another frame. https://stackoverflow.com/a/19251735/2179970

这篇关于宽度约束动画时，UITextfield文本位置不动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！