[Swift]在UIView上绘制网格

风浅月明

于 2022-11-29 13:07:17 发布

阅读量1.7k

点赞数

分类专栏： Swift 文章标签： swift UIView 绘制网格

本文链接：https://blog.csdn.net/wsyx768/article/details/128095868

版权

Swift 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

方式一：宽高单独绘制网格

例：宽等分20份，高等分20份。

import Foundation

class GridView: UIView {
    
    private var path = UIBezierPath()
    fileprivate var gridWidthMultiple: CGFloat {
        return 20
    }
    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 = 0.5

        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)
        }

        // 关闭路径
        path.close()
    }

    override func draw(_ rect: CGRect) {
        drawGrid()
        // 指定边框(描边)颜色
        let drawColor = UIColor.lightGray
        drawColor.setStroke()
        path.stroke()
    }
    
}

示意图：

方式二：高跟随宽绘制

import Foundation

class GridView: UIView {
    
    private var path = UIBezierPath()
    fileprivate var gridWidthMultiple: CGFloat {
        return 20
    }
    fileprivate var gridHeightMultiple : CGFloat {
        let row = Int(bounds.height/gridHeight) + 1
        return CGFloat(row)
    }

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

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

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

        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)
        }

        // 关闭路径
        path.close()
    }

    override func draw(_ rect: CGRect) {
        drawGrid()
        // 指定边框(描边)颜色
        let drawColor = UIColor.lightGray
        drawColor.setStroke()
        path.stroke()
    }
    
}

示意图：