Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitfd96966

Browse files
committed
Init CS193p
1 parente60dda0 commitfd96966

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+601
-0
lines changed

‎CS193p/CS193p-Lec1-2.md‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
###CS193p Lec1-2
2+
3+
####Lecture 1: Getting started with SwiftUI
4+
5+
* All parts of Xcode stay connected
6+
7+
![1.jpg](./images/1.jpg)
8+
9+
* Meaning of the keyword "some" in "some View" declared in ContentView.swift:
10+
11+
The type of this body is something that behaves like a View.
12+
13+
Swift is a functional programming language, so the variable "body" is not in memory, it's calculated by complier through the function right after "some View".
14+
15+
* Preview
16+
17+
Preview is a real time generated window, displaying our code into real UI.
18+
19+
Option+Command+Enter calls the window from Xcode.
20+
21+
Get it with these lines of code:
22+
23+
```swift
24+
structContentView_Previews:PreviewProvider{
25+
staticvar previews:some View {
26+
ContentView()
27+
}
28+
}
29+
```
30+
31+
* ZStack and HStack
32+
33+
ZStack: A view that overlays its children, aligning them in both axes.
34+
35+
HStack: A view that arranges its children in a horizontal line.
36+
37+
38+
39+
####Lecture 2: Learning more about SwiftUI
40+
41+
* Draw a simple card view with round rectangles and text, then organize them using ZStack
42+
43+
```swift
44+
structContentView:View{
45+
var body:some View {
46+
ZStack {
47+
RoundedRectangle(cornerRadius:20.0)
48+
.stroke(lineWidth:3.0)
49+
.foregroundColor(.red)
50+
RoundedRectangle(cornerRadius:20.0)
51+
.stroke(lineWidth:3.0)
52+
.foregroundColor(.red)
53+
Text("Hello!")
54+
.font(.largeTitle)
55+
}
56+
}
57+
}
58+
```
59+
60+
* Usingstructto build more rectangles
61+
62+
In SwiftUI, we wrap a customized view through struct, not function.
63+
64+
```swift
65+
struct ContentView:View{
66+
var body:some View {
67+
HStack {
68+
CardView()
69+
CardView()
70+
CardView()
71+
}
72+
}
73+
}
74+
75+
structCardView:View{
76+
var body:some View {
77+
ZStack {
78+
RoundedRectangle(cornerRadius:20.0)
79+
.stroke(lineWidth:3.0)
80+
.foregroundColor(.red)
81+
RoundedRectangle(cornerRadius:20.0)
82+
.stroke(lineWidth:3.0)
83+
.foregroundColor(.red)
84+
Text("Hello!")
85+
.font(.largeTitle)
86+
}
87+
}
88+
}
89+
```
90+
91+
* ThestructCardView can be written in a more elegant way:
92+
93+
```swift
94+
struct CardView:View{
95+
var body:some View {
96+
let shape: RoundedRectangle=RoundedRectangle(cornerRadius:20.0)
97+
ZStack {
98+
shape.stroke(lineWidth:3.0).foregroundColor(.red)
99+
shape.stroke(lineWidth:3.0).foregroundColor(.red)
100+
Text("Hello!").font(.largeTitle)
101+
}
102+
}
103+
}
104+
```
105+
106+
The variable"shape" can not be declaredasvar, because"shape" doesn't change.
107+
108+
If you insist, complier gives a warning: Variable 'shape' was never mutated; consider changing to 'let' constant.
109+
110+
* Declare a variable:
111+
112+
Apparently, the first declarationis most used.
113+
114+
```swift
115+
var isFaceUp:Bool=false
116+
117+
var isFaceUp:Bool= {
118+
returnfalse
119+
}
120+
121+
var isFaceUp:Bool {
122+
false
123+
}
124+
```
125+
126+
* Using"isFaceUp" to decide whether the CardViewis upside or downside:
127+
128+
```swift
129+
structContentView:View{
130+
var body:some View {
131+
HStack {
132+
CardView(isFaceUp:true)
133+
CardView(isFaceUp:false)
134+
CardView(isFaceUp:false)
135+
}
136+
.foregroundColor(.red)
137+
.padding(.horizontal)
138+
}
139+
}
140+
141+
structCardView:View{
142+
var isFaceUp:Bool=false
143+
144+
var body:some View {
145+
let shape: RoundedRectangle=RoundedRectangle(cornerRadius:20.0)
146+
ZStack {
147+
if isFaceUp {
148+
shape.fill().foregroundColor(.white)
149+
shape.stroke(lineWidth:3.0)
150+
Text("Hello!").font(.largeTitle)
151+
}else {
152+
shape.fill()
153+
}
154+
}
155+
.onTapGesture {
156+
isFaceUp=!isFaceUp/// Error: Cannot assign to property: 'self' is immutable
157+
}
158+
}
159+
}
160+
```
161+
162+
We use onTapGesture on ZStack to change the variable"isFaceUp" when a tap gestureis detected.
163+
164+
But complier generates this error: Cannot assign to property: 'self'is immutable.
165+
166+
Thisis related to SwiftUI's UI logic:
167+
168+
*in"CardView",selfis pointed at the CardView itself
169+
* variable"isFaceUp"is immutable and soisany Viewin SwiftUI
170+
* SwiftUIdo not update it's UI, but rebuild it. And thisdo not infect performance, which making SwiftUI great.
171+
172+
So howdo we change"isFaceUp" here:
173+
174+
* using@State, this turns stack variable"isFaceUp" into a pointer variable which pointing to some Boolean memory.
175+
176+
It won't be used too much frequently.
177+
178+
```swift
179+
@Statevar isFaceUp:Bool=false
180+
```
181+
182+
* Now that"isFaceUp" has been designedas ainternal variableof CardView, we declare another variable"content":
183+
184+
```swift
185+
/// what CardView displays
186+
var content:String
187+
```
188+
189+
We can use ForEach to make logic more clear and maintainable:
190+
191+
```swift
192+
structContentView:View{
193+
var emojis:Array<String>= ["🚚","🛵","✈️","🚀","🚌",
194+
"🚗","🚕","🚙","🚲","🏍",
195+
"⛴","🚢","⛽️","🚤","🛥",
196+
"🚝","🛸","🚄","🚅","🚂",
197+
]
198+
var emojiCount:Int=4
199+
200+
var body:some View {
201+
HStack {
202+
ForEach(emojis[0..<emojiCount],id: \.self) { emojiin
203+
CardView(content: emoji)
204+
}
205+
}
206+
.foregroundColor(.red)
207+
.padding(.horizontal)
208+
}
209+
}
210+
```
211+
212+
ForEach's parameter"id"is used to identifyeach itemin the loop, telling SwiftUI thateach valuein the arrayis unique, even though the syntax looks a little odd.
213+
214+
We can also use variable"emojiCount" to decide how many emojis are needed to be renderedas CardView.
215+
216+
*1..<5
217+
218+
means:1,2,3,4
219+
220+
*1...5
221+
222+
Means:1,2,3,4,5
223+
224+
* Using Buttons
225+
226+
Thisis the way to create a button.
227+
228+
```swift
229+
Button(action: {
230+
emojiCount+=1
231+
},label: {
232+
Text("Add Card")
233+
})
234+
```
235+
236+
Wrap the button with a variable, making our code structure more elegant.
237+
238+
Spacer()is used to encaptureany empty space between"add" and"remove".
239+
240+
```swift
241+
structContentView:View{
242+
var emojis:Array<String>= ["🚚","🛵","✈️","🚀","🚌",
243+
"🚗","🚕","🚙","🚲","🏍",
244+
"⛴","🚢","⛽️","🚤","🛥",
245+
"🚝","🛸","🚄","🚅","🚂",
246+
]
247+
@Statevar emojiCount:Int=4
248+
249+
var body:some View {
250+
VStack {
251+
HStack {
252+
ForEach(emojis[0..<emojiCount],id: \.self) { emojiin
253+
CardView(content: emoji)
254+
}
255+
}
256+
HStack {
257+
add
258+
Spacer()
259+
remove
260+
}
261+
.padding(.horizontal)
262+
}
263+
.foregroundColor(.red)
264+
.padding(.horizontal)
265+
}
266+
267+
var add:some View {
268+
Button(action: {
269+
emojiCount+=1
270+
},label: {
271+
Text("Add Card")
272+
})
273+
}
274+
275+
var remove:some View {
276+
Button(action: {
277+
emojiCount-=1
278+
},label: {
279+
Text("Remove Card")
280+
})
281+
}
282+
}
283+
```
284+
285+
* SF Symbols
286+
287+
With over3,100 symbols, SF Symbolsis a libraryof iconography designed to integrate seamlessly with San Francisco, the system fontfor Apple platforms.
288+
289+
Download at https://developer.apple.com/sf-symbols/
290+
291+
![2.jpg](./images/2.jpg)
292+
293+
Find the name and use it like this:
294+
295+
```swift
296+
Image(systemName:"plus.circle")
297+
```
298+
299+
* Using LazyVGrid
300+
301+
Understanding differences between VStack and LazyVGrid
302+
303+
* VStack uses all the space it can, including both directions: width and height
304+
* LazyVGrid uses all the width space horizontallyfor its columns
305+
306+
```swift
307+
LazyVGrid(columns: [GridItem(),GridItem(),GridItem(),GridItem()]) {
308+
ForEach(emojis[0..<emojiCount],id: \.self) { emojiin
309+
/// set aspectRatio to restrict CardView's width/height
310+
CardView(content: emoji).aspectRatio(2/3,contentMode: .fit)
311+
}
312+
}
313+
```
314+
315+
* Using ScrollView
316+
317+
Just wrap LazyVGrid using ScrollView to make it scrollable.
318+
319+
Thisis what we gotfor now:
320+
321+
![3.jpg](./images/3.jpg)

‎CS193p/CS193p-Lec13-16.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
###CS193p Lec13-16
2+
3+
####Lecture 13: Publisher More Persistence
4+
5+
* Publisher
6+
7+
![45.jpg](./images/45.jpg)
8+
9+
![46..jpg](./images/46.jpg)
10+
11+
12+
13+
####Lecture 14: Document Architecture
14+
15+
* App Architecture
16+
17+
![47.jpg](./images/47.jpg)
18+
19+
![48.jpg](./images/48.jpg)
20+
21+
![49.jpg](./images/49.jpg)
22+
23+
* Document Architecture
24+
25+
![50.jpg](./images/50.jpg)
26+

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp