UILabel rounding corners cuts-off text

Question

I am using custom TableCell which has a label with numberofLines = 0

I wanted the label like this.

That is rounded only in three corners.For this to achieve i've written code like this in cell's swift file.I've extended the UIView basically.

extension UIView {
    func roundCorners(corners:UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

And i've used this like this to round my corners.

self.chatLabel.roundCorners(corners: [.topLeft,.bottomLeft,.bottomRight], radius: 7.0)

But the problem is when label's content is bigger than the cell's row height it's not showing the content

Please just see the second cell's label in first picture .It's content is not showing. But when i remove the rounded corner's code everything is working fine but lost my corner radius.

Any suggestion is highly appreciated.Thanks.

Edited:

My cell is like this.

And i am achieving chat UI using the code below.

var cellTypeToDraw:cellType {
        get {
            return self.cellTypeToDraw
        }
        set(newValue) {
            switch newValue {
            case .cellTypeReceiver:
                self.leftImage.isHidden = true
                 self.rightImage.isHidden = false
                self.chatLabel.textAlignment = .right
                self.chatLabel.roundCorners(corners: [.topLeft,.bottomLeft,.bottomRight], radius: 7.0)
            case .cellTypeSender:
                self.rightImage.isHidden = true
                self.leftImage.isHidden = false
                self.chatLabel.textAlignment = .left
                self.chatLabel.roundCorners(corners: [.topRight,.bottomLeft,.bottomRight], radius: 7.0)
            }
            self.leftImage.layer.cornerRadius = self.leftImage.bounds.size.width/2
            self.rightImage.layer.cornerRadius = self.rightImage.bounds.size.width/2
           // self.chatLabel.sizeToFit()
           // self.chatLabel.autoresizingMask = .flexibleHeight
        }
    }

and accessing this variable in cellForRowAtIndexPath like this.

 if indexPath.row % 2 != 0 {
            cell.cellTypeToDraw = .cellTypeReceiver
        }
        else {
            cell.cellTypeToDraw = .cellTypeSender
        }

I understand there is a `UITableViewCell`, if so, then have you implemented the necessary constraints for it to grow according to the text inside? — Saheb Roy, Jun 06 '17 at 06:54
you need to add margins to the UILabel [checkout this question](https://stackoverflow.com/questions/3476646/uilabel-text-margin) — DatForis, Jun 06 '17 at 06:59
If it helps, you can take at the rounded corners method in this lib: https://github.com/appsquickly/NanoFrame . . it is old ObjC code. — Jasper Blues, Jun 06 '17 at 07:02

Mischa · Accepted Answer · 2017-06-06T08:04:54.723

You're doing it too early.

You set the cellTypeToDraw and thus call your roundCorners(corners:, radius:) method at a point in time when the layout isn't done yet. In cellForRow(at:) you get a recycled cell whose chatLabel still has the frame that matched the text it displayed previously.

A quick fix would be to move this corner-rounding to the cell's layoutSubviews() method. Something like:

override func layoutSubviews() {
    super.layoutSubviews()
    chatLabel.roundCorners(corners: [.topLeft,.bottomLeft,.bottomRight], radius: 7.0)
}

(You can check the cellTypeToDraw there as well if you only want to have rounded corners for some cell types.)

By the way:

Tip 1:

You should never do something like that:

var cellTypeToDraw:cellType {
    get {
        return self.cellTypeToDraw
    }
    // ...
}

This will result in an endless recursion when you ever try to call cellTypeToDraw and eventually crash your app. By implementing the getter and the setter you define a computed property that is not backed by an instance variable. self.cellTypeToDraw doesn't have a value. It simply calls the getter again which returns self.cellTypeToDraw again and so on.

Solution: Don't use a computed property but a "regular" one which is backed by an instance variable and do all your cell setup in the property's observer:

var cellTypeToDraw:cellType {
    didSet {
        // configure your cell here
    }
}

Tip 2:

You can (and should) omit all the self. prefixes in Swift for better readability and less work.

Thanks for your answer.It's working perfectly. However didSet is not working. willSet is working here. — elk_cloner, Jun 06 '17 at 08:23
`didSet` will also work if you use the property's name instead of `newValue`. — Mischa, Jun 06 '17 at 08:34

vaibby · Answer 2 · 2017-06-06T07:07:06.237

-2

Add a view insert your label and add some space between your label and that view.

edited Jun 06 '17 at 07:07

answered Jun 06 '17 at 06:58

vaibby

1,255
1
9
23

i don't understand. My label has 8 pixel constant with the image. – elk_cloner Jun 06 '17 at 06:59
answer edited. no problem with image to label distance. problem is with u need some padding in label. and add roundCorners to view. – vaibby Jun 06 '17 at 07:10

UILabel rounding corners cuts-off text

2 Answers2

You're doing it too early.

Tip 1:

Tip 2: