-
Review of Work with View Controllers (1) - Food TrackeriOS/๐ค App 2021. 1. 19. 13:50
Understand the View Controller Lifecycle
ํ๋์ ์ฌ๋ณด๋ค ๋ ๋ง์ ์ฌ์ ๊ฐ์ง๊ณ ์๋ ๋ณต์กํ ์ฑ์์, ์ฐ๋ฆฌ๋ ํ๋ฉด์ด ์ด๋ํจ์ ๋ฐ๋ผ view๋ฅผ ์ฃ๊ณ ๋ด๋ฆฌ๋ ( loading and unloading ) ์์ ์ ๋ค๋ฃจ์ด์ผ ํฉ๋๋ค.
UIViewController ํด๋์ค๋ ๋ทฐ ๊ณ์ธต์ ๊ด๋ฆฌํ๊ธฐ ์ํ ๋ฉ์๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
iOS๋ ํ๋์ View Controller์ ์ํ๊ฐ ๋ฐ๋ ๋ ์๋์ผ๋ก ์ ์ ํ ๋ฉ์๋๋ฅผ ํธ์ถํฉ๋๋ค.
UIVIewController๋ฅผ ์๋ธ ํด๋์ฑ ํ Custom class์์ ํด๋น ๋ฉ์๋๋ฅผ ์ค๋ฒ ๋ผ์ด๋ฉํ์ฌ ์ํ ๋ณํ์ ๋ฐ๋ผ ์ํ๋ ๋์์ ์ง์ ๊ตฌํํ ์ ์์ต๋๋ค.
VC์ state transition ์ ๋ฐ๋ผ ํธ์ถ๋๋ ๋ฉ์๋๋ค iOS๋ ์๋ UIViewController ๋ฉ์๋๋ฅผ ๋ค์ ์์ ์์ ํธ์ถํฉ๋๋ค
viewDidLoad()
VC์ Contentview( Root view)๊ฐ ์์ฑ ๋๊ณ storyboard์์ load ๋์์ ๋ ํธ์ถ๋ฉ๋๋ค.
` storyboard์์ load๋์์ ๋ `
์ ๋ ์์ง storyboard์ system ๋ฐ VC์์ ๊ด๊ณ์ ๋ํด ๋ชจํธํ๊ฒ ์๊ณ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
ํด๋น ๋ฌธ๊ตฌ๊ฐ ์๋ฒฝํ๊ฒ ์ดํด๋์ง ์์ ๋ณด์ํ๋๊ธ์ ํ์ ์์ฑํด์ผ ํ ๊ฒ ๊ฐ์ต๋๋ค.VC์ outlet ๋ค์ ์ด ๋ฉ์๋๊ฐ ํธ์ถ๋ ๋ ๋ชจ๋ ์ ํจํ ๊ฐ๋ค์ ๊ฐ์ง๊ณ ์๊ฒ ๋ณด์ฅ๋ฉ๋๋ค.
์ฆ, ๋ฉ์๋ ๋ฐ๋์์ ์์๋ ๋ค์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ณดํต iOS๋ viewDidLoad()๋ฅผ ๋จ ํ ๋ฒ๋ง ํธ์ถํฉ๋๋ค. ๊ทธ ์์ ์ ์ต์ด๋ก content view๊ฐ ์์ฑ๋์์ ๋์ ๋๋ค.
content view๋ lazy ํ๊ฒ ์์ฑ๋ฉ๋๋ค. ์ฆ, VC๊ฐ ์ธ์คํด์คํ ๋๋ ์์ ๊ณผ ์ผ์นํ์ง ์์ต๋๋ค
content view์ ์์ฑ์์ ์ ์์คํ ์ด๋ ์ด๋ ํ ์ฝ๋๊ฐ VC์ view ์์ฑ์ ์ ๊ทผํ์์ ๋์ ๋๋ค.
VC์ view ์์ฑ์๋ content view์ ์ฐธ์กฐ๊ฐ ์ ์ฅ๋์ด ์์ต๋๋ค.
viewWillAppear()
viewDidLoad()๊ฐ content view๊ฐ ์์ฑ๋ ๋ ํธ์ถ๋๋ค๋ฉด, ์ด ๋ฉ์๋๋ ์์ฑ๋ content view๊ฐ ์ฑ์ ๋ทฐ ๊ณ์ธต์ ์ถ๊ฐ๋๊ธฐ ์ง์ ์ ํธ์ถ๋ฉ๋๋ค.
contentview ๊ฐ ๊ธฐ๊ธฐ ํ๋ฉด์ ๋์ค์ง ์ง์ ์ ์ํํด์ผ ํ ์ผ๋ค์ ์ด ๋ฉ์๋์ ๊ตฌํํฉ๋๋ค.
๋ค๋ง ์ด๋ฆ๊ณผ ๋ฌ๋ฆฌ, ์ด ๋ฉ์๋๊ฐ ํธ์ถ๋์๋ค๋ ๊ฒ์ด content view๊ฐ ํ๋ฉด์์ ๋ณด์ธ๋ค๋ ๊ฒ์ ๋ณด์ฅํ์ง ์์ต๋๋ค.
view๋ ๋ค๋ฅธ view์ ์ํด ๊ฐ๋ ค์ง๊ฑฐ๋ ์จ๊ฒจ์ง ์ ์์ต๋๋ค.
์ฆ ์ด ๋ฉ์๋์ ํธ์ถ์ ๋จ์ง ์ฑ์ ๋ทฐ ๊ณ์ธต์ ๊ณง ์ถ๊ฐ๋๋ค๋ ๊ฒ์ ๋ํ๋ ๋๋ค.
viewDidAppear()
์ด ๋ฉ์๋๋ ์์ฑ๋ content view๊ฐ ์ฑ์ ๋ทฐ ๊ณ์ธต์ ์ถ๊ฐ๋ ์งํ์ ํธ์ถ๋ฉ๋๋ค.
view๊ฐ ํ๋ฉด์ ๋ํ๋ ์งํ์ ์ํํ ์ผ๋ค์ ์ด ๋ฉ์๋์ ๊ตฌํํฉ๋๋ค. ( data ๋ถ๋ฌ์ค๊ธฐ, animation ๋ณด์ฌ์ฃผ๊ธฐ ๋ฑ)
์ด ๋ฉ์๋ ๋ํ viewWillAppear()๊ณผ ๊ฐ์ด ํธ์ถ์ด content view์ ๊ฐ์์ฑ์ ๋ณด์ฅํ์ง ์์ต๋๋ค.
์ฆ ์ด ๋ฉ์๋์ ํธ์ถ์ ๋จ์ง ์ฑ์ ๋ทฐ ๊ณ์ธต์ ์ถ๊ฐ๋์๋ค๋ ๊ฒ์ ๋ํ๋ ๋๋ค.
viewWillDisappear()
์ด ๋ฉ์๋๋ ์์ฑ๋ content view๊ฐ ์ฑ์ ๋ทฐ ๊ณ์ธต์ ์ ๊ฑฐ๋๊ธฐ ์ง์ ์ ํธ์ถ๋ฉ๋๋ค.
view ๊ด๋ จ๋ ๊ฒ๋ค์ ์ ๋ฆฌํ๋ ์์ ์ ์ด ๋ฉ์๋์์ ๊ตฌํํฉ๋๋ค. ( ๋ณ๊ฒฝ์ฌํญ ์ ์ฉํ๊ธฐ, first responder ํด์ ํ๊ธฐ ๋ฑ)
์ด๋ฆ๊ณผ ๋ค๋ฅด๊ฒ ์ด ๋ฉ์๋์ ํธ์ถ์ด contenview๊ฐ ๊ฐ๋ ค์ง๊ฑฐ๋ ์ฌ๋ผ์ง๋ ๊ฒ์ ๋ณด์ฅํ์ง ์์ต๋๋ค.
์ฆ ์ด ๋ฉ์๋์ ํธ์ถ์ ๋จ์ง ์ฑ์ ๋ทฐ ๊ณ์ธต์์ ๊ณง ์ญ์ ๋ ๊ฒ์ด๋ผ๋ ๊ฒ์ ๋ํ๋ ๋๋ค.
viewDidDisappear()
์ด ๋ฉ์๋๋ ์์ฑ๋ content view๊ฐ ์ฑ์ ๋ทฐ ๊ณ์ธต์ ์ ๊ฑฐ๋ ์งํ์ ํธ์ถ๋ฉ๋๋ค.
์ด ๋ฉ์๋์ ํธ์ถ์ ๋จ์ง ์ฑ์ ๋ทฐ ๊ณ์ธต์์ ์ญ์ ๋์๋ค๋ ๊ฒ์ด๋ผ๋ ๊ฒ์ ๋ํ๋ ๋๋ค.
VC๊ฐ view์ data model์ communication pipeline์ด ๋์ด์ฃผ๋ ์ฑ ์ค๊ณ๋ MVC ํจํด์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค.
MVC ํจํด์์, model ์ ์ฑ์ ๋ฐ์ดํฐ๋ฅผ ๊ณ์ ์ถ์ ํ๊ณ , view๋ ์ฑ์ UI์ ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ , controller๋ view๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
controller๋ view ์ model ์ฌ์ด์์ communication gateway (์์์๋ communication pipeline์ด๋ผ๊ณ ํํ)์ ์ญํ ์ ํฉ๋๋ค.
Add a Meal Photo
Object Library์์ ์ ํํ View๋ฅผ ๊ธฐ์กด์ ์๋ Stack View์ ๋ฐ๋ก ๋ฃ๋ ๋ฒ:
์ถ๊ฐํ๋ ค๋ View๋ฅผ Document Outline ์ผ๋ก ๋๋๊ทธํ์ฌ ๊ณ์ธต์ ๋ง๋ ์์์ ๋๋ ํ๋ฉด ๋ฉ๋๋ค.
์ฌ๊ธฐ์๋ `Set Default Label Text` ๋ฒํผ ๋ฐ์ ๋ฃ์ด์ ์ถ๊ฐํ์์ต๋๋ค. Size Inspector์ Instrinsic Size
Placeholder ๋ก ์ค์ ํด ๋๊ณ Width & Height๋ฅผ ๋ถ์ฌํ๋ฉด ๋ทฐ์ ์ด๋ฏธ์ง๊ฐ ์ถ๊ฐ๋๊ธฐ ์ ์ ์์๋ก ๋ทฐ ์์ญ์ ์ค์ ํ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง๊ฐ ์ถ๊ฐ๋๋ฉด intrinsic content size๋ image์ size๋ก ๋ง์ถฐ์ง๋๋ค. ๋ฐ๋ผ์ ์ถ๊ฐ๋๊ธฐ ์ ๊น์ง๋ง ์ฌ์ฉํ๋ ์์ ๊ฐ์ ๋๋ค.
์ค์ ๋ก ์ฑ ์คํ ์ค layout engine์ ๋ทฐ์ ์ค์ intrinsic content size๋ฅผ ์ฌ์ฉํฉ๋๋ค!
Constraints: Aspect ratio
Width & Height ๋ฅผ ๊ฐ๊ฐ 320์ผ๋ก ์ค์ ํด ๋์ ์ํ์์ Aspect ratio Constraints๋ฅผ ์ฃผ์์ต๋๋ค.
๋ฐ๋ผ์ ํด๋น ์ด๋ฏธ์ง๋ทฐ๋ ์ด์ ํญ์ 1 : 1 ๋น์จ์ ๊ฐ์ง ์ ์ฌ๊ฐํ ํํ๋ฅผ ๊ฐ์ง๋๋ค.
`Add New Constraints` ์๋์ฐ
Display a Default Photo
# Asset Catalog #Assets.xcassets
Asset Catalog : ์ฑ์์ ์ฌ์ฉํ ์ด๋ฏธ์ง๋ค์ ์ ์ฅํ๊ณ ๊ด๋ฆฌํ๋ ํ์ผ ( ์ด ๊ณณ์ ์ฌ์ฉํ ์ฌ์ง๋ค์ ์ถ๊ฐํฉ๋๋ค. )
Connect the Image View to Code
Assistant Editor Shortcut : (storyboard ํ์ผ์์) ctrl + option + cmd + return
Views ์ Controls, ๋ ์ฉ์ด๋ฅผ ๊ตฌ๋ถํ๋ ๋ฏธ๋ฌํ ์ฐจ์ด (a nuanced distinction)
์ฐ์ Controls (UIControl)์ Views(UIView) ์ Subclass ์ ๋๋ค.
์ฆ controls ๋ ํญ์ views ์ธ ๋์์ controls ์ด์ง๋ง, views ๋ ํญ์ controls ๋ ์๋๋๋ค.
views๋ ์ฝํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ญํ ๋ง ํ๋ฉด ๋๊ณ , control ์ ์ฝํ ์ธ ๋ฅผ ์ด๋ ํ ๋ฐฉ์์ผ๋ก ๊ต์ฒดํ๋ ์ญํ ์ ์ถ๊ฐ์ ์ผ๋ก ๊ฐ์ง๊ณ ์์ต๋๋ค.
view ์ ์๋ก๋ lables, image views ๊ฐ ์์ต๋๋ค.
control ์ ์๋ก๋ text fields, buttons๊ฐ ์์ต๋๋ค.
Xcode ์์ views์ธ UIImageView ๋ฅผ `control drag & drop` ํ์ฌ VC์์ Connection์ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.
Connection ํ์ ์ด Outlet ๋ง ๊ฐ๋ฅํ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. UIImageView๋ controls ๊ฐ ์๋ views ์ด๊ธฐ ๋๋ฌธ์, ์ด๋ค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ฌ ์ฒ๋ฆฌ๋์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
views์ ์ด๋ฒคํธ ์ฒ๋ฆฌ๋ฅผ ๋ฃ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ views์ gesture recognizer๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
ํด๋น ๋ด์ฉ์ ๋ค์ ๊ธ์์ ์ด์ด์ ์์ฑํ๊ฒ ์ต๋๋ค!
๋!
๋ค์ ๊ธ: Review of Work with View Controllers (2) - Food Tracker
Review of Work with View Controllers (2) - Food Tracker
Create a Gesture Recognizer Image view๋ control ์ด ์๋๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ button ์ด๋ slider์ ๊ฐ์ด ์ฌ์ฉ์์ input์ ๋ฐ์ํ๋๋ก ์ค๊ณ๋์ง ์์์ต๋๋ค. ๋ฐ๋ผ์ ๋ฐ๋ก Control-drag ์ ํตํด์ action metho..
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 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 Review of Build a Basic UI - Food Tracker (0) 2021.01.18