Search code examples
iosswiftuiviewcashapelayerdiagonal

Create a UIView with only one diagonal side

I need to create a UIView that has the left border inclined with 45 degrees I was wondering，is there a way to acheive this programmatically? Does CATransform3D help me in this case since it’s not really a “3D rotation”?

Edit

Here's an image explaining more my needed output

enter image description here

Solution

  • If you just want the shape with no content then you can create a CAShapeLayer and add it to your view's layer. (In fact you can also put content in there using this method but you'll need to alter it a bit).

    CAShapeLayer *layer = [CAShapeLayer layer];

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 100)]; // bottom left corner
[path addLineToPoint:CGPointMake(100, 0)]; // top middle
[path addLineToPoint:CGPointMake(300, 0)]; // top right corner
[path addLineToPoint:CGPointMake(300, 100)]; // bottom right corner
[path closePath];

layer.path = path.CGPath;
layer.fillColor = [UIColor blackColor].CGColor;
layer.strokeColor = nil;

[theView.layer addSubLayer:layer];

    This doesn't require using drawRect or anything. You will have to change the coordinates based on the values you want.

    You can also use a UIView subclass and override drawRect. It requires more work but the UIBezierPath will be pretty much the same.

    CALayer is very powerful and used a lot by Apple. For instance the edit canvas in Pages is written almost exclusively using CALayers.