Zeichnen Sie eine gepunktete (nicht gestrichelte!) Linie mit IBDesignable im Jahr 2017

Mit UIKit ist es einfach, eine gestrichelte Linie zu zeichnen. So:

CGFloat dashes[] = {4, 2};
[path setLineDash:dashes count:2 phase:0];
[path stroke];

Gibt es eine Möglichkeit, eine echte gepunktete Linie zu zeichnen?

Irgendwelche Ideen?

Da diese Frage wirklich alt ist und niemand eine vollständige @IBDesignableLösung gefunden hat, ist sie hier ...

Hoffe, es erspart jemandem das Tippen.

@IBDesignable class DottedVertical: UIView {

    @IBInspectable var dotColor: UIColor = UIColor.etc
    @IBInspectable var lowerHalfOnly: Bool = false

    override func draw(_ rect: CGRect) {

        // say you want 8 dots, with perfect fenceposting:
        let totalCount = 8 + 8 - 1
        let fullHeight = bounds.size.height
        let width = bounds.size.width
        let itemLength = fullHeight / CGFloat(totalCount)

        let path = UIBezierPath()

        let beginFromTop = CGFloat(0.0)
        let top = CGPoint(x: width/2, y: beginFromTop)
        let bottom = CGPoint(x: width/2, y: fullHeight)

        path.move(to: top)
        path.addLine(to: bottom)

        path.lineWidth = width

        let dashes: [CGFloat] = [itemLength, itemLength]
        path.setLineDash(dashes, count: dashes.count, phase: 0)

        // for ROUNDED dots, simply change to....
        //let dashes: [CGFloat] = [0.0, itemLength * 2.0]
        //path.lineCapStyle = CGLineCap.round

        dotColor.setStroke()
        path.stroke()
    }
}

Ich habe es vertikal gemacht, du kannst es leicht ändern.

Fügen Sie einfach eine UIView in die Szene ein. Machen Sie es wie Sie möchten, und das ist die Breite der gepunkteten Linie.

Ändern DottedVerticalSie einfach die Klasse in und Sie sind fertig. Es wird so richtig im Storyboard gerendert.

Beachten Sie, dass der für die Höhe der Blöcke angegebene Beispielcode ("totalCount" usw.) dazu führt, dass die Blöcke perfekt zum Pixel passen und mit den Enden der UIView übereinstimmen, die die Linie erstellt.

Stellen Sie sicher, dass Sie RobMayoffs Antwort unten ankreuzen, die die beiden erforderlichen Codezeilen für Punkte-nicht-Blöcke enthält.

Stellen Sie den Linienkappenstil auf rund und die Ein-Länge auf eine winzige Zahl ein.

Beispiel für einen schnellen Spielplatz:

import UIKit
import PlaygroundSupport

let path = UIBezierPath()
path.move(to: CGPoint(x:10,y:10))
path.addLine(to: CGPoint(x:290,y:10))
path.lineWidth = 8

let dashes: [CGFloat] = [0.001, path.lineWidth * 2]
path.setLineDash(dashes, count: dashes.count, phase: 0)
path.lineCapStyle = CGLineCap.round

UIGraphicsBeginImageContextWithOptions(CGSize(width:300, height:20), false, 2)

UIColor.white.setFill()
UIGraphicsGetCurrentContext()!.fill(.infinite)

UIColor.black.setStroke()
path.stroke()

let image = UIGraphicsGetImageFromCurrentImageContext()
let view = UIImageView(image: image)
PlaygroundPage.current.liveView = view

UIGraphicsEndImageContext()

Ergebnis:

Fügen Sie für Ziel-C unter Verwendung derselben Beispielklasse wie in der Frage einfach hinzu

CGContextSetLineCap(cx, kCGLineCapRound);

vor dem Aufruf von CGContextStrokePathund ändern Sie die raArray-Werte so, dass sie meinem Swift-Code entsprechen.

Objective-C-Version des obigen Swift-Beispiels:

UIBezierPath * path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(10.0, 10.0)];
[path addLineToPoint:CGPointMake(290.0, 10.0)];
[path setLineWidth:8.0];
CGFloat dashes[] = { path.lineWidth, path.lineWidth * 2 };
[path setLineDash:dashes count:2 phase:0];
[path setLineCapStyle:kCGLineCapRound];
UIGraphicsBeginImageContextWithOptions(CGSizeMake(300, 20), false, 2);
[path stroke];
UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Bei Verwendung einer UIView-Erweiterung, die mit Swift 3.0 kompatibel ist, sollte Folgendes funktionieren:

extension UIView {

    func addDashedBorder(strokeColor: UIColor, lineWidth: CGFloat) {
        self.layoutIfNeeded()
        let strokeColor = strokeColor.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 = strokeColor
        shapeLayer.lineWidth = lineWidth
        shapeLayer.lineJoin = kCALineJoinRound

        shapeLayer.lineDashPattern = [5,5] // adjust to your liking
        shapeLayer.path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: shapeRect.width, height: shapeRect.height), cornerRadius: self.layer.cornerRadius).cgPath

        self.layer.addSublayer(shapeLayer)
    }

}

Führen Sie dann in einer Funktion, die danach ausgeführt viewDidLoadwird viewDidLayoutSubviews, die addDashedBorderFunktion in der betreffenden Ansicht aus:

class ViewController: UIViewController {

    var someView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        someView = UIView()
        someView.layer.cornerRadius = 5.0

        view.addSubview(someView)

        someView.translatesAutoresizingMaskIntoConstraints = false
        someView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        someView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        someView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        someView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }

    override func viewDidLayoutSubviews() {
        someView.addDashedBorder(strokeColor: UIColor.red, lineWidth: 1.0)
    }

}

Ich arbeite ein wenig an der von Rob Mayoff akzeptierten Lösung, um die gepunktete Linie einfach anzupassen:

• Ändern Sie den Radius jedes Kreises.
• Ändern Sie die Anzahl der Leerzeichen zwischen 2 Kreisen.
• Ändern Sie die Anzahl der zu generierenden Muster.

Die Funktion gibt ein UIImage zurück:

extension UIImage {

    class func dottedLine(radius radius: CGFloat, space: CGFloat, numberOfPattern: CGFloat) -> UIImage {


        let path = UIBezierPath()
        path.moveToPoint(CGPointMake(radius/2, radius/2))
        path.addLineToPoint(CGPointMake((numberOfPattern)*(space+1)*radius, radius/2))
        path.lineWidth = radius

        let dashes: [CGFloat] = [path.lineWidth * 0, path.lineWidth * (space+1)]
        path.setLineDash(dashes, count: dashes.count, phase: 0)
        path.lineCapStyle = CGLineCap.Round


        UIGraphicsBeginImageContextWithOptions(CGSizeMake((numberOfPattern)*(space+1)*radius, radius), false, 1)
        UIColor.whiteColor().setStroke()
        path.stroke()
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image

    }
}

Und so erhalten Sie das Bild:

UIImage.dottedLine(radius: 100, space: 2, numberOfPattern: 1)

Hallo Leute, diese Lösung hat bei mir gut funktioniert. Ich habe irgendwo gefunden und ein bisschen geändert, um Konsolenwarnungen zu verhindern.

extension UIImage {
    static func drawDottedImage(width: CGFloat, height: CGFloat, color: UIColor) -> UIImage {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 1.0, y: 1.0))
        path.addLine(to: CGPoint(x: width, y: 1))
        path.lineWidth = 1.5           
        let dashes: [CGFloat] = [path.lineWidth, path.lineWidth * 5]
        path.setLineDash(dashes, count: 2, phase: 0)
        path.lineCapStyle = .butt
        UIGraphicsBeginImageContextWithOptions(CGSize(width: width, height: height), false, 2)
        color.setStroke()
        path.stroke()

        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()

        return image
    }
}

Das ist das Ergebnis:

Keine vollständige Antwort, nur ein sehr wichtiger Punkt , den James P in einem Kommentar zur Lieblingsantwort angesprochen hat:

Er schrieb:

Ich habe festgestellt, dass das Einstellen der Ein-Länge auf 0,01 einen kreisförmigen Punkt ergibt, während sie bei Verwendung von 0 leicht verlängert sind.

Beispielsweise,

   let dashes: [CGFloat] = [0.001, path.lineWidth * 2]

In Swift 3.1 können Sie den folgenden Code verwenden:

context.setLineCap(.round)

Haben Sie drei Stile:

 /* Line cap styles. */

public enum CGLineCap : Int32 {

    case butt

    case round

    case square
}

Funktioniert gut mit dem folgenden Code,

layer.path = linePath.cgPath
layer.lineWidth = 3
layer.lineDashPattern = [1,layer.lineWidth*2] as [NSNumber]
layer.lineCap = "round"

Hey, es ist vielleicht zu spät, um diese Frage zu beantworten. Aber wenn Sie zustimmen, möchte ich den Entwicklern, die möglicherweise in Zukunft mit diesem Problem konfrontiert werden, einen einfachen Weg zur Lösung dieses Problems vorstellen. Ich denke also, dass die einfachste Lösung mit @IBDesignable. Sie müssen nur diese Klasse erstellen

import UIKit

@IBDesignable class DottedVertical: UIView {

    @IBInspectable var dotColor: UIColor = UIColor.red
    @IBInspectable var lowerHalfOnly: Bool = false

    override func draw(_ rect: CGRect) {

        // say you want 8 dots, with perfect fenceposting:
        let totalCount = 8 + 8 - 1
        let fullHeight = bounds.size.height
        let width = bounds.size.width
        let itemLength = fullHeight / CGFloat(totalCount)

        let path = UIBezierPath()

        let beginFromTop = CGFloat(0.0)
        let top = CGPoint(x: width/2, y: beginFromTop)
        let bottom = CGPoint(x: width/2, y: fullHeight)

        path.move(to: top)
        path.addLine(to: bottom)

        path.lineWidth = width
        //DASHED SIMPLE LINE
        //let dashes: [CGFloat] = [itemLength, itemLength]
        //path.setLineDash(dashes, count: dashes.count, phase: 0)

        // for ROUNDED dots, simply change to....
        let dashes: [CGFloat] = [0.0, itemLength * 1.1]
        path.lineCapStyle = CGLineCap.round
        path.setLineDash(dashes, count: dashes.count, phase: 0)

        dotColor.setStroke()
        path.stroke()
    }
}

Und hängen Sie es dann so an Ihre Ansicht im Storyboard an

Sobald Sie fertig sind, let dashes: [CGFloat] = [0.0, itemLength * 1.1] passen Sie den Abstand zwischen den Ebenen dieser Zeile -> Zeile 39 in der DottedVertical-Klasse kalt an. Wenn Sie die Breite der Ebene anpassen möchten, müssen Sie nur die Breite der Linienansicht in Ihrem Storyboard bearbeiten

Ich habe den folgenden Code implementiert, um einen Rand mit gepunktetem Stil am unteren Rand von titleLabel( UILabel) in hinzuzufügen viewDidAppear:

CAShapeLayer *shapelayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0.0, titileLabel.frame.size.height-2)];
[path addLineToPoint:CGPointMake(SCREEN_WIDTH, titileLabel.frame.size.height-2)];
UIColor *fill = [UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.00f];
shapelayer.strokeStart = 0.0;
shapelayer.strokeColor = fill.CGColor;
shapelayer.lineWidth = 2.0;
shapelayer.lineJoin = kCALineJoinRound;
shapelayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:2],[NSNumber numberWithInt:3 ], nil];
shapelayer.path = path.CGPath;

[titileLabel.layer addSublayer:shapelayer];

Aktualisierung: https://gist.github.com/kaiix/4070967