Decreasing resizing not animated

[rr-dw]

Hi.
When I'm animating view size change, the animation is executed only when view is increasing in size, but when the view is decreased in size, animation is not executed and view is resized right away.

Example:
Lets have a view:
view.pin.width(50).height(50).left().top()
Lets increase view size:
UIView.animate(withDuration: 0.16) { view.pin.width(100).height(100) } .. OK, view was resized with animation
Lets decrease view size:
UIView.animate(withDuration: 0.16) { view.pin.width(30).height(30) } .. NOT OK, no animation happens here, view is just resized to 30x30.

Is this a bug? Or do I need to do something more to get decreasing animation?

[lucdion]

Hi @rr-dw, I have updated the source code of the IntroView from the PinLayoutSample example app that shows that resizing works correctly in both direction. You may have a slight issue in your codes.

class IntroView: UIView {
    fileprivate let logo = UIImageView(image: UIImage(named: "PinLayout-logo"))
    fileprivate let segmented = UISegmentedControl(items: ["10 px", "5 px", "20 px"])
    fileprivate let textLabel = UILabel()
    fileprivate let separatorView = UIView()
    fileprivate var separatorViewHeight: CGFloat = 10
    
    init() {
        super.init(frame: .zero)
        backgroundColor = .white

        logo.contentMode = .scaleAspectFit
        addSubview(logo)

        segmented.selectedSegmentIndex = 0
        segmented.tintColor = .pinLayoutColor
        segmented.addTarget(self, action: #selector(didChangeSegmented), for: .valueChanged)
        addSubview(segmented)
        
        textLabel.text = "Swift manual views layouting without auto layout, no magic, pure code, full control. Concise syntax, readable & chainable.\n\nSwift manual views layouting without auto layout, no magic, pure code, full control. Concise syntax, readable & chainable."
        textLabel.font = .systemFont(ofSize: 14)
        textLabel.numberOfLines = 0
        textLabel.lineBreakMode = .byWordWrapping
        addSubview(textLabel)
        
        separatorView.backgroundColor = .pinLayoutColor
        addSubview(separatorView)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        let padding: CGFloat = 10
        
        logo.pin.top(pin.safeArea).left(pin.safeArea).width(100).aspectRatio().margin(padding)
        segmented.pin.after(of: logo, aligned: .top).right(pin.safeArea).marginHorizontal(padding)
        textLabel.pin.below(of: segmented, aligned: .left).width(of: segmented).pinEdges().marginTop(10).sizeToFit(.width)
        layoutSeparator()
    }

    fileprivate func layoutSeparator() {
        separatorView.pin.below(of: [logo, textLabel], aligned: .left).right(to: segmented.edge.right)
            .height(separatorViewHeight)
            .marginTop(10)
    }

    @objc func didChangeSegmented() {
        UIView.animate(withDuration: 0.4) {
            switch self.segmented.selectedSegmentIndex {
            case 1:
                self.separatorViewHeight = 5
            case 2:
                self.separatorViewHeight = 20
            default:
                self.separatorViewHeight = 10
            }

            self.layoutSeparator()
        }
    }
} 

[rr-dw]

Hi @lucdion, thanks for your reply.

I tried your code and yes it is really working correctly and actually I was able to track the real issue.
Lets have this code:

testView.backgroundColor = .purple
parentView.addSubview(testView)
testView.pin.left().top().right().height(100)
        
DispatchQueue.main.asyncAfter(deadline: .now() + 10) {
    UIView.animate(withDuration: 1) {
        testView.pin.height(200)
                
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            UIView.animate(withDuration: 1) {
                testView.pin.height(100)
            }
        }
    }
}

Both animations work correctly when testView is just simple UIView:
let testView = UIView()

Issue is, when there is another child view inside of this view
In my case testView is:
guard let testView = VTestViewController(nibName: "VTestViewController", bundle: nil).view else { ... }
Which still animates correctly for this root view(purple one) of my View Controller.

But its child view(red one) is animated only when expanding occurs:

Edit:
OK actually the child view is not animating at all, testView was just clipping its content to its own bounds which looks like it is animating only in one direction but it is not at any.
After finding this out, let me redefine my question: Is it possible to animate View's size while also animating its content?

[lucdion]

@rr-dw could you share a sample app that demonstrates your issue?

[rr-dw]

@lucdion I just updated my previous commend with:
OK actually the child view is not animating at all, testView was just clipping its content to its own bounds which looks like it is animating only in one direction but it is not at any. After finding this out, let me redefine my question: Is it possible to animate View's size while also animating its content?
If it would be still needed, I can create simple app project with this issue.

[lucdion]

yes @rr-dw, you can animate as many views as you want, you just need to synchronise those animations (same delay, same interval, same animation type).

I'll close this issue since the issue is not related to PinLayout. But we can continue to discussion 🙂

[rr-dw]

@lucdion thanks for your help, yes it works now :).
And also thanks for making this framework, it is awesome ;)