Límite de línea discontinua alnetworkingedor de UIView

¿Cómo agrego el borde de línea discontinua alnetworkingedor de UIView ?

Algo como esto

Puede establecer el borde con este patrón utilizando la ruta Layer y Bizer como se muestra a continuación.

C objective

 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) 

También puede configurar diferentes types de layout utilizando una image de patrón como el ejemplo a continuación.

 [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 

Aquí debe agregar el <QuartzCore/QuartzCore> en el proyecto e importarlo con la línea inferior en el file YourViewController.m .

 #import <QuartzCore/QuartzCore.h> 

Otro método si te gustan las subcapas. En el init de su vista personalizada, ponga esto (_border es un ivar):

 _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]; 

Y en tus presentaciones, mira esto:

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

Para aquellos de ustedes que trabajan en Swift, esta extensión de class en UIView lo hace fácil. Esto se basó en la respuesta de sunshineDev.

 extension UIView { func addDashedBorder() { let color = UIColor.networking.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) } } 

Para utilizarlo:

 anyView.addDashedBorder() 

Sobre la base de lo que Prasad G ha sugerido, he creado un método dentro de una class de Extras de UIImage con lo siguiente:

 - (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; } 

Es importante señalar que si define la position de su forma como (0,0), la esquina inferior del borde se colocará en el centro de la image, por eso la configuré en: (frameSize.width / 2, frameSize .height / 2)

Luego utilizo mi método para get el borde punteado usando el UIImage de mi UIImageView y agrego el CAShapeLayer como una subcapa de la capa UIImageView:

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

Use el método 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); 

Creo que te será útil.

Para esto, necesita agregar CAShapeLayer para ese object en particular

  CAShapeLayer * dotborder = [CAShapeLayer layer]; dotborder.strokeColor = [UIColor networkingColor].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; 

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() } } 

Use en un storyboard (como class personalizada) o directamente en el código:

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

Resultado:

introduzca la descripción de la imagen aquí

Versión Swift de la respuesta QuartzCore.

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

El enfoque CAShapeLayer funciona, pero el enfoque QuartzCore es mejor para manejar una recarga de la Vista de tabla, si la UIView está dentro de una celda.

Para la image, puedes usar algo como esto (es muy pequeño):

introduzca la descripción de la imagen aquí

Tiendo a preferir el vector sobre PNG cuando puedo salirse con la suya:

  • Dentro de Sketch, cree un rectángulo de píxeles de 4×4.
  • Haz un total de cuatro de estos
  • Agruparlos en un cuadrado, alternando colors
  • Exporte el grupo como PDF
  • Dentro de Images.xcassets , cree un New Image Set llamado dottedPattern
  • Cambiar los Scale Factors a un Single Vector
  • Coloca tu PDF

Esto es si lo querías en 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); } 

En 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); 

testing el código de abajo

 - (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]; } 

para uno como abajo introduzca la descripción de la imagen aquí

Para Xamarin.iOS borde punteado / discontinuo.

  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); 

Terminé creando un IB Designable usando parte de la implementación de @Chris:

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 

luego simplemente configurarlo en el xib / storyboard:

introduzca la descripción de la imagen aquí