Skip to content

Instantly share code, notes, and snippets.

@khurram18
Last active May 18, 2023 13:46
Show Gist options
  • Save khurram18/706f65035a32dbe6ad084d9d0e672d0f to your computer and use it in GitHub Desktop.
Save khurram18/706f65035a32dbe6ad084d9d0e672d0f to your computer and use it in GitHub Desktop.
A grid view in swift, can be shown in a iOS camera app. It draws three rows and three columns which helps user to take a picture precisely.
class GridView: UIView {
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
let borderLayer = gridLayer()
borderLayer.path = UIBezierPath(rect: bounds).cgPath
layer.addSublayer(borderLayer)
let firstColumnPath = UIBezierPath()
firstColumnPath.move(to: CGPoint(x: bounds.width / 3, y: 0))
firstColumnPath.addLine(to: CGPoint(x: bounds.width / 3, y: bounds.height))
let firstColumnLayer = gridLayer()
firstColumnLayer.path = firstColumnPath.cgPath
layer.addSublayer(firstColumnLayer)
let secondColumnPath = UIBezierPath()
secondColumnPath.move(to: CGPoint(x: (2 * bounds.width) / 3, y: 0))
secondColumnPath.addLine(to: CGPoint(x: (2 * bounds.width) / 3, y: bounds.height))
let secondColumnLayer = gridLayer()
secondColumnLayer.path = secondColumnPath.cgPath
layer.addSublayer(secondColumnLayer)
let firstRowPath = UIBezierPath()
firstRowPath.move(to: CGPoint(x: 0, y: bounds.height / 3))
firstRowPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height / 3))
let firstRowLayer = gridLayer()
firstRowLayer.path = firstRowPath.cgPath
layer.addSublayer(firstRowLayer)
let secondRowPath = UIBezierPath()
secondRowPath.move(to: CGPoint(x: 0, y: ( 2 * bounds.height) / 3))
secondRowPath.addLine(to: CGPoint(x: bounds.width, y: ( 2 * bounds.height) / 3))
let secondRowLayer = gridLayer()
secondRowLayer.path = secondRowPath.cgPath
layer.addSublayer(secondRowLayer)
}
private func gridLayer() -> CAShapeLayer {
let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = UIColor.white.cgColor
shapeLayer.lineDashPattern = [3, 3]
shapeLayer.frame = bounds
shapeLayer.fillColor = nil
return shapeLayer
}
}
@khurram18
Copy link
Author

khurram18 commented Sep 3, 2018

Below is its usage and how to add grid view at run time.

private func addGridView() {
    // cameraView is your view where you want to show the grid view
    let horizontalMargin = cameraView.bounds.size.width / 4
    let verticalMargin = cameraView.bounds.size.height / 4
    
    let gridView = GridView()
    gridView.translatesAutoresizingMaskIntoConstraints = false
    cameraView.addSubview(gridView)
    gridView.backgroundColor = UIColor.clear
    gridView.leftAnchor.constraint(equalTo: cameraView.leftAnchor, constant: horizontalMargin).isActive = true
    gridView.rightAnchor.constraint(equalTo: cameraView.rightAnchor, constant: -1 * horizontalMargin).isActive = true
    gridView.topAnchor.constraint(equalTo: cameraView.topAnchor, constant: verticalMargin).isActive = true
    gridView.bottomAnchor.constraint(equalTo: cameraView.bottomAnchor, constant: -1 * verticalMargin).isActive = true
}

@vvit
Copy link

vvit commented Aug 18, 2020

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment