Rounder by UIBezierPath issue when scrolling
Asked Answered
A

2

4

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;

enter image description here

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

Ascariasis answered 5/4, 2016 at 8:24 Comment(4)
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)];Fescennine
@DarjiJigar my requirement is rounder the message in 2,3 or 4 corner, your code only make rounder in 4 cornersAscariasis
check this out https://mcmap.net/q/162775/-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 pathApfelstadt
@Apfelstadt Thank you. but in your given link, the accept answer is 5 years ago, and another new answer is using UIBezierPath like my codeAscariasis
T
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.

Tristram answered 22/8, 2016 at 20:33 Comment(0)
G
0

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
        }
    } 
Gytle answered 13/10, 2020 at 7:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.