偏移二维矩阵：图案中的等间距答案

【问题标题】：Offset 2D-Matrix: equal spacing in pattern偏移二维矩阵：图案中的等间距
【发布时间】：2020-10-17 21:52:51
【问题描述】：

我们先来看看截图：

我的问题：

我只是不知道如何更改水平线之间的间距。与垂直线相比，这个间距有点太宽了。

这就是我实现 UIButtons 模式的方式：

func buildBoard(){
        for i in 0...8{
            for j in 0...8{
                rowBtnArr.append(setupBtn(x: i, y: j))
            }
        }
}

func setupBtn( x: Int, y: Int)->UIButton{
        let btnSize = Int(UIScreen.main.bounds.width / 10) //40
        let buffer = 1
        if(y%2==0){ //even lines: normal
            button = UIButton(frame: CGRect(x: x*btnSize, y: y*btnSize, width: btnSize-buffer, height: btnSize-buffer))
        }else{ //odd lines: shift by 1/2 button width
            button = UIButton(frame: CGRect(x: x*btnSize+(btnSize/2), y: y*btnSize, width: btnSize-buffer, height: btnSize-buffer))
        }
        button.layer.cornerRadius = 0.5 * button.bounds.size.width
        //unimportant color and target lines are left out
        return button
}

感谢您的帮助！快速爱好

【问题讨论】：

标签： ios arrays swift xcode

【解决方案1】：

我认为您必须考虑的一件事是，由于您每偶数行偏移行，因此垂直空间更大，因为您的圆圈的峰值高度与其上方圆圈的交点相匹配。所以我要做的是在将 btnSize 乘以 y 之前减去一些数字。这应该会收紧 y 间距。

func setupBtn( x: Int, y: Int)->UIButton{
        let btnSize = Int(UIScreen.main.bounds.width / 10) //40
        let buffer = 1
        if(y%2==0){ //even lines: normal
            button = UIButton(frame: CGRect(x: x*btnSize, y: y*(btnSize-1), width: btnSize-buffer, height: btnSize-buffer))
        }else{ //odd lines: shift by 1/2 button width
            button = UIButton(frame: CGRect(x: x*btnSize+(btnSize/2), y: y*(btnSize-1), width: btnSize-buffer, height: btnSize-buffer))
        }
        button.layer.cornerRadius = 0.5 * button.bounds.size.width
        //unimportant color and target lines are left out
        return button
}

这样，y-spacing 比 x-spacing 更接近，这是我之前谈到的不匹配的原因。您需要尝试 y 间距以获得所需的视觉差异，所以我上面的修正可能看起来也很奇怪。

【讨论】：

【解决方案2】：

也许你想要这个效果：

我使用您的代码并进行了一些更改，并使用一个数组来缓存所有按钮的框架，例如：


// user a Array to cache all frames
lazy var framesMatrix: [[CGRect]] = Array(repeating: Array(repeating: CGRect.zero, count: 9), count: 9)


func setupBtn( x: Int, y: Int)->UIButton{
    
    let btnCount = 10
    let buffer: CGFloat = 1
    let btnSize = (UIScreen.main.bounds.width - CGFloat(btnCount - 1) * buffer) / CGFloat(btnCount)
    var button: UIButton = UIButton()
    
    if y % 2 == 0 {
        if y == 0 {
            let frame = CGRect(x: CGFloat(x)*(btnSize+buffer), y: CGFloat(y)*btnSize, width: btnSize, height: btnSize)
            framesMatrix[x][y] = frame
            button = UIButton(frame: frame)
        } else {
            let lastFrame = framesMatrix[x][y-1]
            // Here is the change
            let newCenterY = lastFrame.midY + sqrt(3.0) * 0.5 * (btnSize+buffer);

            let frame = CGRect(x: lastFrame.minX - btnSize * 0.5 , y: newCenterY - btnSize * 0.5, width: btnSize, height: btnSize);
            framesMatrix[x][y] = frame
            button = UIButton(frame: frame)
        }
        
    } else {
        let lastFrame = framesMatrix[x][y-1]
         
        // Here is the change
        let newCenterY = lastFrame.midY + sqrt(3.0) * 0.5 * (btnSize+buffer);
        
        let frame = CGRect(x: lastFrame.midX + buffer * 0.5, y: newCenterY - btnSize * 0.5 , width: btnSize, height: btnSize);
        framesMatrix[x][y] = frame
        button = UIButton(frame: frame)
        
    }
    button.layer.cornerRadius = 0.5 * button.bounds.size.width
    button.backgroundColor = UIColor.black
    //unimportant color and target lines are left out
    return button
}

【讨论】：