How to change WIDTH of UITableView with animation? - ios

Question

I have UITableView on the left size and plain UIView on the right side in my UIViewController
UITableView connects to .top, .leading and .bottom of
superview
UIView connects to .top, .trailing and .bottom of
superview, also it has .width
And UITableView .leading ==
.trailing of UIView
All these constraints you can see on the screenshot:
Here is my animation code in the controller, as you can see I update .width of UIView and also I cycle the animation.
class ViewController: UIViewController {
#IBOutlet var widthConstaint: NSLayoutConstraint!
#IBOutlet var tableView: UITableView!
#IBOutlet var watchContainerView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
start()
}
func start() {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
if self.widthConstaint.constant == 50 {
self.change(width: 100)
} else {
self.change(width: 50)
}
self.start()
}
}
func change(width: CGFloat) {
widthConstaint.constant = width
UIView.animate(withDuration: 1.0) {
self.view.layoutIfNeeded()
}
}
}
extension ViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
return cell
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 300
}
}
As a result you can see this on .gif, what I should for smooth animation, without this glitch?

Answer 1

UPDATE
I tried to reproduce the UILabel wrong behavior with my own UIView subclass:
class MyView: UIView {
var currentSize: CGSize = .zero
override func layoutSubviews() {
super.layoutSubviews()
guard currentSize != bounds.size else { return }
currentSize = bounds.size
setNeedsDisplay()
}
override func draw(_ rect: CGRect) {
UIColor.purple.setFill()
UIBezierPath(rect: rect).fill()
let square = CGRect(x: rect.width - 50, y: rect.origin.y, width: 50, height: rect.height)
UIColor.blue.setFill()
UIBezierPath(rect: square).fill()
}
}
The view draws a little blue rectangle at its right, as a text. And… well… the animation is also good!
But if I change the contentMode to left (the default value is scaleToFill):
The blue square jumps from one place to the other.
So, I found out this is not only related to the UILabel's textAlignment. It's its combinaison with the default left content mode of the UILabel.
contentMode defines how the content should be adjusted if the content's size and the bounds size are different - this is case during the animation, the view redraws itself with its new size right before being resized.
So
label.contentMode = .left // default
label.textAlignment = .left
will behave as:
label.contentMode = .right
label.textAlignment = .right
PREVIOUS ANSWER
I spent some time on your problem. Guess what?
It's not related to the table view at all. It's because of the .right text alignment of the label.
You can reproduce the glitch with a simple UILabel:
class ViewController: UIViewController {
let label = UILabel()
var rightConstraint: NSLayoutConstraint!
override func loadView() {
view = UIView()
view.backgroundColor = .white
}
override func viewDidLoad() {
super.viewDidLoad()
setUpView()
start()
}
func start() {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
if self.rightConstraint.constant == 50 {
self.change(width: 100)
} else {
self.change(width: 50)
}
self.start()
}
}
func change(width: CGFloat) {
rightConstraint.constant = width
UIView.animate(withDuration: 1.0) {
self.view.layoutIfNeeded()
}
}
func setUpView() {
label.text = "Label"
label.textAlignment = .right
view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
rightConstraint = view.trailingAnchor.constraint(equalTo: label.trailingAnchor)
rightConstraint.isActive = true
label.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
}
}
Why?
To find out the error, I created a UILabel subclass and overrode action(for: CALayer, forKey: String). It's where each UIView decides which animation to apply in response to a property change (ref). I was looking for some weird animation behaviors when a label is inside a table view.
If you print key, you'd see that actions are requested for the position, the bounds and the contents of the label when UIKit is about to commit the animations related to your UIView.animate(withDuration:) call.
In fact, setNeedsDisplay is called each time the size of an UILabel is changed (it makes sens). So I guess there is a conflict between the content redrawing of the label and its frame change.
I think you should recreate the right text alignment of the label without using textAlignment = .right.
Horizontally, pin the label to the right only. When layoutIfNeeded will be called, only the label's position will change, not its content.

Answer 2

As mentioned in the #Gaétanz answer. The abnormal behaviour is due to the Lable inside the cell.
You can remove the glitches by changing the Labels leading constraint relation to >= and change the priority to 999 from 1000.
Please refer the screenshot attached for your reference.
When you add constraint with a priority less than 1000 it will be an optional constraint. Priority 1000 is the required priority for a constraint. Here if you added a priority of 999, all the other constraints with priority 1000 will layout first and the less priority constraint will layout last.

Answer 3

You are changing the width of your side view outside of the animation block. put you widthConstaint.constant = width inside your animation block.
func change(width: CGFloat) {
UIView.animate(withDuration: 1.0) {
self.widthConstaint.constant = width
self.view.layoutIfNeeded()
}
}

Answer 4

According to your code the View is animated but the constraint is not put in the UIView animation block. So it looks like a glitch cause it changes the frame directly. Please try to change the code as below and try.
func change(width: CGFloat) {
UIView.animate(withDuration: 1.0) {
widthConstaint.constant = width
self.tableView.layoutIfNeeded()
self.view.layoutIfNeeded()
}
}