CODEWITHSUNDEEP
ioscalayeruibezierpathcgpathcashapelayer
Karthik
Karthik

Reputation: 113

Create a view with rounded corners (quarter circle)

I want to create a view as shown below

enter image description here

to achieve this I have tried the following:

UIView *myView = [[UIView alloc] init];
imgView.frame = CGRectMake(50, 150, 200, 200);
[self.view addSubview:imgView];

UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                 byRoundingCorners:UIRectCornerTopRight
                                       cornerRadii:CGSizeMake(50.0, 50.0)];

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

but it hasn't worked for me. Could someone help me out?

Upvotes: 0

Views: 1943

Answers (3)

Saleh AlDhobaie
Saleh AlDhobaie

Reputation: 311

Pseudo code :

    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(50, 150, 200, 200)];
myView.backgroundColor = [UIColor blueColor];
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                 byRoundingCorners:UIRectCornerAllCorners
                                       cornerRadii:CGSizeMake(CGRectGetWidth(myView.frame), CGRectGetHeight(myView.frame))];

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


CGRect frame = myView.frame;
CGRect remainder, slice;

CGRectDivide(frame, &slice, &remainder, CGRectGetHeight(frame)/2, CGRectMaxYEdge);

NSLog(@"%@",NSStringFromCGRect(frame));
NSLog(@"%@",NSStringFromCGRect(remainder));
NSLog(@"%@",NSStringFromCGRect(slice));

CGRect remainder2, slice2;
CGRectDivide(remainder, &slice2, &remainder2, CGRectGetWidth(remainder)/2, CGRectMaxXEdge);

NSLog(@"%@",NSStringFromCGRect(remainder));
NSLog(@"%@",NSStringFromCGRect(remainder2));
NSLog(@"%@",NSStringFromCGRect(slice2));

myView.frame = remainder2;
[self.view addSubview:myView];

enter image description here

hopefully y answer is clear .. 😁

Upvotes: 2

user3069232
user3069232

Reputation: 8995

iOS 13, Swift 5 translation of the excellent answer by Salah

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
  super.viewDidLoad()
  halfCircle(.red)

// Do any additional setup after loading the view.
}

func halfCircle(_ color: UIColor) {
  let myView = UIView(frame: CGRect(x: 200, y: 200, width: 200, height: 200))
  myView.backgroundColor = color

  let maskPath = UIBezierPath(roundedRect: myView.bounds, byRoundingCorners: UIRectCorner.allCorners, cornerRadii: CGSize(width: myView.bounds.width, height: myView.bounds.height))
  let maskLayer = CAShapeLayer()
  maskLayer.frame = myView.bounds
  maskLayer.path = maskPath.cgPath
  myView.layer.mask = maskLayer

  let frame = myView.bounds.divided(atDistance: 100.0, from: CGRectEdge.maxYEdge)

  debugPrint(frame)
  debugPrint(frame.remainder)
  debugPrint(frame.slice)

  let frame2 = frame.remainder.divided(atDistance: 100.0, from: CGRectEdge.maxXEdge)

  debugPrint(frame2)
  debugPrint(frame2.remainder)
  debugPrint(frame2.slice)

  myView.frame = frame2.remainder
  self.view.addSubview(myView)

  }
}

Upvotes: 0

Saleh AlDhobaie
Saleh AlDhobaie

Reputation: 311

it's work with me with this code : 

UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(50, 150, 200, 200)];
myView.backgroundColor = [UIColor blueColor];
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
[self.view addSubview:imgView];

UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                 byRoundingCorners:UIRectCornerTopRight
                                       cornerRadii:CGSizeMake(50.0, 50.0)];

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

[self.view addSubview:myView];

Result :

enter image description here

Upvotes: 0

Related Questions