Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Offset 2D-Matrix: equal spacing in pattern

Let’s first take a look at the Screenshot:
screenshot

My problem:

I just cannot figure out how to change the spacing between the horizontal lines. This spacing is a little bit too wide, as you can see compared to the vertical lines.

This is how I implemented the pattern of 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
}

Thanks for any help!
SwiftHobby

Tags:

2

Answers


  1. 0

    I think one thing you have to consider is that because you are offsetting the rows every even row, there is more space vertically because the peak height of your circles matches up with the intersection of circles above it. So what I would do is subtract some number to the btnSize before you multiply it by y. This should tighten the y-spacing.

    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
}

    This way the y-spacing is closer than the x-spacing, accounting for the mismatch I was talking about earlier. You need to experiment with the y-spacing to get the visual difference you want, so my correction above might be weird looking as well.

    Login or Signup to reply.
  2. 0

    maybe you want this effect:
    enter image description here

    I use your code and make some changes, and use a Array to cache all buttons’s frame like blow:

    
// 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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search