swift - 如何在 swift 中将井字棋板绘制为 UIView？

Question

在我的 UIViewController 中，我有一个 UIView 的子类，我将在其中绘制一个井字棋盘。不知何故，我使用 UIBezierPath() 绘制的分隔线(“#”形状)没有均匀地划分电路板。垂直分隔线不是 1/3-1/3-1/3，而是更接近 45%-45%-10%，即使打印输出的尺寸有意义。我错过了什么？谢谢

在我的子类中:

import UIKit

@IBDesignable class GameBoardView: UIView {

    override func drawRect(rect: CGRect) {

        // set up gameBoard dimensions everytime drawRect() is called
        setUpGameBoardCells()
        self.frame = CGRectMake(gameBoardPosX, gameBoardPosY, gameBoardLength, gameBoardLength)
        print("gameBoard.frame: x=\(self.frame.origin.x), y=\(self.frame.origin.y), h=\(self.frame.height), w=\(self.frame.width)\n")

        // draw dividers & cells
        var divider = UIBezierPath(rect: CGRect(x: cellWidth, y: 0, width: dividerWidth, height: gameBoardLength))
        divider.lineWidth = 1
        UIColor.orangeColor().setStroke()
        divider.stroke()

        divider = UIBezierPath(rect: CGRect(x: cellWidth * 2 + dividerWidth, y: 0, width: dividerWidth, height: gameBoardLength))
        divider.stroke()
   }
}

这就是我设置尺寸以处理任何尺寸屏幕的方式:

var screenSize = CGRect()
let screenMargin: CGFloat = 20   // to the edge

var gameBoardIsPortrait = Bool()
var gameBoardLength = CGFloat()
var gameBoardPosX = CGFloat()
var gameBoardPosY = CGFloat()

let cellsPerRow: Int = 3
var cellWidth = CGFloat()
let dividerWidthGuide: CGFloat = 0.02   // guideline % of gameBoardLength
var dividerWidth = CGFloat()

let debugPrint = true

func setUpGameBoardCells() {

    screenSize = UIScreen.mainScreen().bounds

    // gameBoard is a square
    gameBoardIsPortrait = (screenSize.height >= screenSize.width ? true : false)
    gameBoardLength = min(screenSize.height, screenSize.width) - screenMargin * 2
    gameBoardPosX = (screenSize.width - gameBoardLength) / 2
    gameBoardPosY = (screenSize.height - gameBoardLength) / 2

    // want cells & dividers on gameBoard to be whole numbers
    dividerWidth = round(gameBoardLength * dividerWidthGuide)
    let cellsTotalWidth: Int = Int(gameBoardLength) - Int(dividerWidth) * (cellsPerRow - 1)
    let dividerWidthFudge: CGFloat = (cellsTotalWidth % cellsPerRow == 1 ? -1 : (cellsTotalWidth % cellsPerRow == 2 ? 1 : 0))
    dividerWidth += dividerWidthFudge
    cellWidth = CGFloat((cellsTotalWidth - Int(dividerWidthFudge) * (cellsPerRow - 1)) / cellsPerRow)

    if debugPrint {
        print("setUpCellDivision()->\nscreen: h=\(screenSize.height), w=\(screenSize.width)")
        print("gameBoardIsPortrait=\(gameBoardIsPortrait), gameBoardLength=\(gameBoardLength), gameBoardPosX=\(gameBoardPosX), gameBoardPosY=\(gameBoardPosY)")
        print("cellWidth=\(cellWidth), dividerWidth=\(dividerWidth)\n")
    }
}

奇怪的是，在 xcode 中它看起来是正确的:

但在模拟器中它看起来像这样:

Answer 1

问题是 drawRect 中 frame 的设置。如果您为 View 定义了任何自动布局约束，这将尤其成为一个问题。

View 的布局和 View 的绘制是两个不同的步骤，因此您应该将逻辑分开。

就个人而言，我会在 View 上设置自动布局约束，以确保它是方形的、居中的并且具有正确的间距。然后简化 View 渲染:

@IBDesignable class GameBoardView: UIView {

    override func drawRect(rect: CGRect) {
        setUpGameBoardCells()

        UIColor.orangeColor().setStroke()

        var divider = UIBezierPath(rect: CGRect(x: cellWidth, y: 0, width: dividerWidth, height: bounds.size.height))
        divider.lineWidth = 1
        divider.stroke()

        divider = UIBezierPath(rect: CGRect(x: cellWidth * 2 + dividerWidth, y: 0, width: dividerWidth, height: bounds.size.height))
        divider.lineWidth = 1
        divider.stroke()
    }

    let cellsPerRow = 3
    let dividerWidthGuide: CGFloat = 0.02   // guideline % of gameBoardLength

    var cellWidth: CGFloat!
    var cellHeight: CGFloat!
    var dividerWidth: CGFloat!

    func setUpGameBoardCells() {
        let gameBoardLength = min(bounds.size.height, bounds.size.width)
        dividerWidth = round(gameBoardLength * dividerWidthGuide)
        let cellsTotalWidth: Int = Int(gameBoardLength) - Int(dividerWidth) * (cellsPerRow - 1)
        let dividerWidthFudge: CGFloat = (cellsTotalWidth % cellsPerRow == 1 ? -1 : (cellsTotalWidth % cellsPerRow == 2 ? 1 : 0))
        dividerWidth! += dividerWidthFudge
        cellWidth = CGFloat((cellsTotalWidth - Int(dividerWidthFudge) * (cellsPerRow - 1)) / cellsPerRow)
    }

}

产生:

显然，也只需对水平分隔符重复即可。