如何同时向 UIView 添加顶角、顶边框和顶阴影
How to add top corners, top border and top shadow to a UIView at the same time
我需要在 UIView 上添加几种效果,使其左上角和右上角变圆,圆角曲线上有白色边框和深色阴影,如下图所示:
我创建了一个继承自 UIView 的 MSHTablePaneCell class,然后覆盖了它的 drawRect
方法:
static const CGFloat kCornerRadius = 15;
@implementation MSHTablePaneCell ()
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:(UIRectCornerTopLeft |UIRectCornerTopRight) cornerRadii:CGSizeMake(kCornerRadius, kCornerRadius)];
// 1. mask round corner
CAShapeLayer *roundLayer = [CAShapeLayer layer];
roundLayer.path = path.CGPath;
roundLayer.frame = self.bounds;
// roundLayer.cornerRadius = 10.0;
self.layer.mask = roundLayer;
// 2. add border to round corner curve
UIBezierPath *topCurvepath = [UIBezierPath bezierPath];
[topCurvepath moveToPoint:CGPointMake(0, kCornerRadius)];
[topCurvepath addQuadCurveToPoint:CGPointMake(kCornerRadius, 0) controlPoint:CGPointMake(0, 0)];
[topCurvepath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame)-kCornerRadius, 0)];
[topCurvepath addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), kCornerRadius) controlPoint:CGPointMake(CGRectGetWidth(self.frame), 0)];
CAShapeLayer *topBorderLayer = [CAShapeLayer layer];
topBorderLayer.lineWidth = 4.0;
topBorderLayer.borderColor = [UIColor redColor].CGColor;
topBorderLayer.path = topCurvepath.CGPath;
[self.contentView.layer addSublayer:topBorderLayer];
}
@end
然而,通过上面的代码,我得到了如下的最终图片:
无论我设置哪个属性,topCurvePath
都显示为黑色背景色,我该如何解决这个问题?提前致谢~
topBorderLayer.fillColor = [UIColor yourColor].CGColor
我需要在 UIView 上添加几种效果,使其左上角和右上角变圆,圆角曲线上有白色边框和深色阴影,如下图所示:
我创建了一个继承自 UIView 的 MSHTablePaneCell class,然后覆盖了它的 drawRect
方法:
static const CGFloat kCornerRadius = 15;
@implementation MSHTablePaneCell ()
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:(UIRectCornerTopLeft |UIRectCornerTopRight) cornerRadii:CGSizeMake(kCornerRadius, kCornerRadius)];
// 1. mask round corner
CAShapeLayer *roundLayer = [CAShapeLayer layer];
roundLayer.path = path.CGPath;
roundLayer.frame = self.bounds;
// roundLayer.cornerRadius = 10.0;
self.layer.mask = roundLayer;
// 2. add border to round corner curve
UIBezierPath *topCurvepath = [UIBezierPath bezierPath];
[topCurvepath moveToPoint:CGPointMake(0, kCornerRadius)];
[topCurvepath addQuadCurveToPoint:CGPointMake(kCornerRadius, 0) controlPoint:CGPointMake(0, 0)];
[topCurvepath addLineToPoint:CGPointMake(CGRectGetWidth(self.frame)-kCornerRadius, 0)];
[topCurvepath addQuadCurveToPoint:CGPointMake(CGRectGetWidth(self.frame), kCornerRadius) controlPoint:CGPointMake(CGRectGetWidth(self.frame), 0)];
CAShapeLayer *topBorderLayer = [CAShapeLayer layer];
topBorderLayer.lineWidth = 4.0;
topBorderLayer.borderColor = [UIColor redColor].CGColor;
topBorderLayer.path = topCurvepath.CGPath;
[self.contentView.layer addSublayer:topBorderLayer];
}
@end
然而,通过上面的代码,我得到了如下的最终图片:
无论我设置哪个属性,topCurvePath
都显示为黑色背景色,我该如何解决这个问题?提前致谢~
topBorderLayer.fillColor = [UIColor yourColor].CGColor