Card War: Creating the User Interface

Topics Covered in This iOS Development Tutorial:

Master the fundamentals of iOS interface design by importing image assets, creating interactive card-drawing buttons, implementing dynamic score tracking labels, applying Auto Layout constraints for responsive design, adding game restart functionality, and integrating background imagery for professional app presentation.

Exercise Preview

Exercise Overview

Build a compelling iOS card game by creating a simplified version of the classic two-player War game. This hands-on exercise teaches essential iOS development skills including asset management, UI component integration, and constraint-based layout design. You'll gain practical experience with Xcode's Interface Builder while creating an engaging user interface that demonstrates professional mobile app development principles.

By completing this tutorial, you'll understand how to structure a game interface, manage visual assets efficiently, and implement responsive design patterns that work across different iOS devices. These foundational skills are essential for any serious iOS developer in 2026's competitive app marketplace.

Getting Started

Let's establish your development environment and create the project foundation. Follow these steps to set up your Card War project with the optimal configuration for game development.

1. Launch Xcode if it isn't already open.

2. Go to File > New > Project or use the shortcut Cmd–Shift–N.

3. Under Application, double–click App to choose this basic starter template.

4. Configure your project with these essential settings:
   • Product Name: Card War
   • Team: None (do not change)
   • Organization Name: Your Name
   • Organization Identifier: com. YourName
   • Interface: Storyboard
   • Language: Swift
   • Make sure both options at the bottom (Use Core Data and Include Tests) are unchecked. We do not need these features for this tutorial.

5. Click Next.

6. You'll now be asked where you want to save the project. Navigate into the Desktop > Class Files > yourname-iOS App Dev 1 Class folder.

7. We don't need to track changes we make over time, so uncheck Create Git repository on My Mac if it is not already unchecked.

8. Click Create to finish specifying the location of the new Xcode project.

9. In the summary of general information about your app that appears, find the Deployment Info heading.

10. Under Device Orientation, uncheck Portrait. We only want this app to support landscape orientation, which provides optimal card game viewing experience.

11. While we could leave both Landscape Left and Right checked, let's make things simpler for us. Uncheck Landscape Right, so Landscape Left is the only orientation this app supports.

Importing the Images

Professional iOS apps require carefully managed visual assets. We'll import a complete set of card images, including individual card faces, card backs, and background elements that will give our game a polished, commercial appearance.

1. In the Project navigator, click on Assets.

2. Switch to the Desktop and navigate to Class Files > yourname-iOS App Dev 1 Class > Card War Images.

3. Press Cmd–A to select them all.

4. With Xcode still visible, drag the selected images to either column in the Editor. Xcode will automatically optimize these assets for different device resolutions.

Setting up Our User Interface

Now we'll configure the interface foundation and establish the visual framework for our card game. Proper setup at this stage ensures smooth development and professional results.

1. In the Project navigator's list of files, click on Main.

2. The UI we're going to create will be Landscape orientation, so click its button .

3. If the Document Outline is not showing to the left of the Project navigator, go to the bottom left of the Editor area and click the Show Document Outline button .

4. In the Document Outline, expand both View Controller Scene and View Controller if they aren't already.

5. We're going to add multiple UI elements to our View, so let's establish clear organization from the start. Select the View and press Return so we can rename it.

6. Name it superView and press Return.

   NOTE: Just like the super keyword we've used in previous exercises, the word super refers to inheritance. This view will contain multiple child objects, hence the descriptive name that will help us maintain clean code organization.

7. We'll add a background image once we've created the rest of our design. For now, let's choose a color that is similar to the image we are going to use. In the list of inspectors on the right, make sure you are in the Attributes inspector .

8. In the Attributes inspector next to Background, click once on the bar.

9. In the Colors panel that appears, make sure you are in the Color Palettes (the third button), and the palette menu below the buttons says Crayons.

10. Choose Clover and close the panel. This green tone will complement our card game aesthetic.

Adding the Button That Draws the Cards

The card-drawing button serves as the primary interaction point for our game. We'll configure it to display the card back image and implement proper constraints for consistent appearance across all iOS devices.

1. The first element we're going to add is a button that we will use to draw the cards. In the bottom search field, type button to filter the list.

2. Drag the Button to the view, dropping it on the left-hand side of the screen and horizontally centering it. This is around where we'll eventually position it using constraints, so don't worry about getting the placement exact.

3. In the Attributes inspector just below Title, delete the Button text.

4. Instead, we want this button to look like the back side of our deck of cards. Next to Image type: Card-Back

5. Press Return to apply the image.

   The initial size appears oversized! To achieve professional proportions, let's apply strategic constraints that will maintain the card's authentic appearance.

6. In the Document Outline, hold the Control key and drag from Button to the superView just above it. As you drag, a blue line will appear showing you the connection you are creating. Once you release the mouse, you'll get a pop-up menu where you will select Center Horizontally in Safe Area.

   NOTE: Remember that if you have a two-button mouse (or an Apple Magic Mouse that behaves as such), either Right mouse button–drag or Control–drag will work.

7. Hold Control or the Right mouse button and drag up to the superView once more. This time, choose Center Vertically in Safe Area.

8. To set a proportional height on our card back button, repeat the process one more time, this time selecting Equal Heights.

9. At the bottom right, click the Update Frames button . We're getting closer to the desired appearance...

   To prevent the image from distorting to fit the current constraints, we need to tell Xcode to always display the card at the image's native aspect ratio. This ensures authentic card proportions that players expect.

10. To do so, we can assign a constraint to the card back object itself. Hold Control or the Right mouse button and drag Button to itself (by just dragging slightly along a horizontal line), and select Aspect Ratio from the pop-up.

11. Now that we've got our four constraints for position and size, let's specify the precise aspect ratio we need. On the top right, switch to the Size inspector .

12. In the Size inspector under Constraints, locate the 329:375 Ratio constraint, which should be listed first. Next to it, click the Edit button.

13. We want the ratio to match our card image dimensions exactly (in pixels). Our image is 329 X 488 px, so change Multiplier to 329:488.

14. To close the pop-up and apply the changes, click outside the pop-up or press Esc.

    TIP: If the image's aspect ratio didn't automatically change, Update Frames now. Remember to do so for the next few steps if you don't see changes once you have edited each constraint!

15. Next to the Equal Height constraint, click the Edit button.

16. To make the image 36% of the superView's height (optimal for gameplay visibility), change Multiplier to 0.36 and press Esc.

17. Now that we've achieved the perfect size, let's position the button strategically on the left-center area of the screen. Next to the Align Center X constraint, click the Edit button.

18. We want the center of the card to be positioned 24% of the way between the left edge and the center of the superView. To change the alignment to a factor of 0.24, change Multiplier to 0.24 and press Esc.

    NOTE: The default factor of 1 centers the image. Values smaller than that position it further to the left, and larger values push it rightward.

19. Next to the Align Center Y constraint, click the Edit button.

20. To position it slightly lower on-screen for better visual balance, change Multiplier to 1.1 and press Esc.

    Excellent! Our card back button now displays with professional proportions and positioning that will look great on all iOS devices.

Labeling the Deck & Each Player's Score

Clear, intuitive labeling is crucial for user experience in game development. We'll create informative labels that guide user interaction and provide real-time score tracking. This approach demonstrates professional UI/UX principles that enhance player engagement.

To create an optimal user experience, we want to place a descriptive label above the button that clearly communicates its function to users. Additionally, we need dynamic labels that will track each player's score throughout the game. Let's style our first label comprehensively, then duplicate and customize it for efficiency.

1. In the bottom right Objects filter, type: label

2. Drag Label to the view, dropping it once it's vertically centered above the card back button. Exact positioning doesn't matter yet—we'll handle precision with constraints.

3. Let's configure several visual properties to make this label professional and readable. On the top right, switch back to the Attributes inspector tab .

4. Next to Color, click once on the word Default and select White Color.

5. Next to Font click the button and set the following typography specifications:

   Font:	To select a different font, choose Custom
   Family:	Palatino
   Style:	Bold
   Size:	Keep it at 17

6. Click Done.

7. Next to Alignment, click the Center Align button .

8. To enhance readability against the green background, let's add a subtle shadow effect. Next to Shadow, click once on the word Default and select Black Color.

9. Change both Shadow Offset values (both the Width and Height) to 1 for a professional drop shadow effect.

10. In the Editor, resize the label to display all the Label text properly, repositioning it if needed.

11. With the label selected, hold down the Option key and drag a copy above and to the right of the original label, approximately as shown:

    

12. Once again, hold down Option and drag off another copy, positioning it directly to the right of the first copy, with appropriate spacing between them as shown:

    

13. Select the original Label, and change its text using one of these methods:

    • In the Attributes inspector just below Text, replace the Label text with Deck and press Return.
    • In the Editor, double–click on the Label text to make the entire text editable (highlighted in blue). Replace the Label text with Deck and press Return.

14. Near the top of the user interface, select the left duplicate Label. Use one of the methods above to change the text to Player 1 Score: (including the colon for clarity!).

    If you can no longer see all the text, drag out the text box's right resize handle.

15. With the Player 1 Score label still selected, go to the Attributes inspector, click the button, and adjust these typography settings:

    Style:	Roman or Regular
    Size:	Reduce it to 16 for optimal hierarchy

    Click Done.

16. Change the Alignment by clicking the Left Align button .

17. Select the right duplicate Label and change its text to 0 (the number zero). This represents Player 1's initial score before any cards have been drawn.

18. This score information is crucial for gameplay, so let's make it more prominent. Directly to the right of the button, notice the menu arrows . Click the up arrow once to change the font size to 18.

19. With the 0 label still selected, hold the Command key and click on the Player 1 Score label. Both objects should now be selected.

20. Hold Option and drag a set of copies directly down, dropping them near the bottom of the screen for Player 2's scoring area. Release the mouse when the blue guides indicate that the duplicates are properly aligned with the originals, similar to the following image:

    

21. Near the bottom of the screen, select the duplicate Player 1 Score: label and change it to read: Player 2 Score:

Adding Constraints to Our Labels

Auto Layout constraints ensure our interface adapts perfectly to different screen sizes and orientations. Since label dimensions are determined by their font characteristics, each label requires only two strategic constraints for optimal positioning and responsive behavior.

1. We can also set constraints by dragging UI elements directly in the Editor interface. In the Editor, select the Deck label so we can establish constraints in reference to the card back button.

2. Hold Control or the Right mouse button and drag from the Deck label down to the card back button, as shown:

   

3. Choose Center Horizontally to align the label perfectly with the button.

4. Hold Control or the Right mouse button and drag once more from the Deck label down to the card back button. Choose Vertical Spacing to establish professional spacing between the text and the top of the card back.

5. Let's customize the spacing for optimal visual hierarchy! On the top right, switch to the Size inspector .

6. Next to the Bottom Space constraint, click the Edit button.

7. To make the distance between the text and the button proportional rather than fixed (which ensures better responsiveness), change the following:

   • To the right of Constant, notice the number. Delete whatever number you have and replace it with 0.
   • Change the Multiplier to 0.25 to create spacing that's 25% of the button's height.

8. Press Esc to apply these changes.

9. Now let's constrain the Player 1 score labels with precision. Select the Player 1 Score: label and hold Control or Right mouse button while dragging to the superView. Choose Leading Space to Safe Area to anchor it to the left side.

10. Hold Control or Right mouse button and drag from the same label to the superView again. This time choose Top Space to Safe Area.

11. Let's fine-tune these positioning constraints. In the Size inspector, next to the Leading Space constraint, click Edit.

12. Change the Constant to 50 to provide adequate margin from the screen edge, then press Esc.

13. Next to the Top Space constraint, click Edit.

14. Change the Constant to 30 for proper top margin, then press Esc.

15. Select the Player 1 score 0 label. Hold Control or Right mouse button and drag to the Player 1 Score: label, choosing Horizontal Spacing.

16. Hold Control or Right mouse button and drag from the 0 label to the Player 1 Score: label again, this time choosing Baseline to align them perfectly.

17. Now for Player 2's labels. Select the Player 2 Score: label and constrain it to the superView by dragging while holding Control or Right mouse button. Choose Leading Space to Safe Area.

18. Drag from the same label to the superView again and choose Bottom Space to Safe Area.

19. In the Size inspector, edit both constraints: set Leading Space to 50 and Bottom Space to 30.

20. Finally, select Player 2's score 0 label. Create Horizontal Spacing and Baseline constraints with the Player 2 Score: label, just as we did for Player 1.

21. Click Update Frames to see all your constraints in action.

Adding a Button to Restart the Game & Constraining It

Professional games require intuitive restart functionality. We'll implement a clearly labeled restart button that allows players to begin new games seamlessly, positioned strategically for optimal user experience.

1. In the bottom search field, type button and drag another Button to the upper-right area of the view.

2. In the Attributes inspector, change the button's Title from Button to Restart Game.

3. Set the Text Color to White Color for visibility against our background.

4. Configure the font by clicking the button and setting: Custom font, Palatino family, Bold style, size 16.

5. Add a text shadow for readability: set Shadow to Black Color with both offset values at 1.

6. Now let's position this button precisely. Hold Control and drag from the restart button to the superView, choosing Trailing Space to Safe Area.

7. Drag to the superView again and choose Top Space to Safe Area.

8. In the Size inspector, edit the Trailing Space to 50 and Top Space to 30 for consistent margins.

Adding & Constraining the Background Image

A compelling background image transforms a functional interface into an immersive gaming experience. We'll implement the background as the final layer, ensuring it enhances rather than distracts from gameplay elements.

1. Search for image in the Objects library and drag an Image View to your interface.

2. In the Attributes inspector, set the Image to your background image file (this should be included in your Card War Images folder).

3. Set the Content Mode to Aspect Fill to ensure the background covers the entire screen properly.

4. In the Document Outline, drag the Image View to the top of the hierarchy, just below superView. This ensures it appears behind all other interface elements.

5. Constrain the image view to fill the entire superView by adding constraints for all four edges: Leading, Trailing, Top, and Bottom Space to Safe Area, all with 0 constant values.

6. Click Update Frames to see your completed interface with professional background imagery.

Congratulations! You've successfully created a professional iOS card game interface that demonstrates essential development skills including asset management, Auto Layout constraints, and user experience design principles. Your Card War game now has a solid foundation for implementing game logic and interactive functionality in future development phases.