-
Review of Build a Basic UI - Food TrackeriOS/๐ค App 2021. 1. 18. 17:01
์ฌ์ํ๋๋ผ๋ ์๋ก ์๊ฒ ๋ ์ ์ ์ ๊ณ , ๋ณต์ต ์ฐจ์์์ ์ค์ํ ์ ์ ๋์ง์ด ๋ณด๊ณ ์ถ์์ต๋๋ค.
ํนํ ์ฉ์ด๋ค๊ณผ ๊ทธ ์ฉ์ด๋ค์ ๋ํ ๊ฐ๋ ์ ๋์น์ง ์๊ณ ์ถ์ต๋๋ค.
๊ณต์ ๋ฌธ์์์ ์ฌ์ฉํ๋ ์ฉ์ด๋ฅผ ์๋ ๊ฒ์ ์ํต์ ์์ด์ ์์ฃผ์์ฃผ critical ํ factor๋ผ๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์ ๋๋ค.
Project navigator
Navigator selector bar ์ค์ ๊ฐ์ฅ ์ผ์ชฝ์ ์์นํ navigator๋ก ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ๋ ํ์ผ ์ ์ฒด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
The App Delegate Source File
#์ฑ ์ํ๋ณํ ์ฒ๋ฆฌ #์ฑ ๋ ๋ฒจ ์ด๋ฒคํธ ์ฒ๋ฆฌ #์ฑ ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ
`system`์ด๋ผ๋ ์ฉ์ด๊ฐ ๋ฑ์ฅํฉ๋๋ค.
์ฑ์ ๊ตฌ๋ํ๋ OS ๋ผ๊ณ ์๊ฐํ๊ณ ๊ธ์ ์์ฑํ์์ต๋๋ค.
AppDelegate.swift ํ์ผ์ ๋ ๊ฐ์ง ์ฃผ์ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
1. AppDelegate ํด๋์ค๋ฅผ ์ ์ํฉ๋๋ค. App Delegate๋ window๋ฅผ ๋ง๋ญ๋๋ค. Window๋ ์ฑ์ ์ฝํ ์ธ ๊ฐ ๊ทธ๋ ค์ง๋ ๊ณณ์ ๋๋ค. App Delegate๋ ๋ํ ์ฑ์ ์ํ๋ณํ์ ๋์ํ ๊ณต๊ฐ์ ์ ๊ณตํฉ๋๋ค.
2. ์ฑ์ entry point ๋ฅผ ์์ฑํ๊ณ , ์ฑ์ ์ด๋ฒคํธ๋ฅผ ์ ๋ฌํด์ฃผ๋ run loop์ ๋ง๋ญ๋๋ค. ์ด ๋์์ UIApplicationMain ์์ฑ (@main)์ ์ํด ํํด์ง๋๋ค.
@main attribute @๊ฐ ์์ ๋ถ์ ํค์๋๋ค์ attribute๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. ์์ธํ ๋ด์ฉ์ ๋ฐ๋ก ๊ธ์ ๋ค๋ฃจ์ด์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค.
" Using the UIApplicationMainattribute is equivalent to calling the UIApplicationMain function and passing your AppDelegateclass’s name as the name of the delegate class. " - developer.apple.com
UIApplication์ด๋ผ๋ ํจ์๊ฐ ์๊ณ ์ด ํจ์๋ ํ๋ผ๋ฏธํฐ๋ก ์ฑ์ delegate๋ฅผ ๋ฐ๋๋ฐ, @main์ ์ฌ์ฉํ๋ ๊ฒ์ delegate ๋ก AppDelegate๋ฅผ ์ ๋ฌํ๋ฉด์ UiApplication ์ด๋ผ๋ ํจ์๋ฅผ ํธ์ถํ๋ ๊ฒ๊ณผ ๊ฐ๋ค๊ณ ๋งํ๊ณ ์์ต๋๋ค.
๊ทธ ํธ์ถ์ ๋ํ ๋๋ต์ผ๋ก ์์คํ ์ application object๋ฅผ ์์ฑํฉ๋๋ค.
์ด Application object๋ ์ฑ์ ์๋ช ์ฃผ๊ธฐ ๊ด๋ฆฌ๋ฅผ ๋ด๋นํฉ๋๋ค.
์์คํ ์ ๋ํ AppDelegate ํด๋์ค์ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋๋ฐ, ์ด๊ฒ์ Application object์ ํ ๋นํฉ๋๋ค. ์ดํ ์์คํ ์ด ์ฑ์ ์คํํฉ๋๋ค.
AppDelegate ํด๋์ค๋ ํ๋ก์ ํธ๋ฅผ ์๋ก์์ฑํ๋ฉด ์๋์ ์ผ๋ก ์์ฑ๋ฉ๋๋ค.
์ผ๋ฐ์ ์ด์ง ์์ ์์ ์ ํ ๋๋, ์ฐ๋ฆฌ๋ ๋ฐ๋์ Xcode๊ฐ ์ ๊ณตํ ์ด ํด๋์ค๋ฅผ ์ด์ฉํ์ฌ ์ฑ์ ์ด๊ธฐํํ๊ณ app-level ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํด์ผ ํฉ๋๋ค.
AppDelegate ํด๋์ค๋ UIApplicationDelegate ํ๋กํ ์ฝ์ ์ฑ์ฉํฉ๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ์ฑ (Application Object)์ Delegate๋ AppDelegate ํด๋์ค์ ๋๋ค.
์ด ํ๋กํ ์ฝ์๋ ์ฑ์ set up ํ๊ณ , ์ฑ์ ์ํ์ ๋ณํ์ ๋์ํ๊ณ , ๋ค๋ฅธ app-level ์ด๋ฒคํธ๋ฅผ ๋ค๋ฃฐ ์ ์๋ ๋ค์ํ ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
AppDelegate ํด๋์ค๋ `window`๋ผ๋ ์ด๋ฆ์ ํ๋กํผํฐ๋ฅผ ํ๋ ๊ฐ์ง๊ณ ์์ต๋๋ค.
App Deleagate๋ window๋ฅผ ๋ง๋ญ๋๋ค. Window๋ ์ฑ์ ์ฝํ ์ธ ๊ฐ ๊ทธ๋ ค์ง๋ ๊ณณ์ ๋๋ค.
์ด ์์ฑ์ ์ฑ์ window์ ์ฐธ์กฐ๋ฅผ ์ ์ฅํฉ๋๋ค. ์ด window๋ ์ฑ์ ๋ทฐ ๊ณ์ธต์ ๋ฃจํธ์ ๋๋ค.
์ด๊ณณ์ด ์ฑ ๋ด์ ๋ชจ๋ ์ฝํ ์ธ ๊ฐ ๊ทธ๋ ค์ง๋ ๊ณณ์ ๋๋ค.
๊ทธ๋ฐ๋ฐ ์ด ๊ธ์ ์์ฑํ๋ ์์ ์์๋ SceneDelgate๊ฐ window๋ผ๋ ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๊ณ ์์์ต๋๋ค.
์ผ๋จ ์ด ๋ถ๋ถ์ ๋์ด๊ฐ๋๋ก ํ๊ฒ ์ต๋๋ค.
์ต์ ๋ ํ์ ์ window. ํน์ ์์ ์๋ nil์ด ๋ค์ด์๋ค. AppDelegate ํด๋์ค๊ฐ ์ ๊ณตํ๋ (์๋ฐํ ๋งํ๋ฉด ๊ทธ๊ฒ์ด ์ฑ์ฉํ ํ๋กํ ์ฝ์ ์๊ตฌ์ฌํญ์ ๊ตฌํํ) ๋ฉ์๋๋ค์ ์ฌ๋ฌ ๊ฐ์ง์ด๊ณ ,
Documentation์ ๋ฉ์๋๋ค์ ์ฌ์ฉ๋ฐฉ๋ฒ์ด ์ ํ ์์ต๋๋ค.
์ด Food Tracker ์ฑ์ ๊ธฐ๋ฅ์ AppDelegate.swift ํ์ผ์ ์์ ํ ์ผ์ ์์ต๋๋ค.
์ดํ์ Note ์ฑ์์ ์์ ํด๋ณผ ์์ ์ ๋๋ค.
The View Controller Source File
ํ๋ก์ ํธ๋ฅผ ์ฒ์ ์์ฑํ์์ ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฑ๋๋ ํ์ผ์ ๋๋ค.
์๋ฌด ์์ ๋ ํ์ง ์๊ณ ๋น๋ ์ค ๋ฐ ํ์์ ๋ ๋ณด์ด๋ ๋น์ด์๋ ํฐ์ ์ฌ(Scene)๊ณผ ์ฐ๊ฒฐ๋์ด์๋ View controller์ ๋๋ค.
์ดํ์ ์คํ ๋ฆฌ๋ณด๋์ ์ถ๊ฐํ๋ ์ฌ ๋ค์ ์ฐ๊ฒฐํ VC๋ค์ ๋ชจ๋ UIViewController ํด๋์ค๋ฅผ ์๋ธ ํด๋์ฑ ํ๊ณ ์์ต๋๋ค.
์ด ํด๋์ค๋ค์ ๊ตฌํ์์ custom ํ ๋์๋ค๊ณผ ์๋ฃ๊ตฌ์กฐ๋ค์ ์ ์ํฉ๋๋ค.
Open Your Storyboard
์คํ ๋ฆฌ๋ณด๋๋ `. storyboard`๋ผ๋ ํ์ฅ์๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
์คํ ๋ฆฌ๋ณด๋๋ฅผ ํตํด์ UI element๋ฅผ ๊ฐ๋จํ๊ฒ ์ถ๊ฐํ๊ณ ์ํ๋ ์์น์ ๋ฐฐ์นํ ์ ์์ต๋๋ค.
Xcode๋ ์คํ ๋ฆฌ๋ณด๋ ํ์ผ์ Interface Builder๋ผ๋ ์๋ํฐ๋ก ์ฝ๋๋ค.
์ฌ (Scene) ์ด๋, ์ฑ์์ ์ฝํ ์ธ ๋ฅผ ๋ด๊ณ ์๋ ํ๋์ ํ๋ฉด์ ์คํ ๋ฆฌ๋ณด๋ ๋ฐฉ์์ผ๋ก ํํํ ์ฉ์ด ์ ๋๋ค.
ํ๋์ ์ฌ์ ํ๋์ UIViewcontroller ์ปค์คํ ํด๋์ค์ ์ฐ๊ฒฐ๋์ด ์์ต๋๋ค.
์ด ์บ๋ฒ์ค์์ ๋ณด์ฌ์ฃผ๋ ํ๋ฉด์ ํน์ ๊ธฐ๊ธฐ์์ ๋ณด์ด๋ ํ๋ฉด์ ๋ํ๋ ๋๋ค.
๊ธฐ๊ธฐ์ ๋ฐ๋ผ ๋ณด์ด๋ ํ๋ฉด์ด ๋ฐ๋ ์ ์๊ธฐ ๋๋ฌธ์, Adaptive ํ interface๋ฅผ ๋ง๋๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
" an interface that automatically adjusts so that it looks good on any device and in any orientation. "
๋ค๋ฅธ ๋ฌธ์๋ค์์๋ ์ ํ์ ๋ค๋ฅธ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ๊ฐ์ง ๊ธฐ๊ธฐ๋ค์ ๋ชจ๋ ์ง์ํ๋ค๋ ์๋ฏธ์์ Adaptive๋ผ๋ ์ฉ์ด๋ฅผ ์์ฃผ ์ฌ์ฉํฉ๋๋ค.ํ๋์ ์ฌ ๊ณผ ์ฐ๊ฒฐ๋์ด ์๋ Custom Class (ViewController) ์ฌ์ง์ ๋ํ ์ค๋ช
ํ๋ก์ ํธ๋ฅผ ์์ฑํ๊ณ ์ด๋ ํ ์ฝ๋ ์์ ์ ํ์ง ์๊ณ Main.storyboard๋ฅผ ์ด๋ฉด ์ผ์ชฝ ์ฌ์ง๊ณผ ๊ฐ์ด canvas ์์ ํ๋์ ์ฌ์ด ๋์ต๋๋ค.
์ด ์ฌ์ file's owner๋ฅผ ํด๋ฆญํ๋ฉด ํ๋ฉด์ ์ค๋ฅธ์ชฝ์ attribute inspector๊ฐ ๋์ค๋๋ฐ, ์ด๊ณณ์์ ์ฐ๊ฒฐ๋ Custom Class๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
file's owner๋ ํฐ์ ํ๋ฉด ์๋จ ์ง์ ํ์์ ๋๊บผ์ด ๊ฐ๋ก ์ค์ ํด๋ฆญํ๋ฉด ํ๋์ ์ค์ ์ผ๋ก ํ์ด๋ผ์ดํ ๋๋ ๋ถ๋ถ์ ๊ฐ๋ฆฌํต๋๋ค.
์ฌ๊ธฐ์ ViewController ํด๋์ค๋ UIViewController๋ฅผ ์๋ธ ํด๋์ฑ ํ๊ณ ์์ต๋๋ค.
Build the Basic UI
์ด ๋ถ๋ถ์ ๋ณด๊ณ ๋ฐ๋ผ ํ๋ฉด ๋๋ ๊ฐ๋จํ ๋ด์ฉ๋ค์ ๋๋ค. ๋ฐ๋ก ๋ฆฌ๋ทฐํ ๊ฒ ์๋ค๊ณ ์๊ฐ๋ฉ๋๋ค.
์ฉ์ด ์์ฃผ๋ก ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํ์์ต๋๋ค.
์ฌ์ ์ถ๊ฐํ ์ ์๋ View ๋ชฉ๋ก๋ค์ ์ด๊ฒ์ Object Library ๋ผ๊ณ ํฉ๋๋ค.
๋จ์ถํค๋ ` shift + cmd + L ` ์ ๋๋ค.
Object Library View (ํน์ Control) ๋ค์ ๋๋๊ทธํ์ฌ ์ฌ๋ด์์ ์ด๋ฆฌ์ ๋ฆฌ ์์ง์ด๋ฉด ๋ณด์ด๊ฒ ๋๋ ํ๋์ ์ ์ ๋ค์
Layout Guides ๋ผ๊ณ ํฉ๋๋ค.
The blue layout guides ์๋ ์ฌ์ง์์ ๋ฑ์ฅํ๋ ์ธ ์ข ๋ฅ์ vertical layout guides์ ์ด๋ฆ์
์ผ์ชฝ๋ถํฐ ๊ฐ๊ฐ the left margin alignment, the horizontal center alignment, the right margin alignment ์ ๋๋ค.
์๋ ์ฌ์ง์์ ์ผ์ชฝ์ Document outline์์๋ ์คํ ๋ฆฌ๋ณด๋ ๋ด์ ์ ํ๋ ์ฌ์์ ๋ทฐ๋ค์ ๊ณ์ธต ๊ตฌ์กฐ์ Layout Constraints ๋ฑ์ ํ์ธํ ์ ์์ต๋๋ค.
๊ด๋ จ ๊ธ: View Controller ์ ์ญํ
๋ํ ํ์ด๋ผ์ดํ ๋ ๋ถ๋ถ์ด ์ ํ๋ ์์์์ ๋ํ๋ด๋๋ฐ, ํ์ฌ๋ View Controller์ Content view (ํน์ Root view) ์ธ `View` ๊ฐ ์ ํ๋์ด ์์ต๋๋ค.
์ ํ๋ ๋ทฐ์ Configuration ์ ํ๋ฉด ์ค๋ฅธ์ชฝ์ Inspector selector bar๋ฅผ ํตํด ์กฐ์ํ ์ ์์ต๋๋ค.
ํ์ฌ๋ Attributes inspector๊ฐ ์ ํ๋์ด ์์ต๋๋ค.
Main.storyboard ์ ํ์ ๋์ค๊ฒ ๋๋ ํ๋ฉด ์ฌ์ UITextField View๋ฅผ ์ถ๊ฐํ๊ณ ํด๋น View๋ฅผ ์ ํํ ์ Attribute Inspector ์์ ๋ณผ ์ ์๊ฒ ๋๋ ํ๋ฉด์ ๋๋ค.
Storyboard๋ฅผ ํตํ ์์ ์ ์ฝ๋๋ก์ ์์ ์ ์ผ์ ๋ถ๋ถ ๋์ฒดํ ์ ์์ต๋๋ค.
Storyboard๋ฅผ ํตํ VIew Configuration ์๋ต๋ ๋ถ๋ถ์ ๊ด๋ จ ๊ธ๋ก ๋ฐ๋ก ๊ฒ์ํ์์ต๋๋ค.
๊ด๋ จ ๊ธ: UITextField ์ Return Key ์ Auto-enable Return Key๋!
๋ค์ ๊ธ: Connect the UI to the Code (1) - Food Tracker
Connect the UI to the Code (1) - Food Tracker
Connect the UI to Source Code ์คํ ๋ฆฌ ๋ณด๋์ ์์๋ค ( Views ) ์ ์์ค ์ฝ๋์ ์ฐ๊ฒฐ๋์ด ์์ต๋๋ค. ์คํ ๋ฆฌ๋ณด๋์์ ํ๋์ ์ฌ (scene)์ ์ฝํ ์ธ ๋ก ์ด๋ฃจ์ด์ง ํ๋์ ํ๋ฉด์ ๋ํ๋ด๋ฉฐ ๋ณดํต ํ๋์ View Controller
woozzang.tistory.com
'iOS > ๐ค App' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Review of Implement a Custom Control (1) - FoodTracker (0) 2021.01.21 Review of Work with View Controllers (2) - Food Tracker (0) 2021.01.19 Review of Work with View Controllers (1) - Food Tracker (0) 2021.01.19 Review of Connect the UI to Code (2) - Food Tracker (0) 2021.01.19 Review of Connect the UI to Code (1) - Food Tracker (0) 2021.01.18