Need to make a grid this on UIKit using a UICollectionView - swift

Question

I want to make a grid in the photo. How can I achieve this? Can you tell me where to look? Googled everything but found nothing, except through CoreGraphics, but that's not an option I'm considering.

Answer 1

Here's a really quick example using a CAShapeLayer...
UIImageView subclass
class GridImageView: UIImageView {
public var numRows: Int = 1
public var numColumns: Int = 1
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
override init(image: UIImage?) {
super.init(image: image)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.strokeColor = UIColor.white.cgColor
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y += yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x += xIncrement
}
}
gridLayer.path = bez.cgPath
}
}
Example Controller
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
let imgView = GridImageView(image: img)
imgView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imgView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
imgView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
imgView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
imgView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
imgView.numRows = 4
imgView.numColumns = 3
}
}
Output (using a random beach jpg):
Edit - after further comments on OP...
To get the "effect" from the video you posted, we can simply add a "grid overlay view" on top of the scroll view.
So, we'll use an almost identical subclassed UIView:
class GridOverlayView: UIView {
public var lineColor: UIColor = .white { didSet { setNeedsLayout() } }
public var numRows: Int = 1 { didSet { setNeedsLayout() } }
public var numColumns: Int = 1 { didSet { setNeedsLayout() } }
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y += yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x += xIncrement
}
}
gridLayer.strokeColor = lineColor.cgColor
gridLayer.path = bez.cgPath
}
}
with this "beach" image:
and this controller class with a scroll view:
class GridScrollTestVC: UIViewController, UIScrollViewDelegate {
let imgView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
imgView.image = img
let scrollView = UIScrollView()
scrollView.backgroundColor = .red
scrollView.delegate = self
imgView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.addSubview(imgView)
let g = view.safeAreaLayoutGuide
let cg = scrollView.contentLayoutGuide
let fg = scrollView.frameLayoutGuide
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
imgView.topAnchor.constraint(equalTo: cg.topAnchor, constant: 0.0),
imgView.leadingAnchor.constraint(equalTo: cg.leadingAnchor, constant: 0.0),
imgView.trailingAnchor.constraint(equalTo: cg.trailingAnchor, constant: 0.0),
imgView.bottomAnchor.constraint(equalTo: cg.bottomAnchor, constant: 0.0),
imgView.widthAnchor.constraint(equalTo: fg.widthAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 5.0
// now let's add the grid "overlay"
let gridView = GridOverlayView()
gridView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(gridView)
gridView.numRows = 4
gridView.numColumns = 3
gridView.lineColor = .black
NSLayoutConstraint.activate([
gridView.topAnchor.constraint(equalTo: scrollView.topAnchor),
gridView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
gridView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
gridView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
])
// don't let the grid overlay view interfere with the scrolling/zooming
gridView.isUserInteractionEnabled = false
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imgView
}
}
and we get this output:
and after zooming in a bit: