Rounder by UIBezierPath issue when scrolling

Question

I am new in iOS. I am make a chat application. I am using UITableView for display the message chat (one cell - one message).
In each cell, I will rounder the message in 2,3 or 4 corner (like Facebook chat)

For rounder I use the UIBezierPath inside layoutSubView of each Tableview Cell

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.messageView.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerBottomLeft) cornerRadii:CGSizeMake(3.0, 3.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.bounds;
maskLayer.path  = maskPath.CGPath;
self.messageView.layer.mask = maskLayer;

The problem is, when layout first initial, everything work fine, but when I scroll some cell have wrong rounder ( I figure out the problem is sometime when scroll self.messageView.bounds return wrong value so UIBezierPath draw wrong corner) but I don't know why

How can I prevent it happened? Or Can I have another way to rounder View without UIBezierPath (I google but I only find one way to rounder the UIView is using UIBezierPath :( )?
Any help would be appreciated

try this code [v.layer setCornerRadius:30.0f]; // border [v.layer setBorderColor:[UIColor lightGrayColor].CGColor]; [v.layer setBorderWidth:1.5f]; // drop shadow [v.layer setShadowColor:[UIColor blackColor].CGColor]; [v.layer setShadowOpacity:0.8]; [v.layer setShadowRadius:3.0]; [v.layer setShadowOffset:CGSizeMake(2.0, 2.0)]; — Jigar, Apr 05 '16 at 08:32
@DarjiJigar my requirement is `rounder the message in 2,3 or 4 corner`, your code only make rounder in 4 corners — Linh, Apr 05 '16 at 08:34
check this out http://stackoverflow.com/questions/4847163/round-two-corners-in-uiview, BUT I guess (and you are saying so) that problem not in drawing but on getting correct bounds, so I would focus on fixit this but not avoiding using Bezier path — Injectios, Apr 05 '16 at 08:37
@Injectios Thank you. but in your given link, the accept answer is 5 years ago, and another new answer is using `UIBezierPath` like my code — Linh, Apr 05 '16 at 08:41

score 4 · Answer 1 · answered Aug 22 '16 at 20:33

4

I had a similar problem and fixed it by moving my corner-rounding code inside tableView:willDisplayCell:forRowAtIndexPath This will allow Cocoa to size things properly.

answered Aug 22 '16 at 20:33

Blago

4,697
2
34
29

score 0 · Answer 2 · edited Oct 13 '20 at 09:03

I had a similar issue and fix it by moving code in layoutSubviews()

override func layoutSubviews() {
        DispatchQueue.main.async {
            self.maskLayer.path = UIBezierPath(roundedRect: self.messageBGView.bounds, byRoundingCorners: [.topLeft, .topRight,.bottomLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath
            self.messageBGView.layer.mask = self.maskLayer
            self.messageBGView.layer.masksToBounds = true
        }
    }

Rounder by UIBezierPath issue when scrolling

2 Answers2

Linked