Search code examples
iosswift3uilabeluitextviewexpand

Read More/Less with Swift 3


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.

enter image description here
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
        }