UIView周围的虚线边框

如何在UIView周围添加虚线边框。

像这样的东西

Answer 1

你可以使用Layer和Bizerpath来设置这个模式的边框，就像下面的例子一样。

Objective-C的

 CAShapeLayer *yourViewBorder = [CAShapeLayer layer]; yourViewBorder.strokeColor = [UIColor blackColor].CGColor; yourViewBorder.fillColor = nil; yourViewBorder.lineDashPattern = @[@2, @2]; yourViewBorder.frame = yourView.bounds; yourViewBorder.path = [UIBezierPath bezierPathWithRect:yourView.bounds].CGPath; [yourView.layer addSublayer:yourViewBorder]; 

Swift 3.1

 var yourViewBorder = CAShapeLayer() yourViewBorder.strokeColor = UIColor.black.cgColor yourViewBorder.lineDashPattern = [2, 2] yourViewBorder.frame = yourView.bounds yourViewBorder.fillColor = nil yourViewBorder.path = UIBezierPath(rect: yourView.bounds).cgPath yourView.layer.addSublayer(yourViewBorder) 

您还可以使用图案图像设置不同types的devise，如下面的示例。

 [yourView.layer setBorderWidth:5.0]; [yourView.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:@"DotedImage.png"]] CGColor]];///just add image name and create image with dashed or doted drawing and add here 

在这里你需要在项目中添加<QuartzCore/QuartzCore>框架，并在YourViewController.m文件的下面一行中导入它。

 #import <QuartzCore/QuartzCore.h> 

Answer 2

另一种方法，如果你喜欢sublayers。 在你的自定义视图的init中，把这个（_border是一个伊娃）：

 _border = [CAShapeLayer layer]; _border.strokeColor = [UIColor colorWithRed:67/255.0f green:37/255.0f blue:83/255.0f alpha:1].CGColor; _border.fillColor = nil; _border.lineDashPattern = @[@4, @2]; [self.layer addSublayer:_border]; 

在你的layoutsubviews中，把这个：

 _border.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath; _border.frame = self.bounds; 

Answer 3

对于那些在Swift中工作的人来说，UIView上的这个类扩展使得它很容易。 这是基于sunshineDev的回答。

 extension UIView { func addDashedBorder() { let color = UIColor.red.cgColor let shapeLayer:CAShapeLayer = CAShapeLayer() let frameSize = self.frame.size let shapeRect = CGRect(x: 0, y: 0, width: frameSize.width, height: frameSize.height) shapeLayer.bounds = shapeRect shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2) shapeLayer.fillColor = UIColor.clear.cgColor shapeLayer.strokeColor = color shapeLayer.lineWidth = 2 shapeLayer.lineJoin = kCALineJoinRound shapeLayer.lineDashPattern = [6,3] shapeLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 5).cgPath self.layer.addSublayer(shapeLayer) } } 

要使用它：

 anyView.addDashedBorder() 

Answer 4

基于Prasad Gbuild议的内容，我在UIImage Extras类中创build了一个方法，其中包含以下内容：

 - (CAShapeLayer *) addDashedBorderWithColor: (CGColorRef) color { CAShapeLayer *shapeLayer = [CAShapeLayer layer]; CGSize frameSize = self.size; CGRect shapeRect = CGRectMake(0.0f, 0.0f, frameSize.width, frameSize.height); [shapeLayer setBounds:shapeRect]; [shapeLayer setPosition:CGPointMake( frameSize.width/2,frameSize.height/2)]; [shapeLayer setFillColor:[[UIColor clearColor] CGColor]]; [shapeLayer setStrokeColor:color]; [shapeLayer setLineWidth:5.0f]; [shapeLayer setLineJoin:kCALineJoinRound]; [shapeLayer setLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithInt:10], [NSNumber numberWithInt:5], nil]]; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeRect cornerRadius:15.0]; [shapeLayer setPath:path.CGPath]; return shapeLayer; } 

需要指出的是，如果将形状的位置定义为（0,0），则边框的底angular将放置在图像的中心，这就是为什么我将其设置为：（frameSize.width / 2，frameSize .height / 2）

然后我使用我的方法来获取使用我的UIImageView的UIImage的虚线边框，并添加CAShapeLayer作为UIImageView图层的子图层：

 [myImageView.layer addSublayer:[myImageView.image addDashedBorderWithColor:[[UIColor whiteColor] CGColor]]]; 

Answer 5

使用CGContextSetLineDash（）方法。

 CGFloat dashPattern[]= {3.0, 2}; context =UIGraphicsGetCurrentContext(); CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); // And draw with a blue fill color CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); // Draw them with a 2.0 stroke width so they are a bit more visible. CGContextSetLineWidth(context, 4.0); CGContextSetLineDash(context, 0.0, dashPattern, 2); CGContextAddRect(context, self.bounds); // Close the path CGContextClosePath(context); CGContextStrokePath(context); // Fill & stroke the path CGContextDrawPath(context, kCGPathFillStroke); 

我认为这对你有帮助。

Answer 6

为此，您需要为该特定对象添加CAShapeLayer

  CAShapeLayer * dotborder = [CAShapeLayer layer]; dotborder.strokeColor = [UIColor redColor].CGColor;//your own color dotborder.fillColor = nil; dotborder.lineDashPattern = @[@4, @2];//your own patten [codeBtn.layer addSublayer:dotborder]; dotborder.path = [UIBezierPath bezierPathWithRect:codeBtn.bounds].CGPath; dotborder.frame = codeBtn.bounds; 

Answer 7

Swift 3 ：

 import UIKit class UIViewWithDashedLineBorder: UIView { override func draw(_ rect: CGRect) { let path = UIBezierPath(roundedRect: rect, cornerRadius: 0) UIColor.purple.setFill() path.fill() UIColor.orange.setStroke() path.lineWidth = 5 let dashPattern : [CGFloat] = [10, 4] path.setLineDash(dashPattern, count: 2, phase: 0) path.stroke() } } 

在故事板中使用（作为自定义类）或直接在代码中使用：

 let v = UIViewWithDashedLineBorder(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 

结果：

Answer 8

QuartzCore的Swift版本的答案。

 import QuartzCore let dottedPattern = UIImage(named: "dottedPattern") myView.layer.borderWidth = 1 myView.layer.borderColor = UIColor(patternImage: dottedPattern!).CGColor 

CAShapeLayer方法工作，但如果UIView是在一个单元格内，QuartzCore方法更好地处理表视图重新加载。

对于图像，你可以使用这样的东西（它真的很小）：

当我可以摆脱它的时候，我更倾向于使用PNG的vector：

• 在Sketch中，创build一个4×4像素的矩形。
• 总共四个这些
• 将它们组合成一个四方形，交替的颜色
• 将组导出为PDF
• 在Images.xcassets ，创build一个名为dottedPattern的New Image Set
• 将Scale Factors更改为Single Vector
• 放在你的PDF中

Answer 9

这是如果你想在Swift 2中

 func addDashedLineBorderWithColor(color:UIColor) { let _ = self.sublayers?.filter({$0.name == "DashedBorder"}).map({$0.removeFromSuperlayer()}) let border = CAShapeLayer(); border.name = "DashedBorder" border.strokeColor = color.CGColor; border.fillColor = nil; border.lineDashPattern = [4, 4]; border.path = UIBezierPath(rect: self.bounds).CGPath border.frame = self.bounds; self.addSublayer(border); } 

Answer 10

在Swift 3

 let border = CAShapeLayer(); border.strokeColor = UIColor.black.cgColor; border.fillColor = nil; border.lineDashPattern = [4, 4]; border.path = UIBezierPath(rect: theView.bounds).cgPath border.frame = theView.bounds; theView.layer.addSublayer(border); 

Answer 11

试试波纹pipe代码

 - (void)drawRect:(CGRect)rect { //// Color Declarations UIColor* fillColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; UIColor* strokeColor = [UIColor colorWithRed: 0.29 green: 0.565 blue: 0.886 alpha: 1]; //// Rectangle Drawing UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius: 6]; [fillColor setFill]; [rectanglePath fill]; [strokeColor setStroke]; rectanglePath.lineWidth = 1; CGFloat rectanglePattern[] = {6, 2, 6, 2}; [rectanglePath setLineDash: rectanglePattern count: 4 phase: 0]; [rectanglePath stroke]; [super drawRect:rect]; } 

像一个像波纹pipe

Answer 12

对于Xamarin.iOS虚线/虚线边框。

  dottedLayer = new CAShapeLayer(); dottedLayer.StrokeColor = UIColor.FromRGB(202, 202, 208).CGColor; dottedLayer.FillColor = null; dottedLayer.LineDashPattern = new[] { new NSNumber(4), new NSNumber(2) }; dottedLayer.Path = UIBezierPath.FromRect(YourView.Bounds).CGPath; //for square dottedLayer.Path = UIBezierPath.FromRoundedRect(YourView.Bounds, 5).CGPath; //for rounded corners dottedLayer.Frame = YourView.Bounds; YourView.Layer.AddSublayer(dottedLayer); 

Answer 13

我最终创build了一个使用@Chris实现的IB Designable：

CurvedDashedBorderUIVIew.h：

 #import <UIKit/UIKit.h> IB_DESIGNABLE @interface CurvedDashedBorderUIVIew : UIView @property (nonatomic) IBInspectable CGFloat cornerRadius; @property (nonatomic) IBInspectable UIColor *borderColor; @property (nonatomic) IBInspectable int dashPaintedSize; @property (nonatomic) IBInspectable int dashUnpaintedSize; @property (strong, nonatomic) CAShapeLayer *border; @end 

CurvedDashedBorderUIVIew.m：

 #import "CurvedDashedBorderUIVIew.h" @implementation CurvedDashedBorderUIVIew - (instancetype)init { self = [super init]; if (self) { [self setup]; } return self; } - (instancetype)initWithCoder:(NSCoder *)coder { self = [super initWithCoder:coder]; if (self) { [self setup]; } return self; } - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self setup]; } return self; } -(void)setup { _border = [CAShapeLayer layer]; [self.layer addSublayer:_border]; } -(void)layoutSubviews { [super layoutSubviews]; self.layer.cornerRadius = self.cornerRadius; _border.strokeColor = self.borderColor.CGColor; _border.fillColor = nil; _border.lineDashPattern = @[[NSNumber numberWithInt:_dashPaintedSize], [NSNumber numberWithInt:_dashUnpaintedSize]]; _border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.cornerRadius].CGPath; _border.frame = self.bounds; } @end 

那么只需在xib / storyboard中设置即可：