1
\$\begingroup\$

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:

Grid

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.

\$\endgroup\$
  • \$\begingroup\$ I would probably use a CollectionView. \$\endgroup\$ – shallowThought Apr 27 '17 at 12:55
  • \$\begingroup\$ Of course I'd get some benefits with using a collectionview like reusable cells, but how would it help me with drawing the borders correctly so I can replicate the screenshot from above without having to place multiple if conditions in my cellForRowAtIndexPath delegate method ? \$\endgroup\$ – dehlen Apr 27 '17 at 13:13
  • \$\begingroup\$ I see. Got you wrong, sorry. \$\endgroup\$ – shallowThought Apr 27 '17 at 14:32
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.