代码之家  ›  专栏  ›  技术社区  ›  Mohmmad S

使用IBdesignable的虚线水平线

  •  1
  • Mohmmad S  · 技术社区  · 6 年前

    所以我遇到了 this 问题,我想用同样的方法画一条水平线 @IBDesignable .

    我试过在教室里玩,但没有结果。

    @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()
        }
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Kamran    6 年前

    你可以做到以下几点:

    @IBDesignable class DottedHorizontal: UIView {
    
        @IBInspectable var dotColor: UIColor = UIColor.red
        @IBInspectable var lowerHalfOnly: Bool = false
    
        override func draw(_ rect: CGRect) {
    
            let fullHeight = bounds.size.height
            let width = bounds.size.width
    
            let path = UIBezierPath()
    
            path.move(to: CGPoint(x: 0, y: fullHeight/2))
            path.addLine(to: CGPoint(x: width, y: fullHeight/2))
    
            path.lineWidth = 5
    
            let dashes: [CGFloat] = [4, 2]
            path.setLineDash(dashes, count: dashes.count, phase: 0)
    
            dotColor.setStroke()
            path.stroke()
        }
    }
    

    enter image description here