You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+74-2Lines changed: 74 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -28,11 +28,11 @@ In this hackpack we will cover the basics of SwiftUI and create a simple iOS app
28
28
29
29
### Overview of Xcode
30
30
31
-
1. On the left side of the screen, you should see a file navigator. This is where you can view all of the files in your project and also create new files/folders. Above the folder tree, you should see a row of buttons that show you different properties of the project. For example, you can see all the breakpoints or monitor the memory usage of your app.
31
+
1. On the left side of the screen, you should see a file navigator. This is where you can view all of the files in your project and also create new files/folders. Above the folder tree, you should see a row of buttons that show you different properties of the project. For example, you can see all the breakpoints or monitor the memory usage of your app.
2. At the very top, you should see the current device Xcode would run your app on. You can click this to change the device.
35
+
2. At the very top, you should see the current device Xcode would run your app on. You can click this to change the device.
36
36
37
37
38
38
@@ -46,6 +46,78 @@ In this hackpack we will cover the basics of SwiftUI and create a simple iOS app
46
46
47
47
3. Let's go back to `ContentView.swift`. You'll notice that it's a struct that conforms to the `View` protocol. This means that it's a view. You can see the code for the view on the right side of the screen. The `body` property is a computed property that returns a `some View`. This means that the type of the view is unknown, but it conforms to the `View` protocol. The `some` keyword is used to hide the type of the view. You can read more about opaque return types [here](https://docs.swift.org/swift-book/LanguageGuide/OpaqueTypes.html).
48
48
49
+
```swift
50
+
importSwiftUI
51
+
52
+
structContentView: View {
53
+
var body: some View {
54
+
VStack {
55
+
Image(systemName: "globe")
56
+
.imageScale(.large)
57
+
.foregroundStyle(.tint)
58
+
Text("Hello, world!")
59
+
}
60
+
.padding()
61
+
}
62
+
}
63
+
64
+
#Preview {
65
+
ContentView()
66
+
}
67
+
```
68
+
69
+
4. Within the `body` property, you'll see a `VStack`. This is a view that stacks its children vertically. You can read more about it [here](https://developer.apple.com/documentation/swiftui/vstack). Within the `VStack`, you'll see an `Image` and a `Text`. These are both views. You can read more about `Image`[here](https://developer.apple.com/documentation/swiftui/image) and `Text`[here](https://developer.apple.com/documentation/swiftui/text). You'll also see a modifier called `padding`. This is a modifier that adds padding to the view. You can read more about it [here](<https://developer.apple.com/documentation/swiftui/view/padding(_:edges:)>).
70
+
71
+
5. A modifier is a method that returns a modified version of the view. You can chain multiple modifiers together to modify the view. For example, you can add a background color to the view by adding a modifier called `background` to the end of the view. You can read more about it [here](<https://developer.apple.com/documentation/swiftui/view/background(_:alignment:)>). The order of the modifiers matters. If you add the `background` modifier before the `padding` modifier, the background color will only be applied to the view itself, not the padding. If you add the `background` modifier after the `padding` modifier, the background color will be applied to the view and the padding.
72
+
73
+
```swift
74
+
importSwiftUI
75
+
76
+
structContentView: View {
77
+
var body: some View {
78
+
VStack {
79
+
Image(systemName: "globe")
80
+
.imageScale(.large)
81
+
.foregroundStyle(.tint)
82
+
Text("Hello, world!")
83
+
}
84
+
.padding()
85
+
.background(Color.red)
86
+
}
87
+
}
88
+
```
89
+
90
+
6. At the very bottom of the file, there's a `#Preview` struct (albeit with special syntax) that conforms to the `PreviewProvider` protocol. This struct is what creates the preview on the right side of the screen.
91
+
92
+
### Creating a New View
93
+
94
+
1. Let's add a new view to the project that creates a button. Right click on the folder tree and click "New File...". Select "Swift File" and click "Next". Enter "ButtonView.swift" as the file name and click "Create". You should see a new file called `ButtonView.swift` in the folder tree.
95
+
96
+
2. In `ButtonView.swift`, add the following code:
97
+
98
+
```swift
99
+
importSwiftUI
100
+
101
+
structButtonView: View {
102
+
var body: some View {
103
+
Button(action: {
104
+
print("Button tapped")
105
+
}, label: {
106
+
Text("Tap me!")
107
+
})
108
+
}
109
+
}
110
+
```
111
+
112
+
3. Go back to `ContentView.swift`. Add the following code to the `VStack`, under `Text`:
113
+
114
+
```swift
115
+
ButtonView()
116
+
```
117
+
118
+
4. Click the play button on the top left of the screen to run your app in the simulator. You should see a button that says "Tap me!". When you tap the button, you should see "Button tapped" printed in the console (which is at the bottom of the screen).
0 commit comments