Drawing a Diagonal Line in Swift - ios

Question

I was wondering if it is possible to draw a diagonal line by using UIViews? I have successfully made a straight line (vertical/horizontal) but I can not find a way to rotate the line.
Thank you for your help!

Answer 1

Here is a basic example of a view that contains a diagonal line view in Swift 2. When the view's bounds change, the diagonal is adapted by adjusting it's length and the rotation angle.
import UIKit
import Foundation
class ViewWithDiagonalLine: UIView {
private let line: UIView
private var lengthConstraint: NSLayoutConstraint!
init() {
// Initialize line view
line = UIView()
line.translatesAutoresizingMaskIntoConstraints = false
line.backgroundColor = UIColor.redColor()
super.init(frame: CGRectZero)
clipsToBounds = true // Cut off everything outside the view
// Add and layout the line view
addSubview(line)
// Define line width
line.addConstraint(NSLayoutConstraint(item: line, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 10))
// Set up line length constraint
lengthConstraint = NSLayoutConstraint(item: line, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 0)
addConstraint(lengthConstraint)
// Center line in view
addConstraint(NSLayoutConstraint(item: line, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1, constant: 0))
addConstraint(NSLayoutConstraint(item: line, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: 1, constant: 0))
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
// Update length constraint and rotation angle
lengthConstraint.constant = sqrt(pow(frame.size.width, 2) + pow(frame.size.height, 2))
line.transform = CGAffineTransformMakeRotation(atan2(frame.size.height, frame.size.width))
}
}
Putting that into a plain view controller for demonstration purposes
class ViewController: UIViewController {
override func viewDidLoad() {
let v = ViewWithDiagonalLine()
v.frame = CGRectMake(100, 100, 100, 200)
v.layer.borderColor = UIColor.blueColor().CGColor
v.layer.borderWidth = 1
view.addSubview(v)
}
}
yields the result

Answer 2

You could rotate the UIView by setting its transform property. You'd want to use CGAffineTransformMakeRotation or CGAffineTransformRotate.
However, you'd probably be better off using a CAShapeLayer and setting its path property to the line you want to draw.