iOS: creating an expandable label

Question

I'm trying to create an expandable label that looks like the one in the picture:

I have two problems:

How do I make the label truncate the tail such that it leaves enough place for the More button/clickable text?
How do I place the More text?

Maybe, I am going about it the wrong way? Instead of playing with the number of lines, should I maybe try to calculate how much text goes into one and a half line and present it only, and then when clicking More I present the whole text?

Would appreciate any advice, thanks!

How are you going to put it back once the text label is expanded? — El Tomato, Mar 28 '19 at 12:22
I think you can add a button to overlap the end of the last line of the text label. Like Apple is doing on the App Store: https://prnt.sc/pdsc4f — Trung Hoang, Oct 02 '19 at 10:10

score 3 · Answer 1 · answered Mar 28 '19 at 11:53

You can use this library to achieve your expected output.

https://github.com/apploft/ExpandableLabel

Specify the number of lines you want to display default.

expandableLabel.numberOfLines = 2

Set true if the label should be collapsed or false for expanded.

expandableLabel.collapsed = true

collapsedAttributedLink Set the link name that is shown when collapsed.

expandableLabel.collapsedAttributedLink = NSAttributedString(string: "More")

expandedAttributedLink Set the link name that is shown when expanded. It is optional and can be nil.

expandableLabel.expandedAttributedLink = NSAttributedString(string: "Less")

iOS: creating an expandable label

1 Answers1