0

So I am trying to build a little expand and collapse UILabel like the one you see below. There would also be some text below it. When you touch the heading it should show you more less of the text.

I understand that I can set the number of lines to zero of the text label and it will figure out how much height it needs to show the whole text. My initial approach was change the number of lines from zero to say three, and then I do something like the code below...

    `UIView.animate(withDuration: 0.4) {
        self.body.superview?.layoutIfNeeded()
    }`

this technically works, but the animation looks terrible. It looks jumpy for the lack of better word, so I am think I might have to animate the height instead. So how can I actually calculate the needed height of the text if I don't know how long it will? I can animate the height from say 65 (some arbitrary number) to whatever the height it needs to be.

enter image description here

user3832583
  • 371
  • 4
  • 19
  • Not *exactly* the same, but you might find some help from this: https://stackoverflow.com/questions/43096231/expand-uilabel-inside-uitableview-with-more-button-like-instagram/43096940#43096940 – DonMag Jun 02 '17 at 14:41

2 Answers2

1

Yes, you can. You need to set a constraint for the height and change it's constant, (or you can set 2 constraints and change the priority, just make sure the priorities are not 0 a 1000, but 1 and 999. You cannot change them otherwise). Do it before the animation block you have and keep it as it is.

I have a pod that allows you to do 99% of this from the storyboard

https://github.com/fer662/FMConstraintSwitch

You drop a FMStateConstraintSwitch on your storyboard, set the outlets for the constraints, and the parent view that needs to be laid out. Then from your code you just change the state on the FMStateConstraintSwitch. It can switch more than 1 constraint for each state.

Fernando Mazzon
  • 3,562
  • 1
  • 19
  • 21
  • ok but if I set a constraint on a UILabel where I don't know what size it will be how is that going to work? – user3832583 Jun 02 '17 at 13:52
  • If the transition you want to make is that of the label being capped to an arbitrary size, and the other state is that of it's intrinsic height, just set one constraint for the arbitrary size (example: 60) at 999 priority. When you change it's priority to 1, and animate, the intrinsic size will take over. – Fernando Mazzon Jun 02 '17 at 14:11
  • This does work, and I think it is helpful, but the animation is still so choppy. Any idea how to get this to look a bit nicer? I might update my question with what I have now as a gif so you can see what it looks like. – user3832583 Jun 02 '17 at 17:30
  • Please do! I'll check it out – Fernando Mazzon Jun 02 '17 at 19:58
0

The easy way:

Create StackView with two labels inside. First label for title, second for text - hidden by default.

Now on tap action just do this:

UIView.animate(withDuration: 0.5) { 
    self.textLabel.isHidden = false
}

With StackView the animations is for free :)

Michał Kwiecień
  • 2,734
  • 1
  • 20
  • 23
  • yes but I am only trying to shorten the text not hide it complete, but that is otherwise a quite elegant solution. – user3832583 Jun 02 '17 at 13:51