Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing a grid on a UIView in Swift

Tags:

ios

swift

uiview

I am very new to Swift. Am trying to draw a grid (like a graph page) on a UIView in Swift. The code is running but I don't see any lines. I don't see what I did wrong.

In the Storyboard I added a View onto the ViewController.

In code I created a GridView.swift and added it to the View above. Here is the code for GridView class. The function draw is being called and the code running without any errors. Its just doing what I thought it would do.

Its not even drawing one line (I remove the for loop and just try to draw one line). This seems so basic that it should work.

import Foundation
import UIKit

class GridView: UIView 
{
    fileprivate var gridWidthMultiple: CGFloat
    {
        return 10
    }
    fileprivate var gridHeightMultiple : CGFloat
    {
        return 20
    }

    fileprivate var gridWidth: CGFloat
    {   
        return bounds.width/CGFloat(gridWidthMultiple)
    }

    fileprivate var gridHeight: CGFloat
    {
        return bounds.height/CGFloat(gridHeightMultiple)
    }

    fileprivate var gridCenter: CGPoint {
        return CGPoint(x: bounds.midX, y: bounds.midY)
    }

    fileprivate func drawGrid()
    {
        let path = UIBezierPath()
        path.lineWidth = 5.0

        for index in 1...Int(gridWidthMultiple) - 1
        {
            let start = CGPoint(x: CGFloat(index) * gridWidth, y: 0)
            let end = CGPoint(x: CGFloat(index) * gridWidth, y:bounds.height)
            path.move(to: start)
            path.addLine(to: end)
        }
    }

    override func draw(_ rect: CGRect)
    {
        drawGrid()
    }
}
like image 486
SFlow Avatar asked Sep 24 '17 13:09

SFlow


1 Answers

Just Copy and paste the below code and you will be good to go. I haven't check your logic of drawing correct grid i have just solved the not drawing issue. If it draw wrong grid then i will re-check your grid logic for now it just help you to draw something using UIBezierPath

class GridView: UIView
{
    private var path = UIBezierPath()
    fileprivate var gridWidthMultiple: CGFloat
    {
        return 10
    }
    fileprivate var gridHeightMultiple : CGFloat
    {
        return 20
    }

    fileprivate var gridWidth: CGFloat
    {
        return bounds.width/CGFloat(gridWidthMultiple)
    }

    fileprivate var gridHeight: CGFloat
    {
        return bounds.height/CGFloat(gridHeightMultiple)
    }

    fileprivate var gridCenter: CGPoint {
        return CGPoint(x: bounds.midX, y: bounds.midY)
    }

    fileprivate func drawGrid()
    {
        path = UIBezierPath()
        path.lineWidth = 5.0

        for index in 1...Int(gridWidthMultiple) - 1
        {
            let start = CGPoint(x: CGFloat(index) * gridWidth, y: 0)
            let end = CGPoint(x: CGFloat(index) * gridWidth, y:bounds.height)
            path.move(to: start)
            path.addLine(to: end)
        }

        for index in 1...Int(gridHeightMultiple) - 1 {
            let start = CGPoint(x: 0, y: CGFloat(index) * gridHeight)
            let end = CGPoint(x: bounds.width, y: CGFloat(index) * gridHeight)
            path.move(to: start)
            path.addLine(to: end)
        }

        //Close the path.
        path.close()

    }

    override func draw(_ rect: CGRect)
    {
        drawGrid()

        // Specify a border (stroke) color.
        UIColor.purple.setStroke()
        path.stroke()
    }
}
like image 115
Syed Qamar Abbas Avatar answered Oct 17 '22 22:10

Syed Qamar Abbas