Question

I am in need to create a custom UICollectionViewCell with a curved side.

Please look at the image below

enter image description here

This image consists of two cells.

Please tell me how to make a custom UICollectionViewCell with a curved side, as shown in the image above.
Thanks

Was it helpful?

Solution 3

I have found an another solution for it, Instead of adding shape layer to each UICollectionViewCell, I have added the shape layer to the whole UICollectionView by using [UIBezierPath bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:].

I have used the code mentioned below

-(UICollectionView *)roundCornersOnView:(UICollectionView *)view{



UICollectionView *roundedView = view;
UIBezierPath *maskPath ;
maskPath=[UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 350) radius:350 startAngle:0 endAngle:1.5708 clockwise:NO];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = roundedView.bounds;
maskLayer.path = maskPath.CGPath;
roundedView.layer.mask = maskLayer;
return roundedView;
}

OTHER TIPS

Use CAShapeLayer with UIBezierPath for that and add that layer on cell's view.

-(UIView *)roundCornersOnView:(UIView *)view  radius:(float)radius {

    UIRectCorner corner; //holds the corner
    corner = UIRectCornerTopLeft | UIRectCornerTopRight;

    UIView *roundedView = view;
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:roundedView.bounds byRoundingCorners:corner cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = roundedView.bounds;
    maskLayer.path = maskPath.CGPath;
    roundedView.layer.mask = maskLayer;
    return roundedView;

}

Use:

UIView *v1=[[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
v1.backgroundColor=[UIColor redColor];
[self.view addSubview:[self roundCornersOnView:v1 radius:50]];

try with this one its working in my code

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
UIView *view1=[[UIView alloc]initWithFrame:cell.frame];
view1.backgroundColor=[UIColor blueColor];
UIBezierPath *maskpath=[UIBezierPath bezierPathWithRoundedRect:view1.bounds byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight|UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(10.0,10.0)];
CAShapeLayer *maskLayer=[CAShapeLayer layer];
maskLayer.frame=view1.bounds;
maskLayer.path=maskpath.CGPath;
view1.layer.mask=maskLayer;
cell.backgroundView=view1;


return cell;

}

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top