Five Steps to Create a Chess App 2/5
Step 2: adding a view onto screen in Main.storyboard
In step 1 we created the empty Chess app without changing anything Xcode provided us. In this step we’ll add a view onto the white “screen”, which is actually another view.
Click “Main.storyboard” on the left navigation panel. Then from the right bottom, change the template to “View as: iPad Pro 9.7”.
Let’s change to background color to yellow. Click the top right icon to show right panel if it was hidden.
Select a yellow color in field “Background”. Then click the “+” button on the top right to find a view in system library.
When the “Objects” dialog pops up, scroll down to find “View”. Drag and drop it onto our yellow view, or the canvas.
We get a white rectangle, the view on which we’re gonna draw our chess board eventually. Since chess board has 8x8 squares, let’s configure its width and height to 640x640 to make our life a little easier, with each square 80x80 in size. Click the ruler icon near the top right corner.
It shows the current geometry data of our white little rectangle, i.e. the top left anchor coordinates are (264, 448) and width 240, height 128.
We can type in 640 for in both “Width” and “Height” fields. Then drag it back to the center of the yellow screen, roughly.
Run the app to check on iPad simulator.
