ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Review of Work with View Controllers (1) - Food Tracker
    iOS/๐Ÿค– 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

    ๋Œ“๊ธ€

์–ด์ œ๋ณด๋‹ค ๋ฐœ์ „ํ•œ ๋‚˜