UIView *View = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, 100, 100))];
View.center = self.view.center;
[self.view addSubview:View];
View.backgroundColor = [UIColor grayColor];
一、实线边框
实线边框.png View.layer.borderColor = [UIColor redColor].CGColor;
View.layer.borderWidth = 1;
二、虚线边框
1.虚线边框主要实现是通过增加一个layer绘制一个虚线的矩形,lineDashPattern 第一个参数代表线段长度,第二个参数代表线段间距。
CAShapeLayer *dottedLineBorder = [[CAShapeLayer alloc] init];
dottedLineBorder.frame = CGRectMake(0, 0, View.frame.size.width, View.frame.size.height);
[dottedLineBorder setLineWidth:2];
[dottedLineBorder setStrokeColor:[UIColor redColor].CGColor];
[dottedLineBorder setFillColor:[UIColor clearColor].CGColor];
dottedLineBorder.lineDashPattern = @[@10,@20];//10 - 线段长度 ,20 - 线段与线段间距
UIBezierPath *path = [UIBezierPath bezierPathWithRect:dottedLineBorder.frame];
dottedLineBorder.path = path.CGPath;
[View.layer addSublayer:dottedLineBorder];
虚线.png
2.流动的虚线
有一些图片裁剪时会显示一个矩形虚线,而虚线还在流动。
这里通过改变线的长度来实现虚线的流动,如果要求不严谨,只要粗略的实现这样实现:
__block NSNumber * i = @10;
[NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer * _Nonnull timer) {
i = [NSNumber numberWithInt:([i intValue]+1)];
dottedLineBorder.lineDashPattern = @[i,@10];
if ([i intValue]>=20) {
i = [NSNumber numberWithInt:10];
}
}];
三内边距边框
内边距边框.png CGRect viewRect = View.frame;
CGFloat borderMargin = 20;//内边距
CGSize borderOffset = CGSizeMake(0, 0);//边框x,y偏移量
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(viewRect.origin.x+borderOffset.width, viewRect.origin.y+borderOffset.height, viewRect.size.width, viewRect.size.height)];
[self.view addSubview:lineView];
CAShapeLayer *dottedLineBorder = [[CAShapeLayer alloc] init];
dottedLineBorder.frame = CGRectMake(-borderMargin/2, -borderMargin/2, View.frame.size.width+borderMargin*2, View.frame.size.height+borderMargin*2);
[dottedLineBorder setLineWidth:2];
[dottedLineBorder setStrokeColor:[UIColor redColor].CGColor];
[dottedLineBorder setFillColor:[UIColor clearColor].CGColor];
// dottedLineBorder.lineDashPattern = @[@10,@20];//10 - 线段长度 ,20 - 线段与线段间距
//矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:dottedLineBorder.frame];
dottedLineBorder.path = path.CGPath;
[lineView.layer addSublayer:dottedLineBorder];
[self.view sendSubviewToBack:lineView];
四、偏移的边框
偏移边框.png设置borderOffset即可指定边框的xy偏移量
五、指定某角为圆角的边框
指定某角为圆角的边框.png UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:dottedLineBorder.frame byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:(CGSizeMake(10, 10))];
六、圆形内镂空的边框
圆形镂空边框.png /*圆形镂空边框*/
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:dottedLineBorder.frame];
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRect:CGRectMake(borderMargin/2, borderMargin/2, lineView.frame.size.width, lineView.frame.size.height)];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:YES];
dottedLineBorder.fillRule = kCAFillRuleEvenOdd;
dottedLineBorder.fillColor = [UIColor redColor].CGColor;
七、诡异的边框
诡异的边框.png UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:dottedLineBorder.frame];
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRect:(CGRectMake(0, 0, View.frame.size.width+borderMargin, View.frame.size.height+borderMargin))];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:YES];
dottedLineBorder.fillRule = kCAFillRuleEvenOdd;
dottedLineBorder.fillColor = [UIColor redColor].CGColor;
其实说了半天哪里说的是边框,明明就是贝塞尔曲线,哈哈。
Demo:https://github.com/Z-hui/borderDemo
网友评论