用小正方形填充视图

Question

好吧，这个真的让我头疼，但我相信比我聪明的人可以很容易地解决这个问题。我有一些变量可以计算一个视图中可以容纳多少个小方块。我想以编程的方式用特定顺序的小正方形填充这个视图。我想把这个动画化，改变颜色和所有其他东西，但我真正想做的是把这些方块按正确的顺序排列。我将尝试说明添加这些视图的顺序。我希望一切顺利。

---

|1|3|6|11|18|

|4|2|8|13|20|

|7 | 9 | 5 | 15 | 22|

|12 | 14 | 16 | 10 | 24|

|19 | 21 | 23 | 25 | 17|

或者另一种很酷的方式是：

---

|1|3|8|15|24|

|4|2|6|13|22|

|9 | 7 | 5 | 11 | 20|

|16 | 14 | 12 | 10 | 18|

|25 | 23 | 21 | 19 | 17|

好吧，如果你看不到图案，它从左上角开始。它在1上移动，在1下移动，然后填充其上方和左侧的单元格，从外部顶部和左侧开始，然后向内移动。

这是我迄今为止的代码：

let numberOfColumns: CGFloat = 10
let w = self.view.frame.width
let h = self.view.frame.height
let squareSideLength = w / numberOfColumns
let numberOfRows = h / squareSideLength
let area = numberOfColumns * numberOfRows
let areaInt = Int(ceil(area))

for i in 1...areaInt {
self.square.frame = CGRect(x: , y: , width: squareSideLength, height: squareSideLength)
self.view.addSubview(square)
}

我不知道如何做"for"循环或循环来以这种疯狂的顺序填充它。我真的希望有人能弄清楚！

Answer 1

试试这个！这是一个完整的视图控制器(示例)，它：

• 创建一个数字的最大矩阵
• 按数字顺序为单元格的颜色变化设置动画

希望这能让你更接近你想要的！

import UIKit
class viewController: UIViewController {
let numberOfRows = 10                   //numberOfRows and columns to you can change as needed
let numberOfColumns = 10
var currentNumber = 1                   //set the first value in the table, can start anywhere
typealias Position = (Int, Int)
var currentPostion = (0,0)              //start at 0,0 in the grid
var rows = [[Int?]]()                   //rows will hold an array of columns (which is also an array)
var boxes = [UIView]()
var boxTracker = 0
var timer = NSTimer()
override func viewDidLoad() {
super.viewDidLoad()
populateMatrix()                     //create the row/column matrix

timer = NSTimer.scheduledTimerWithTimeInterval(0.05, target: self, selector: #selector(self.timerTicked), userInfo: nil, repeats: true)
}
func timerTicked() {
UIView.animateWithDuration(1.0) {
self.boxes[self.boxTracker].backgroundColor = UIColor.yellowColor()
}
boxTracker += 1
if boxTracker >= boxes.count {
timer.invalidate()
}
}
func populateMatrix() {
rows = createEmptyMatrix()
while currentPostion < (numberOfRows, numberOfColumns) {
if valueAtPosition(currentPostion) == nil {         //check the current position
setValueAtPosition(currentPostion, value: currentNumber)  //if it's nil, assign it the next number and increment it
currentNumber += 1
}
let positionNumber = currentPostion.0
for pos in (0..<positionNumber).reverse() {   //look up from the current postion and fill it in if it's nil
let upPosition = (pos, currentPostion.1)
if valueAtPosition(upPosition) == nil {
setValueAtPosition(upPosition, value: currentNumber)
currentNumber += 1
}
let leftPosition = (currentPostion.1, pos)   //look left from the current position and fill it in if it's nil
if valueAtPosition(leftPosition) == nil {
setValueAtPosition(leftPosition, value: currentNumber)
currentNumber += 1
}
}
currentPostion = (currentPostion.0 + 1, currentPostion.1 + 1)   //move diagonally 1 postion and start over again!
}
}
func createEmptyMatrix() -> [[Int?]] {
var viewMatrix = [[Int?]]()
for _ in 0..<numberOfRows {
let newColumn = [Int?](count:numberOfColumns, repeatedValue: nil)    //create a column array of nil values and add them to rows
viewMatrix.append(newColumn)
}
return viewMatrix
}
func valueAtPosition(position: Position) -> Int? {
return rows[position.0][position.1]
}
func setValueAtPosition(position: Position, value: Int) {
rows[position.0][position.1] = value
drawBoxForPosition(position)
}
func drawBoxForPosition(position: Position) {
let row = CGFloat(position.0)
let column = CGFloat(position.1)
let itemWidth = self.view.bounds.width / CGFloat(numberOfColumns)
let itemHeight = self.view.bounds.height / CGFloat(numberOfRows)
let frame = CGRectMake(row * itemWidth, column * itemHeight, itemWidth, itemHeight)
let boxView = UIView(frame: frame)
boxView.layer.borderColor = UIColor.blackColor().CGColor
boxView.layer.borderWidth = 0.5
boxView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(boxView)
let label = UILabel(frame: boxView.bounds)
label.text = String(valueAtPosition(position)!)
label.textAlignment = .Center
boxView.addSubview(label)
boxes.append(boxView)
}
}