Question

In my iPhone app, I have a multiline label that I would like to expand/contract with a “More” button. Like this:

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec fringilla, turpis 
in porttitor imperdiet, eros turpis...

                                "<More>"

Should animate into this:

Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec fringilla, turpis 
in porttitor imperdiet, eros turpis laoreet 
magna, id tempor ante lorem pulvinar lacus.
Duis vitae nisl quis sapien dictum pellentesque.

                                "<Less>"

I am trying to get an effect where every line is revealed individually as the label grows, and then individually hidden as it shrinks. Growing works great, but it jumps to 3 lines during the shrink animation. Any ideas? Code and properties below:

---

Grow animation:

[UIView animateWithDuration:0.5 animations:^{
        view.frame = CGRectMake(startFrame.origin.x, startFrame.origin.y, startFrame.size.width, startFrame.size.height + 40.0);
    }];

Shrink animation:

[UIView animateWithDuration:0.5 animations:^{
        view.frame = CGRectMake(startFrame.origin.x, startFrame.origin.y, startFrame.size.width, startFrame.size.height - 40.0);
    }];

UILabel properties:

• Lines: 0
• Line Breaks: Truncate Tail
• Content Mode: Top

Answer 1

I had a similar problem trying to make a view grow/shrink. Here is my SO post.
Basically I had to animate the frame to grow and then bounds/center to shrink. A bit awkward I know but I got the effect I wanted.