iOS: Programmatically drawing lines in UIView

Question

I am trying to create a UIView as modeled in the picture. Though, I seem to be having some issue with my code. Any idea why?

Solved with the help of comments! Correct code is updated!

UPDATE: I created a custom UIView class Here is my new code, based off of the comments.

drawLine taken from this: Draw a line with UIBezierPath

You should check when the drawLineFromPointToPoint (in the test() method) is called. If you call it before the viewWillLayoutSubviews then the textStartX, textEndX is not the same as your expected. — Tony TRAN, Dec 05 '17 at 03:20
You really show create a custom `UIView` subclass and override its `draw(_:)` method. — rmaddy, Dec 05 '17 at 03:20
You basically dont need draw the layer when you use constraint, just fill the view with background color and add height, center, left/right constraint, done — Tj3n, Dec 05 '17 at 03:21
@TonyTran I modified my code to reflect both of your comments, and it fixed my problem. Thanks! I updated my question to reflect the correct code — degenPenguin, Dec 05 '17 at 03:59
@rmaddy I modified my code to reflect both of your comments, and it fixed my problem. Thanks! — degenPenguin, Dec 05 '17 at 03:59
Instead of modifying your question, you should post your solution as an answer below. — rmaddy, Dec 05 '17 at 04:02
I know you already find a solution, but just out of curiosity, why didn't you place a view with background color, height, etc. as @Tj3n said? It's simpler and effortless. The current solution seems hardscrabble. — Dorukhan Arslan, Dec 05 '17 at 06:54

score 6 · Accepted Answer · answered Dec 05 '17 at 04:09

Code to achieve the above image:

//Post this function in your TableViewController
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = HeaderTableView()
    view.title.text = "THIS WEEK"

    return view
}

//Custom UIView Class
class CustomView: UIView {

var shouldSetupConstraints = true
var title: UILabel!
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
    let textStartX = Int((title.frame.minX))
    let textEndX = Int((title.frame.maxX))
    let midY = Int(self.frame.midY)
    self.drawLine(startX: 8, toEndingX: textStartX - 8, startingY: midY, toEndingY: midY, ofColor: UIColor.white, widthOfLine: 1, inView: self)
    self.drawLine(startX: textEndX + 8, toEndingX: Int(self.frame.maxX) - 8, startingY: midY, toEndingY: midY, ofColor: UIColor.white, widthOfLine: 1, inView: self)

}



override init(frame: CGRect) {
    super.init(frame: frame)
    title = UILabel()
    self.addSubview(title)

    title.textAlignment = .center
    title.textColor = UIColor.white
    title.translatesAutoresizingMaskIntoConstraints = false

}

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

override func updateConstraints() {
    if(shouldSetupConstraints) {
        // AutoLayout constraints
        let xConstraint = NSLayoutConstraint(item: title, attribute: .centerX, relatedBy: .equal, toItem: self, attribute: .centerX, multiplier: 1, constant: 0)
        let yConstraint = NSLayoutConstraint(item: title, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0)
        self.addConstraints([xConstraint, yConstraint])
        shouldSetupConstraints = false
    }
    super.updateConstraints()
}

func drawLine(startX: Int, toEndingX endX: Int, startingY startY: Int, toEndingY endY: Int, ofColor lineColor: UIColor, widthOfLine lineWidth: CGFloat, inView view: UIView) {

    let path = UIBezierPath()
    path.move(to: CGPoint(x: startX, y: startY))
    path.addLine(to: CGPoint(x: endX, y: endY))

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = lineColor.cgColor
    shapeLayer.lineWidth = lineWidth

    view.layer.addSublayer(shapeLayer)

}
}

Credits:

score 0 · Answer 2 · answered Oct 20 '18 at 10:45

Draw line in Swift 4.1

class MyViewController: UIViewController {

@IBOutlet weak var imgViewDraw: UIImageView!


var lastPoint = CGPoint.zero
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var brushWidth: CGFloat = 10.0
var opacity: CGFloat = 1.0
var isSwiping:Bool!


var previousPoint1 = CGPoint()

override func viewDidLoad() {
    super.viewDidLoad()


}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


//MARK: Touch events
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    isSwiping    = false
    if let touch = touches.first{
        lastPoint = touch.location(in: imgViewDraw)
    }
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    isSwiping = true;
    if let touch = touches.first{
        let currentPoint = touch.location(in: imgViewDraw)
        UIGraphicsBeginImageContext(self.imgViewDraw.frame.size)
        self.imgViewDraw.image?.draw(in: CGRect(x:0, y:0,width:self.imgViewDraw.frame.size.width, height:self.imgViewDraw.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currentPoint.x, y: currentPoint.y))

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        UIGraphicsGetCurrentContext()?.setLineWidth(self.brushWidth)
        UIGraphicsGetCurrentContext()?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
        UIGraphicsGetCurrentContext()?.strokePath()


        self.imgViewDraw.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        lastPoint = currentPoint
    }
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if(!isSwiping) {
        // This is a single touch, draw a point
        UIGraphicsBeginImageContext(self.imgViewDraw.frame.size)
        self.imgViewDraw.image?.draw(in: CGRect(x:0, y:0,width:self.imgViewDraw.frame.size.width, height:self.imgViewDraw.frame.size.height))
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        UIGraphicsGetCurrentContext()?.setLineWidth(self.brushWidth)

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
        UIGraphicsGetCurrentContext()?.strokePath()
        self.imgViewDraw.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
}


}

iOS: Programmatically drawing lines in UIView

2 Answers2