เส้นขอบเส้นประรอบ UIView


156

ฉันจะเพิ่มเส้นขอบประประรอบUIViewได้อย่างไร

บางสิ่งเช่นนี้


ฉันคิดว่าstackoverflow.com/questions/5431035/…ถามคำถามของคุณ
Luis

สำหรับบรรทัด DOTTED .. stackoverflow.com/q/26018302/294884
Fattie

คำตอบ:


131

คุณสามารถกำหนดเส้นขอบด้วยรูปแบบนี้โดยใช้เส้นทาง Layer และ Bezier เช่นตัวอย่างด้านล่าง

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

สวิฟท์ 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)

นอกจากนี้คุณยังสามารถตั้งค่าการออกแบบประเภทต่าง ๆ โดยใช้รูปแบบตามตัวอย่างด้านล่าง

[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>

2
มันไม่ใช่วิธีที่สมบูรณ์แบบเมื่อพูดถึง iPhone6 ​​บวก เส้นประอาจกลายเป็นคลุมเครือ
Jacky

1
@ Jacky: ใช้ภาพความละเอียดสูงกว่า :)
Olie

6
ตัวอย่างของรูปภาพคืออะไร
Tom Roggero

1
คุณยกตัวอย่างภาพได้ไหม
Jonguo

1
Jonguo ตัวอย่างเช่นหากคุณเพิ่มภาพใด ๆ ที่มีความละเอียดที่เหมาะสมเช่นสมมติว่าขนาดภาพปกติของคุณคือ 120x120 และชื่อคือ test.png จากนั้นสร้างอีกสองภาพด้วยชื่อ test@2x.png และ test@3x.png ที่มีขนาด 240x240 และ 360x360 ซึ่งใช้ในอุปกรณ์แอปเปิ้ลทั้งหมดโดยอัตโนมัติด้วยชื่อที่เกี่ยวข้อง (เช่น test.png ใช้ใน iPhone 4 การทดสอบ @ 2x จะมีประโยชน์สำหรับ iPhone 4s, 5, 5s, 6, 6s และ twst @ 3x จะเป็นประโยชน์สำหรับ iPhone 6 plus, 6s plus
Paras Joshi

273

วิธีอื่นถ้าคุณชอบ sublayers ใน init ของมุมมองที่กำหนดเองให้วางสิ่งนี้ (_border เป็น 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];

และในเค้าโครงตัวอย่างของคุณให้ใส่สิ่งนี้:

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

41
ดี! คุณสามารถใช้บางอย่างเช่นนี้เพื่อ_border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:5.f].CGPath;
เอฟ

ขออภัย! ฉันไม่เข้าใจ ตัวอย่างใด @EvertonCunha
Yi Jiang

3
@VanDuTran ในตัวอย่างแรก_border.lineWidth = 3
Chris

1
เฮ้ฉันใช้รหัสนี้เพื่อติดป้ายบนเซลล์มุมมองตาราง แต่มันให้เส้นขอบขนาดเล็กฉันจะแก้ไขสิ่งนี้ได้อย่างไร
Chaudhary Ankit Deshwal

3
Swift 3: border = CAShapeLayer() border.strokeColor = yourColor border.fillColor = nil border.lineDashPattern = [4, 2] self.layer.addSublayer(border)
Geek20

71

สำหรับผู้ที่คุณทำงานใน 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 = CAShapeLayerLineJoin.round
    shapeLayer.lineDashPattern = [6,3]
    shapeLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 5).cgPath

    self.layer.addSublayer(shapeLayer)
    }
}

วิธีใช้:

anyView.addDashedBorder()

2
โค้ดที่ยอดเยี่ยม! เพียงปัญหาเดียวเมื่อฉันนำไปใช้กับ UIImageView มันไม่รู้จักความกว้างเต็มของมันมันจะไปประมาณ 80% ของมัน
arielcr

1
ฉันคิดว่าคุณอาจจะโทร addDashBorder เร็วเกินไปลองโทรภายในข้างในดูเค้าโครง
Godfather

3
ฉันสร้าง UIView ที่กำหนดเองและใส่ส่วนขยายนี้ไว้ภายใน จากนั้นฉันก็โทรหาaddDashedBorder()ในระหว่างที่didMoveToSuperview()คิดว่าการเปลี่ยนอัตโนมัติอัตโนมัติจะเสร็จสมบูรณ์และขนาดเฟรมจะถูกต้อง แต่ก็ไม่ได้ ความกว้างของเส้นขอบที่ประจะเกินความกว้างของมุมมอง เส้นประดูดีมากเลย! self.frame.sizeไม่ถูกต้อง
levibostian

self.layer.masksToBounds = true ใช้สิ่งนี้ถ้ามันออกนอกขอบเขต
Ankish Jain

@rmooney ทำงานได้ xcellent แต่ปัญหาคือเมื่อคุณเพิ่ม sublayer ในเซลล์แบบไดนามิก UITableView เลเยอร์พิจารณาเลเยอร์ของกระดานเรื่องราวและมันไม่ทำงานใน customcell มันมีขนาดต่างกันถ้าความกว้างของกระดานเรื่องราวของคุณ 375px มันจะพิจารณาเส้นขอบด้วยเสมอ ขนาดและมันจะไม่ทำงานในอุปกรณ์ขนาดใหญ่เช่น 414px เป็นต้น
Azharhussain Shaikh

18

สวิฟท์ 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))

ผลลัพธ์:

ป้อนคำอธิบายรูปภาพที่นี่


แปลกใจที่ไม่มี upvotes มากในเรื่องนี้ โซลูชันนี้ทำงานได้ดีที่สุดกับการจัดวางอัตโนมัติเมื่อเปรียบเทียบกับคำตอบอื่น ๆ
Yuchen Zhong

17

การสร้างสิ่งที่ Prasad G แนะนำให้ฉันสร้างวิธีภายในคลาส UIImage Extras ด้วยวิธีการต่อไปนี้:

- (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) มุมด้านล่างของเส้นขอบจะถูกวางไว้ที่กึ่งกลางของภาพนั่นคือเหตุผลที่ฉันตั้งให้เป็น: (frameSize.width / 2, frameSize .height / 2)

ฉันใช้วิธีของฉันเพื่อให้ได้เส้นขอบประโดยใช้ UIImage ของ UIImageView ของฉันและเพิ่ม CAShapeLayer เป็น sublayer ของเลเยอร์ UIImageView:

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

16

ใช้วิธี 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);

ฉันคิดว่ามันจะเป็นประโยชน์กับคุณ


1
บริบทคืออะไรที่นี่?
Avinash Sharma

11

นี่คือคลาสย่อย UIView ที่สามารถทำงานกับโครงการใด ๆ ก็ได้และยังสามารถใช้งานได้กับมุมมองแบบรอบ :

import UIKit

class CustomDashedView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    @IBInspectable var dashWidth: CGFloat = 0
    @IBInspectable var dashColor: UIColor = .clear
    @IBInspectable var dashLength: CGFloat = 0
    @IBInspectable var betweenDashesSpace: CGFloat = 0

    var dashBorder: CAShapeLayer?

    override func layoutSubviews() {
        super.layoutSubviews()
        dashBorder?.removeFromSuperlayer()
        let dashBorder = CAShapeLayer()
        dashBorder.lineWidth = dashWidth
        dashBorder.strokeColor = dashColor.cgColor
        dashBorder.lineDashPattern = [dashLength, betweenDashesSpace] as [NSNumber]
        dashBorder.frame = bounds
        dashBorder.fillColor = nil
        if cornerRadius > 0 {
            dashBorder.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
        } else {
            dashBorder.path = UIBezierPath(rect: bounds).cgPath
        }
        layer.addSublayer(dashBorder)
        self.dashBorder = dashBorder
    }
}

วิธีนี้คุณสามารถแก้ไขได้จาก Storyboard ดังนี้:

ป้อนคำอธิบายรูปภาพที่นี่

ผลลัพธ์หนึ่งคู่:

ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่


10

สำหรับสิ่งนี้คุณต้องเพิ่ม 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;

7

สวิฟท์ 4.2

ตามคำตอบของ rmooney เป็นUIViewส่วนขยายที่มีพารามิเตอร์ที่กำหนดค่าได้ซึ่งมีการตั้งค่าเริ่มต้นไว้

หมายเหตุนี่ใช้ไม่ได้หากมุมมองมี self.translatesAutoresizingMaskIntoConstraints = false

extension UIView {
  func addDashedBorder(_ color: UIColor = UIColor.black, withWidth width: CGFloat = 2, cornerRadius: CGFloat = 5, dashPattern: [NSNumber] = [3,6]) {

    let shapeLayer = CAShapeLayer()

    shapeLayer.bounds = bounds
    shapeLayer.position = CGPoint(x: bounds.width/2, y: bounds.height/2)
    shapeLayer.fillColor = nil
    shapeLayer.strokeColor = color.cgColor
    shapeLayer.lineWidth = width
    shapeLayer.lineJoin = CAShapeLayerLineJoin.round // Updated in swift 4.2
    shapeLayer.lineDashPattern = dashPattern
    shapeLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath

    self.layer.addSublayer(shapeLayer)
  }
}

shapeLayer.lineJoin = CAShapeLayerLineJoin.roundควรเป็นyourViewBorder.lineJoin = kCALineJoinRound
pw2

6

คำตอบ QuartzCore เวอร์ชันที่รวดเร็ว

import QuartzCore    

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

CAShapeLayerวิธีการนี้ใช้งานได้ แต่วิธีการของ QuartzCore นั้นดีกว่าในการจัดการการโหลดมุมมองตารางหากUIViewอยู่ภายในเซลล์

สำหรับภาพคุณสามารถใช้สิ่งนี้ (เล็กมาก):

ป้อนคำอธิบายรูปภาพที่นี่

ฉันมักจะชอบเวกเตอร์มากกว่า PNGs เมื่อฉันไปกับมันได้:

  • ภายใน Sketch ให้สร้างสี่เหลี่ยม 4x4 พิกเซล
  • รวมเป็นสี่เหล่านี้
  • จัดกลุ่มพวกเขาเป็น foursquare สลับสี
  • ส่งออกกลุ่มเป็น PDF
  • ภายในImages.xcassetsสร้างจุดที่New Image Setเรียกว่ารูปแบบ
  • เปลี่ยนScale FactorsไปSingle Vector
  • วาง PDF ของคุณ

6

สำหรับ 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);

โปรดอธิบายรายละเอียดให้ละเอียดเล็กน้อยแทนการวางโค้ดขนาดสั้นลง
kabirbaidhya

1
หมายเหตุสำหรับผู้อ่านในอนาคต: คุณจะต้องใช้เนมสเปซ CoreAnimation เพื่อใช้ตัวสร้าง CAShapeLayer
jnel899

6

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

4

นี่คือถ้าคุณต้องการใน 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);

}

3

ลองรหัสร้อง

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

สำหรับคนที่ชอบร้อง ป้อนคำอธิบายรูปภาพที่นี่


กระจกโค้งไม่โค้ง
Vivek Tyagi

3

สำหรับ Swift 5

extension UIView {
    func addDashBorder() {
        let color = UIColor.white.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.name = "DashBorder"
        shapeLayer.position = CGPoint(x: frameSize.width/2, y: frameSize.height/2)
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = color
        shapeLayer.lineWidth = 1.5
        shapeLayer.lineJoin = .round
        shapeLayer.lineDashPattern = [2,4]
        shapeLayer.path = UIBezierPath(roundedRect: shapeRect, cornerRadius: 10).cgPath

        self.layer.masksToBounds = false

        self.layer.addSublayer(shapeLayer)
    }
}

วิธีเพิ่ม

vw.addDashBorder()

วิธีลบเส้นขอบอีกครั้ง

let _ = vw.layer.sublayers?.filter({$0.name == "DashBorder"}).map({$0.removeFromSuperlayer()})

2

ฉันสิ้นสุดการสร้าง IB Designable โดยใช้ @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

จากนั้นเพียงตั้งค่าไว้ใน xib / storyboard:

ป้อนคำอธิบายรูปภาพที่นี่


2

โซลูชัน Swift พร้อมคลาสที่กำหนดเองทำงานกับการชำระอัตโนมัติ

ปรับแต่งจาก @Iain Smith

class DashedBorderView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 4
    @IBInspectable var borderColor: UIColor = UIColor.black
    @IBInspectable var dashPaintedSize: Int = 2
    @IBInspectable var dashUnpaintedSize: Int = 2

    let dashedBorder = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        //custom initialization
        self.layer.addSublayer(dashedBorder)
        applyDashBorder()
    }

    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: layer)
        applyDashBorder()
    }

    func applyDashBorder() {
        dashedBorder.strokeColor = borderColor.cgColor
        dashedBorder.lineDashPattern = [NSNumber(value: dashPaintedSize), NSNumber(value: dashUnpaintedSize)]
        dashedBorder.fillColor = nil
        dashedBorder.cornerRadius = cornerRadius
        dashedBorder.path = UIBezierPath(rect: self.bounds).cgPath
        dashedBorder.frame = self.bounds
    }
}

2

คุณสามารถสร้างคลาส IBDesignable แบบนี้:

import UIKit

@IBDesignable
class BorderedView: UIView {

    @IBInspectable var cornerRadius: CGFloat = 0

    @IBInspectable var borderWidth: CGFloat = 0

    @IBInspectable var borderColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
        path.lineWidth = borderWidth

        borderColor.setStroke()

        let dashPattern : [CGFloat] = [10, 4]
        path.setLineDash(dashPattern, count: 2, phase: 0)
        path.stroke()
    }

}

จากนั้นเพียงซับคลาสมุมมองของคุณด้วย BorderedView จาก Xcode วิธีนี้คุณสามารถตั้งค่าสีเส้นขอบและความกว้างของเส้นขอบได้อย่างง่ายดายจากเครื่องมือสร้างส่วนต่อประสาน!


2
extension UIView{
func addDashedLineBorder() {
    let color = UIColor.black.cgColor

    let shapeLayer:CAShapeLayer = CAShapeLayer()
    let frameSize = (self.frame.size)
    let shapeRect = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.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 = 1
    shapeLayer.lineJoin = kCALineJoinRound
    shapeLayer.lineDashPattern = [2,2]
    shapeLayer.path = UIBezierPath(rect: shapeRect).cgPath

    self.layer.addSublayer(shapeLayer)
}

} และเรียกใช้ฟังก์ชันนี้ใน viewdidLoad () ด้วยความล่าช้า:

DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { 
            // Your code with delay
            self.YourView.addDashedBorder()
        }

สิ่งนี้จะครอบคลุมส่วนที่คุณเห็น 100%
Ayush Dixit

1

•รวดเร็ว 5

•ทำงานร่วมกับการชำระอัตโนมัติ

•ทำงานร่วมกับรัศมีมุม

import UIKit

    class DashedBorderView: UIView {

    private let dashedLineColor = UIColor.black.cgColor
    private let dashedLinePattern: [NSNumber] = [6, 3]
    private let dashedLineWidth: CGFloat = 4

    private let borderLayer = CAShapeLayer()

    init() {
        super.init(frame: CGRect.zero)

        borderLayer.strokeColor = dashedLineColor
        borderLayer.lineDashPattern = dashedLinePattern
        borderLayer.backgroundColor = UIColor.clear.cgColor
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.lineWidth = dashedLineWidth
        layer.addSublayer(borderLayer)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        borderLayer.frame = bounds
        borderLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: layer.cornerRadius).cgPath
    }
}

0

ใน swift 4 ฉันสร้างส่วนขยาย UIView ด้วยฟังก์ชันต่อไปนี้:

func borderDash(withRadius cornerRadius: Float, borderWidth: Float, borderColor: UIColor, dashSize: Int) {
    let currentFrame = self.bounds
    let shapeLayer = CAShapeLayer()
    let path = CGMutablePath()
    let radius = CGFloat(cornerRadius)

    // Points - Eight points that define the round border. Each border is defined by two points.
    let topLeftPoint = CGPoint(x: radius, y: 0)
    let topRightPoint = CGPoint(x: currentFrame.size.width - radius, y: 0)
    let middleRightTopPoint = CGPoint(x: currentFrame.size.width, y: radius)
    let middleRightBottomPoint = CGPoint(x: currentFrame.size.width, y: currentFrame.size.height - radius)
    let bottomRightPoint = CGPoint(x: currentFrame.size.width - radius, y: currentFrame.size.height)
    let bottomLeftPoint = CGPoint(x: radius, y: currentFrame.size.height)
    let middleLeftBottomPoint = CGPoint(x: 0, y: currentFrame.size.height - radius)
    let middleLeftTopPoint = CGPoint(x: 0, y: radius)

    // Points - Four points that are the center of the corners borders.
    let cornerTopRightCenter = CGPoint(x: currentFrame.size.width - radius, y: radius)
    let cornerBottomRightCenter = CGPoint(x: currentFrame.size.width - radius, y: currentFrame.size.height - radius)
    let cornerBottomLeftCenter = CGPoint(x: radius, y: currentFrame.size.height - radius)
    let cornerTopLeftCenter = CGPoint(x: radius, y: radius)

    // Angles - The corner radius angles.
    let topRightStartAngle = CGFloat(Double.pi * 3 / 2)
    let topRightEndAngle = CGFloat(0)
    let bottomRightStartAngle = CGFloat(0)
    let bottmRightEndAngle = CGFloat(Double.pi / 2)
    let bottomLeftStartAngle = CGFloat(Double.pi / 2)
    let bottomLeftEndAngle = CGFloat(Double.pi)
    let topLeftStartAngle = CGFloat(Double.pi)
    let topLeftEndAngle = CGFloat(Double.pi * 3 / 2)

    // Drawing a border around a view.
    path.move(to: topLeftPoint)
    path.addLine(to: topRightPoint)
    path.addArc(center: cornerTopRightCenter,
                radius: radius,
                startAngle: topRightStartAngle,
                endAngle: topRightEndAngle,
                clockwise: false)
    path.addLine(to: middleRightBottomPoint)
    path.addArc(center: cornerBottomRightCenter,
                radius: radius,
                startAngle: bottomRightStartAngle,
                endAngle: bottmRightEndAngle,
                clockwise: false)
    path.addLine(to: bottomLeftPoint)
    path.addArc(center: cornerBottomLeftCenter,
                radius: radius,
                startAngle: bottomLeftStartAngle,
                endAngle: bottomLeftEndAngle,
                clockwise: false)
    path.addLine(to: middleLeftTopPoint)
    path.addArc(center: cornerTopLeftCenter,
                radius: radius,
                startAngle: topLeftStartAngle,
                endAngle: topLeftEndAngle,
                clockwise: false)

    // Path is set as the shapeLayer object's path.
    shapeLayer.path = path;
    shapeLayer.backgroundColor = UIColor.clear.cgColor
    shapeLayer.frame = currentFrame
    shapeLayer.masksToBounds = false
    shapeLayer.setValue(0, forKey: "isCircle")
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = borderColor.cgColor
    shapeLayer.lineWidth = CGFloat(borderWidth)
    shapeLayer.lineDashPattern = [NSNumber(value: dashSize), NSNumber(value: dashSize)]
    shapeLayer.lineCap = kCALineCapRound

    self.layer.addSublayer(shapeLayer)
    self.layer.cornerRadius = radius;
}

0

หากคุณต้องการให้มันทำงานร่วมกับ cornerRadius ให้ลองทำเช่นนี้

tagView.clipsToBounds = YES;
tagView.layer.cornerRadius = 20.0f;
tagView.backgroundColor = [UIColor groupTableViewBackgroundColor];

CAShapeLayer *yourViewBorder = [CAShapeLayer layer];
yourViewBorder.strokeColor = [UIColor blackColor].CGColor;
yourViewBorder.fillColor = nil;
yourViewBorder.lineDashPattern = @[@2, @2];
yourViewBorder.frame = tagView.bounds;

// Create the path for to make circle
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:tagView.bounds
                                               byRoundingCorners:UIRectCornerAllCorners
                                                     cornerRadii:CGSizeMake(20, 20)];


yourViewBorder.path = maskPath.CGPath;

[tagView.layer addSublayer:yourViewBorder];

0

Swift 5+

import UIKit

class DashedBorderView: UIView {

    private let borderLayer = CAShapeLayer()

    init(color: UIColor, width: CGFloat = 1) {
        super.init(frame: CGRect.zero)

        let pattern: [NSNumber] = [NSNumber(value: Float(5 * width)), NSNumber(value: Float(3 * width))]

        borderLayer.backgroundColor = nil
        borderLayer.fillColor = nil
        borderLayer.lineDashPattern = pattern
        borderLayer.lineWidth = width
        borderLayer.strokeColor = color.cgColor

        layer.addSublayer(borderLayer)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        borderLayer.frame = bounds
        borderLayer.path = UIBezierPath(roundedRect: rect, cornerRadius: layer.cornerRadius).cgPath
    }
}

วิธีใช้:

// f.e. inside UIViewController

let viewWithDashedBorder = DashedBorderView(color: .red, width: 2)
view.addSubview(viewWithDashedBorder)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.