故事背景:
这是自定义一个cell,cell的背景view是有灰色边框的,如下:
结果测试妹纸说难看,因为左边的边框太碍眼了,需要去掉。这个边框我是直接设置背景view的
view.layer.borderColor
做的,去掉就4个边都去掉了。然后我想直接把图片往左移然后把背景view的clipsToBounds
关闭,但是右上角的tag标签是一个旋转label,背景view的clipsToBounds
关闭后它又冒出去了。。。所以最后我决定还是不设置背景view的边框了,采用在上右下三边添加view的方式来完成这个需求。 最终还是笑了.gif
说干就干
但我依稀记得在cell里添加太多控件不好,所以果断抛弃了那个想法。
最终还是决定画一画。
思路
结合CAShapeLayer
和贝塞尔曲线来打点描线。
CAShapeLayer与贝塞尔曲线
贝塞尔曲线是曲线,我却用它画直线。。。
然后那个CAShapeLayer它是CALayer的子类,它比CALayer多一个shape,意思就是说它是具有shape属性的layer,而这个shape需要贝塞尔曲线的配合才能发挥出来。反正我是这样理解的。
动手
一.首先你得有一个shapeLayer
CAShapeLayer *borderLayer = [CAShapeLayer layer];
// 位置大小
borderLayer.frame = bgView.bounds;
// 线宽
borderLayer.lineWidth = 1;
// 颜色
borderLayer.strokeColor = [UIColor colorWithHexString:@"dcdcdc"].CGColor;
// 不填充
borderLayer.fillColor = nil;
// 添加到指定layer
[bgView.layer addSublayer:borderLayer];
二.然后你还得有一根曲线
1.创建曲线
// 创建path对象
UIBezierPath *borderPath = [UIBezierPath bezierPath];
2.打点描线
// 设置path起点
[borderPath moveToPoint:(CGPoint){124,0}];
// 依次设置转点
[borderPath addLineToPoint:(CGPoint){bgView.width,0}];
[borderPath addLineToPoint:(CGPoint){bgView.width,bgView.height}];
[borderPath addLineToPoint:(CGPoint){124,bgView.height}];
三.最后将shapeLayer和曲线完美结合
// 最后将这个path赋值给layer的path
borderLayer.path = borderPath.CGPath;
最终效果是这样的
去掉左边框后确实更好看了,不得不说,测试妹纸的眼光还可以。
网友评论
func addBorder(_ edges: [UIRectEdge], color: UIColor = APPConfigCenter.separator, thickness: CGFloat = 0.5) {
edges.forEach { (edge) in
let border = CALayer()
switch edge {
case UIRectEdge.top:
border.frame = CGRect(x: 0, y: 0, width: frame.width, height: thickness)
case UIRectEdge.bottom:
border.frame = CGRect(x: 0, y: frame.height - thickness, width: frame.width, height: thickness)
case UIRectEdge.left:
border.frame = CGRect(x: 0, y: 0, width: thickness, height: frame.height)
case UIRectEdge.right:
border.frame = CGRect(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)
break
default:
break
}
border.backgroundColor = color.cgColor
addSublayer(border)
}
}