开发者

Create grid lines and allow user to on/off grid line view

I would like to create a grid line approach in my app and allow the user to switch on/off the grid view. It doesn't need to have any sort of touch detection or a logic associated to it. Just grid lines for the user to see and turn them on/off. The obvious solution for this would be to add an image of grid to my view and display it whenever required using an imageview. But that is an option that I cannot take. I have to do i开发者_运维百科t programmatically. Thanks for your time. An image of what I am planning to implement. Any ideas ? Core graphics or many uiviews ?


I have used this for Swift3

class GridView: UIView {

    var numberOfColumns: Int = 2
    var numberOfRows: Int = 2
    var lineWidth: CGFloat = 1.0
    var lineColor: UIColor = UIColor.white

    override func draw(_ rect: CGRect) {
        if let context = UIGraphicsGetCurrentContext() {

            context.setLineWidth(lineWidth)
            context.setStrokeColor(UIColor.white.cgColor)

            let columnWidth = Int(rect.width) / (numberOfColumns + 1)
            for i in 1...numberOfColumns {
                var startPoint = CGPoint.zero
                var endPoint = CGPoint.zero
                startPoint.x = CGFloat(columnWidth * i)
                startPoint.y = 0.0
                endPoint.x = startPoint.x
                endPoint.y = frame.size.height
                context.move(to: CGPoint(x: startPoint.x, y: startPoint.y))
                context.addLine(to: CGPoint(x: endPoint.x, y: endPoint.y))
                context.strokePath()
            }

            let rowHeight = Int(rect.height) / (numberOfRows + 1)
            for j in 1...numberOfRows {
                var startPoint = CGPoint.zero
                var endPoint = CGPoint.zero
                startPoint.x = 0.0
                startPoint.y = CGFloat(rowHeight * j)
                endPoint.x = frame.size.width
                endPoint.y = startPoint.y
                context.move(to: CGPoint(x: startPoint.x, y: startPoint.y))
                context.addLine(to: CGPoint(x: endPoint.x, y: endPoint.y))
                context.strokePath()
            }
        }
    }
}

And set its background colour as clear.

The code is also present here


Subclass a UIView and create separate 2 loops in there. One for vertical lines and one for horizontal lines. In the vertical lines loop, create UIView’s 1px wide and 768px high. In horizontal one, create them 1px high and 1024px wide.

To hide and show it, just switch the subclassed view’s hidden property to either YES or NO.

You can possibly do without the subclassing as well, just use a standard UIView.


Ended up using this:

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"sample.png"]];
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜