Asi Givati
Asi Givati

Reputation: 1475

Create triangle UIView

I need to create UIView shaped like tag example:

enter image description here

The second option for me is to create a standard UIView (Square) and add to the side of him another small triangle view.

But i don't know how to create this triangle view.

Upvotes: 3

Views: 1544

Answers (3)

Jay Bhalani
Jay Bhalani

Reputation: 4171

you can try this code and change point for your requirements.

[[self view] setBackgroundColor:[UIColor blueColor]];

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path,NULL,0.0,100);
CGPathAddLineToPoint(path, NULL, 160.0f, 100.0f);
CGPathAddLineToPoint(path, NULL, 160.0f, 100.0f);
CGPathAddLineToPoint(path, NULL, 200.0f, 150.0f);
CGPathAddLineToPoint(path, NULL, 160.0f, 200.0f);
CGPathAddLineToPoint(path, NULL, 0.0f, 200.0f);
CGPathAddLineToPoint(path, NULL, 0.0f, 480.0f);
CGPathAddLineToPoint(path, NULL, 0.0f, 0.0f);


CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor redColor] CGColor]];
[shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
[shapeLayer setBounds:CGRectMake(0.0f, 0.0f, 160.0f, 480)];
[shapeLayer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
[shapeLayer setPosition:CGPointMake(0.0f, 0.0f)];
[[[self view] layer] addSublayer:shapeLayer];

CGPathRelease(path);

Upvotes: 0

Teja Nandamuri
Teja Nandamuri

Reputation: 11201

If you want to create a custom view,you can try this: You need to make this the class of your UIView.

- (void)drawRect:(CGRect)frame   
  {
//// Color Declarations
UIColor* color = [UIColor colorWithRed: 0.318 green: 0.472 blue: 0.866 alpha: 1];

//// Rectangle Drawing
UIBezierPath* rectanglePath = UIBezierPath.bezierPath;
[rectanglePath moveToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 120)];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 171, CGRectGetMinY(frame) + 120)];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 240, CGRectGetMinY(frame) + 67)];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 240, CGRectGetMinY(frame) + 66)];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 167, CGRectGetMinY(frame))];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame))];
[rectanglePath addLineToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + 120)];
[rectanglePath closePath];
[color setFill];
[rectanglePath fill];
}

Upvotes: 0

bLacK hoLE
bLacK hoLE

Reputation: 801

you can do it with UIBezierPath this is sample code for use it . it will not draw same as your expected result, but you can draw with your points

UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, view3.frame.size.height-100)];
[trianglePath addLineToPoint:CGPointMake(view3.frame.size.width/2,100)];
[trianglePath addLineToPoint:CGPointMake(view3.frame.size.width, view2.frame.size.height)];
[trianglePath closePath];

CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
[triangleMaskLayer setPath:trianglePath.CGPath];

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0, size.width, size.height)];

view.backgroundColor = [UIColor colorWithWhite:.75 alpha:1];
view.layer.mask = triangleMaskLayer;
[self.view addSubview:view];

Upvotes: 1

Related Questions