[TIL] 2024. 06. 21

1-5. 스토리보드 UI

(a) IBOutlet & IBAction

1. IBOutlet
   • Interface Builder와 연결된 객체.
   • UI 객체를 스토리보드에서 `ctrl`을 누른 채 `Drag & Drop`으로 생성 가능.
   • `@IBOutlet weak var imageView: UIImageView!`
   • 약한 참조(`weak`)를 의미하며, 스토리보드와 UI 객체의 연결고리 역할.
2. IBAction
   • Interface Builder와 연결된 Action.
   • UI 객체를 스토리보드에서 `ctrl`을 누른 채 `Drag & Drop`으로 생성 가능.
   • `IBAction func buttonAction(_ sender: Any)`
   • 스토리보드와 UI 액션(이벤트)의 연결고리 역할.
3. 예제 코드
   • 버튼 클릭 시 콘솔에 출력하는 예제 : 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var button: UIButton!
    @IBAction func buttonAction(_ sender: Any) {
        print("버튼이 클릭 되었음.")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

1. • 버튼 클릭 횟수 세기 : 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var button: UIButton!
    @IBAction func buttonAction(_ sender: Any) {
        self.number += 1
        print("버튼이 \(number)회 클릭 되었음.")
    }
    private var number: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

1. • 버튼 클릭 시 이미지 변경 : 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var button: UIButton!
    @IBAction func buttonAction(_ sender: Any) {
        self.imageView.image = UIImage(named: "dog")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

1. 스스로 해보기
   • 버튼 클릭 시 배경색 변경 : 

@IBAction func buttonAction(_ sender: Any) {
    self.button.backgroundColor = .red
}

1. • 버튼 클릭 시 이미지 토글 : 

@IBAction func buttonAction(_ sender: Any) {
    if self.imageView.image == UIImage(named: "cat") {
        self.imageView.image = UIImage(named: "dog")
    } else {
        self.imageView.image = UIImage(named: "cat")
    }
}

(b) 스토리보드로 로그인 화면 구현

1. 레이아웃 구현
   • IBOutlet을 이용해 UILabel, UITextField, UIButton으로 로그인 화면 구성.
   • 스토리보드에서 Constraints 값을 설정해 레이아웃 구성.
2. 버튼 이벤트 구현
   • IBAction을 이용해 로그인 성공/실패 여부 출력.
   • 맞는 id와 password를 변수로 선언하고, textField의 값과 비교.
   예제 코드

import UIKit

class ViewController: UIViewController {

    private let id: String = "adam"
    private let password: String = "1234"
    
    @IBOutlet weak var idTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var button: UIButton!
    @IBAction func buttonAction(_ sender: Any) {
        let result: Bool = idTextField.text == self.id && passwordTextField.text == self.password
        print(result ? "로그인 성공" : "로그인 실패")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

1. 로그인 성공/실패 시나리오
   • 맞는 id, password 입력 시 "로그인 성공" 출력.
   • 틀린 id 또는 password 입력 시 "로그인 실패" 출력.

핵심 개념

• IBOutlet과 IBAction을 사용하여 스토리보드와 코드를 연결.
• 레이아웃과 이벤트 처리를 통해 인터랙티브한 UI 구성.
• 스토리보드를 사용해 UI 구성 요소를 시각적으로 배치하고 연결.

 

---