Draw grid programatically with borders

Question

I need to draw a grid with some special requirements. My current solution is working but is far away from ideal I guess. Attached you can find the current working solution:

Some of my thoughts which led to the current solution:

1. self.view.layer.border... is not working for me because I need different colors for different sides of the border. Also the outer cells of the grid would only have half the border of the other cells because their borders add up when positioned right next to each other.
2. I could draw a container view which draws the right colors and then position the cells with a gap of 1px but this solution also does not look very nice.

The currently used code snippet:

private func drawBorder() {
    //TODO: better way to do it ?
    var edgesToColorDifferently: UIRectEdge = []
    var edgesToDrawBold: UIRectEdge = []
    var defaultEdges: UIRectEdge = .all
    var colorForBoldEdge = Theme.shared.stoneBorderColor
    let lastLocation = self.tackleBoard.boardSize - 1

    if(location.row == 1 || location.row == lastLocation) {
        edgesToColorDifferently.insert(.top)
    }

    if(location.row == 0 || location.row == lastLocation - 1) {
        edgesToColorDifferently.insert(.bottom)
    }

    if(location.column == 1 || location.column == lastLocation) {
        edgesToColorDifferently.insert(.left)
    }

    if(location.column == 0 || location.column == lastLocation - 1) {
        edgesToColorDifferently.insert(.right)
    }

    if(self.tackleBoard.isCornerStone(atLocation: location)) {
        colorForBoldEdge = Theme.shared.alternateStoneBorderColor
        edgesToColorDifferently.insert(.all)
    }

    if(self.location.row == 0) {
        edgesToDrawBold.insert(.top)
    }

    if(self.location.row == lastLocation) {
        edgesToDrawBold.insert(.bottom)
    }

    if(self.location.column == 0) {
        edgesToDrawBold.insert(.left)
    }

    if(self.location.column == lastLocation) {
        edgesToDrawBold.insert(.right)
    }

    defaultEdges.remove(edgesToColorDifferently)
    defaultEdges.remove(edgesToDrawBold)

    self.addBorder([
        Border(edges: defaultEdges),
        Border(edges: edgesToDrawBold, color: colorForBoldEdge, thickness: 1.0),
        Border(edges: edgesToColorDifferently, color: Theme.shared.alternateStoneBorderColor)
    ])
}

addBorder() is a method in an UIView extension which adds a 1px view with the correct height/width/color to the given edge.

I would love to have your opinions on how to improve the drawing process because I know that the current code is not readable at all and is way too complicated for such a basic thing.

Answer 1

I solved it by drawing the borders 1px outside of the squares bounds. This way I was able to simplify my method enormously:

private func drawBorder() {
        var borders: [Border] = [Border(edges: .all)]
        if self.tackleBoard.isCornerStone(atLocation: location) {
            borders.append(Border(edges: .all, color: Theme.shared.alternateStoneBorderColor))
        }
        if location.row == tackleBoard.boardSize - 1 || location.row == 1 {
            borders.append(Border(edges: .top, color: Theme.shared.alternateStoneBorderColor))
        }
        if location.column == tackleBoard.boardSize - 1 || location.column == 1 {
            borders.append(Border(edges: .left, color: Theme.shared.alternateStoneBorderColor))
        }

        self.addBorder(borders)
    }

This produces the same result as my first code snippet but is way more readable I guess. I am happy with the result now. However if someone has a better solution for me I'd love to improve the code :)