[iOS] iOS App Programming for Starter - Lesson. 2

1. UIKit & Storyboard

Storyboard : 사용자에게 보여줄 화면을 미리보기,
어떤 컨트롤로 다음 화면으로 이동이 될 것인지 UX의 흐름도 살펴볼 수 있다.
UIKit (User Interface kit) : 사용자에게 보여줄 것들,
사용자에게 Interaction할 그런 것들이 모여 있는 세트.

• Interface Bulider : Storyboard를 미리 볼 수 있는 tool.
• Object Library : Label, Button 등 화면요소들을 볼 수 있다. ( + 버튼 )

2. Adding UI Components on the Storyboard

Object Library로 화면 구성하고 시뮬레이터 실행해서 확인해보기.

• Object Library 단축키 : cmd + Shift + L
• 시뮬레이터 크기 조절 : cmd + 1,2
• 컨트롤 기능이 잘려있는 부분은 Auto layout 추후 이용예정.
• 시뮬레이터 일시정지 버튼누르고 다시 실행 누르면 변경사항 확인이 가능하다.

3. Adding Slider and HIT Button

• 하단 Bard인 view as에서 시뮬레이터 변경 및 가로,세로 변경이 가능하다.
• Slider 기능 변경 ➡️ Attributes inspector ➡️ Value 15 , Minimum 0 변경.
• Attributes inspector : 화면 요소들의 속성들을 설정할 수 있는 inspector.
• Button ➡️ 'Hit' Text 변경.
• Delete는 커서로 기능들 잡아서 삭제.

4. Receiving Value Changed Event from the Slider

Slider를 사용자가 잡아 끌었을때 값이 어떻게 변하는지 확인해보기

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        print(sender.value)
    }

• View Controller ➡️ Connection inspector ➡️ Received Actions : SlideValueChanged
• 쭈욱 끌어다가 Slider bar에 Drag and Drop ➡️ 여러 이벤트 목록 중 Value Changed 선택.
• Received Actions 메뉴에서 깜박깜박하는지 확인
• 시뮬레이터 실행 : cmd + R
• 커서로 Silder bar를 끌어보면서 값 확인이 가능하다.

5. Actions and Outlets

Outlet : Interface bulider에 올라와있는 UI요소에 어떤 값을 가져오고 싶거나
아니면 그것을 코드에 활용하고 싶을 때 사용한다.
IB Action : Interface bulider에 어떤 요소들이 Event를 받았을때
거기에 반응하기 위한 Action 코드를 작성하기 위해 사용한다

• 사용자가 Button을 눌렀을때 반응하는 Action 만들기.
• ViewController.swift ➡️ 코드 작성

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var slider: UISlider!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        print(sender.value)
    }

    @IBAction func touchUpHitButton(_ sender: UIButton) {
        print(slider.value)
    }

• View Controller ➡️ Connection inspector
  ➡️ Outlets : Slider 선택 및 연결
  ➡️ Received Actions : touchUpHitButton 선택 및 연결 ➡️ Event : Touch Up Inside.
• 'HIT' Botton 눌러서 실행 값 확인하기.

💡 Console log가 너무 많이 쌓여있으면 하단의 휴지통 클릭해서 정리할 수 있다.

6. Event-driven Programming

프로그래밍 기법의 일종.
이벤트에 따라서 앞으로 어떤 행위를 하게 될지 결정되는 프로그래밍의 방식.
' 특정 이벤트를 발생했을때, 이런 코드와 액션을 실행하겠다 '
라고 정해놓고 하는 것이 이벤트기반 프로그래밍.

7. [Challenge] Adding RESET Button

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var slider: UISlider!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction func sliderValueChanged(_ sender: UISlider) {
        print(sender.value)
    }

    @IBAction func touchUpHitButton(_ sender: UIButton) {
        print(slider.value)
    }
    
    @IBAction func touchUpResetButton(_ sender: UIButton) {
        print("touch up reset button")
    }
}

• Main.Storyboard ➡️ Object 'Button' ➡️ 'Reset'Text 변경
• View Controller ➡️ Connection inspector ➡️ Received Actions : touchUpResetButton ➡️ Event : Touch Up Inside.

💡 코드의 이름을 변경할때는 오른쪽 버튼 눌러서
Refactor ➡️ Rename으로 변경할 코드와 연결된 모든 영역의 이름을 동시에 바꿔 줄 수있다.