Building Your First iOS App

Welcome back! 0:00 In this video, I'm going to show you my finished Dice 0:01 Roller app and walk you through how to build it. 0:04 As you can see, our app has a title at the top, Dice 0:07 Roller, four buttons for different dice, D6, D8, D12, and D20, 0:10 a text field at the bottom that displays messages , tap a button to start, 0:17 or you rolled a insert random number, depending on if a button was tapped. 0:21 Now let's break down how I built this app, 0:27 starting with the UI design. 0:29 Since I want my views to be stacked vertically, 0:32 I'll use a VStack to arrange our views. 0:35 First, I'll add a text view displaying Dice Roller, 0:38 then style it by giving it a font of .largeTitle. 0:41 To create space between the title and buttons, I'll add a spacer. 0:46 Next, let's add our 0:52 first button labeled Roll D6. 0:53 Since I wanna focus on the UI, I'll temporarily set the button's action 0:57 to print, here's a random number between 1:01 one and six. 1:05 Now let's dial our button. 1:09 I'll first set the font to title, 1:11 then I'll add some padding before setting the background color. 1:14 I'll color the background green. 1:19 Feel free to choose any color you . 1:22 Then I'll change the text color 1:26 to white for better readability. 1:28 Lastly I round the corners 1:32 using shape border 1:35 The rest of the buttons follow the same styling 1:40 so I copy and paste this button view three more times. 1:43 Now I'll update 1:54 each button's label, print statement, and background color 1:55 to match its corresponding dice type, D8, D12, and D20. 1:59 The buttons look too close together. 2:14 Instead of using spacer, which might add too much space, 2:17 I'll add a padding modifier to each button. 2:20 Awesome, this looks much better. 2:31 Now the buttons have breathing room while maintaining a clean layout. 2:33 Next, I'll add a spacer and one last text view at the bottom. 2:38 I'll style the text view with the .font modifier 2:44 and set the font to .title. 2:48 Before any button is tapped, 2:52 we want this text to display, Tap a button to start. 2:54 Then when a button is tapped, 2:59 the text should update to show the number rolled. 3:01 Since this text changes dynamically we use state to track it 3:05 At the top of our view let declare a state variable 3:10 using atState I name the state 3:14 resultText and set its initial value to the text 3:18 we want to display at the start, which is tap a button to start. 3:22 Since it's marked with atState, 3:27 SwiftUI will automatically update the UI whenever it changes. 3:29 Now let's use this date in our text view. 3:35 I'll scroll to the bottom and in the text, 3:38 I'll add result text. 3:41 I'm going to adjust my dynamic type so that all the texts fit in one line. 3:44 You don't have to do this. 3:49 Currently, tapping a button doesn't update the text yet. 3:51 Let's fix that. 3:54 Each button needs an action that, one, generates a random number, 3:56 and two, updates result text to display the role. 4:01 Let's start with the D6 button. 4:05 First, I'll remove the print statement. 4:08 Now we need to generate a random number. 4:11 Before I show you how to do this, pause the video and try 4:13 generating a random number between one and six using Swift. 4:16 Make sure to store the 4:21 result in a constant so that we can use it later. 4:22 Did you remember how to generate a random number? 4:26 If not, don't worry. Here's how we do it. 4:29 Let diceRoll equals int.random in 1 to 6. 4:32 Int.random tells Swift to pick a whole number between 1 and 6 4:37 We store the result in a constant called diceRoll 4:42 so that we can use it in our app now let update our state variable 4:46 to display the role using string interpolation 4:51 so text result equals 4:54 you rolled a backslash dice roll 4:57 let's make sure everything works now 5:03 tap roll d6 5:06 the text should update dynamically to display the role 5:08 Great. 5:13 Now pause the video and try writing the logic for the other buttons yourself. 5:14 Since the logic is the same for each button, 5:20 I'll copy the D6 button to action and paste it into the other buttons. 5:23 Make sure to update the range for each dice type. 5:28 and that's it 5:41 we now have a fully functional dice roller app 5:42 to sum it up we built our dice roller app by designing the ui with titles buttons 5:46 and dynamic text display using state to store and update text dynamically, 5:52 generating random numbers using Swift's built-in functions, 5:57 and updating the UI automatically when a button is tapped. 6:01 Thank you for joining me in the Swift and SwiftUI tour. 6:06 I hope you enjoy this project and feel inspired 6:10 to continue exploring Swift and SwiftUI. 6:13 If you have any questions or want to share your projects, feel free to reach out. 6:16 Until next time, happy coding! 6:20

You need to sign up for Treehouse in order to set up Workspace

Sign up