In this article, I am going to share SwiftUI code for creating a chess board using a Nested loop. To achieve this task, we are going to use the nested ForEach
loop.
If you already played chess, then you definitely know that in each row and column, the total number of cells is 8. So let’s create a variable countCell
and assign the integer 8 that reflects the number of cells in a row:
let countCell = 8
Now start a VStack with the spacing amount 2:
VStack(spacing:2) {
}
Inside our VStack, let’s use the ForEach loop and use HStack inside it:
VStack(spacing:2) {
ForEach(1...countCell, id:\.self) { row in
HStack(spacing:2) {
}
}
}
Now let’s use the nested ForEach
loop and inside it use all the necessary code to create our chessboard cell:
VStack(spacing:2) {
ForEach(1...countCell, id:\.self) { row in
HStack(spacing:2) {
ForEach(1...countCell, id:\.self) { cell in
ZStack {
Rectangle()
.fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
.frame(width: 38, height: 38)
}
}
}
}
}
You can see that, we have used nested ForEach loop inside HStack and in that loop we created ZStack. We are using Rectangle
to create rectangle size cells. The loops we created generated 8×8 cells just like we can see it in a real chessboard.
We are checking if the order of the cell is even or odd and depending on this we set the color of the cell:
Rectangle()
.fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
.frame(width: 38, height: 38)
Below is given the complete and final code of the Swift file to create the chess board:
import SwiftUI
struct ContentView: View {
var body: some View {
let countCell = 8
VStack(spacing:2) {
ForEach(1...countCell, id:\.self) { row in
HStack(spacing:2) {
ForEach(1...countCell, id:\.self) { cell in
ZStack {
Rectangle()
.fill(((row+cell)%2 == 0) ? Color(#colorLiteral(red: 0.9686, green: 0.9059, blue: 0.7922, alpha: 1)) : Color(#colorLiteral(red: 0.3373, green: 0.3294, blue: 0.2784, alpha: 1)))
.frame(width: 38, height: 38)
}
}
}
}
}
}
}
Below is how the chessboard will look on an iOS device or on emulator: