Read More/Less with Swift 3

Question

I want to add "Read more" at the end of the paragraph. When I click on the "Read more" text, it should be expand and display "Less" at the end. The texts will be collapsed when click on "Less" text.

I find many sample work in google. But, I don't understand clearly and most projects are implemented with Objective-C. I also find it in youtube.
I would like know very sample code to implement this with Swift 3.
Can I implement without using any additional library?
Please help me.

Solution

• Create an outlet for height constraint of your messageLabel
• Set top layout of your "Read more" button to messageLabel

• On clicking "Read more" button increase height constraint constant, on clicking "Read less" decrease height constraint constant.

  @IBOutlet weak var btn: UIButton!
  
  @IBOutlet weak var lblHeight: NSLayoutConstraint!
  
  var isLabelAtMaxHeight = false
  
  @IBAction func btnAction(_ sender: Any) {
      if isLabelAtMaxHeight {
          btn.setTitle("Read more", for: .normal)
          isLabelAtMaxHeight = false
          lblHeight.constant = 70
      }
      else {
          btn.setTitle("Read less", for: .normal)
          isLabelAtMaxHeight = true
          lblHeight.constant = getLabelHeight(text: yourSummaryText, width: view.bounds.width, font: yourSummaryLabel.font)
      }
  }
  

Get height of a text

    func getLabelHeight(text: String, width: CGFloat, font: UIFont) -> CGFloat {
        let lbl = UILabel(frame: .zero)
        lbl.frame.size.width = width
        lbl.font = font
        lbl.numberOfLines = 0
        lbl.text = text
        lbl.sizeToFit()

        return lbl.frame.size.height
    }

Comments

[May Phyu]

Thanks for instant feedback. I will try to test your code.

[Matt]

This is for a normal label and button in your view. If you want to use it in your table/collection views, you have to update cell heights/widths as well.

[May Phyu]

Bro @Matt, You mean to get dynamic view of Movie review label , firstly I should define the height of the label? But I could not know the maximum height of that label. Movie review text might have more than 3 paragraphs I think. So, if I define 300px label height, the text will not be show up if the height is more than 300px. Isn't it? How to do? I'm sorry I don't know how to solve this exactly. :(

[Matt]

Did you placed those labels in a view? or a table/scrollview?

[May Phyu]

I put scrollview and put labels in it. bro

[Matt]

I'll suggest a tableview though. Anyway, height of the label does not matter here. Other controls in a scroll view will be aligned to give label's space. You just have to set its height constraint accordingly. Check edited answer to get possible height for a text.

[May Phyu]

bro @Matt, I add the text--> ` lblReview.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex augue, ullamcorper eu lacus ut, dignissim aliquet eros. Praesent ultricies porttitor urna quis iaculis. Aenean vitae nulla in ipsum facilisis placerat. ONCE upon a time there were four little Rabbits, and their names were— Flopsy, Mopsy, Cotton-tail, and Peter.They lived with their Mother in a sand-bank, underneath the root of a very big fir tree.". ` According to your code, ---> should I put these texts into "yourSummaryText"? isn't it?

[Matt]

yes or just pass lblReview.text if text is already set and font is lblReview.font

[May Phyu]

Bro @Matt, I did what you said. All are working well but I put "\n" in my text so the texts are not show completely. A few 3 to 4 words left to show. Could you please tell me how to do it bro?

[Matt]

It will work with "\n". If the issue is missing of 3/4 words then do this. If width of the label is 300, pass 280 in getLabelHeight function. You will get a little more height than usual, which should be enough.

[May Phyu]

Bro @Matt, I really really thank you for helping me whenever, whatever I ask you. Now, I can see all the words. I changed Line Break: "Character Wrap " in Attributes Inspector. :) :)

[May Phyu]

bro could you please take a look at to my question stackoverflow.com/questions/44966983/… ?

[Bhanuteja]

@MayPhyu.. did u got solution for this ? am also stucked in this ? Where we need to create btn ? and how it will come at the end of the text ?