UI와 코드 연결

image view

image view의 content mode

image view에서 이미지가 들어가는 방식을 설정하기 위해 사용하는 속성이다. 주로 아래의 3가지 값을 사용한다.

a. Aspect Fit: 가로/세로 비율을 유지하고 이미지 전체가 image view 안에서 보이도록 한다.
b. Scale to Fit: 가로/세로 비율을 변형하여 이미지가 image view를 가득 채우도록 한다.
c. Aspect Fill: 가로/세로 비율을 유지하면서 이미지가 image view를 가득 채우도록 한다.

image view 복제

option 키를 누른 상태에서 해당 image view를 drag & drop하면 된다. 아래와 같이 2개 이상의 image view를 동시에 복붙하는 것도 가능하다.

UI component를 코드에서 다루기

아래 사진과 같이 5줄이 있는 아이콘을 클릭한 다음 Assistant 메뉴를 클릭하면 interface builder와 코드를 같이 볼 수 있다.

Assistant 메뉴 클릭 후 보이는 화면은 다음과 같다.

그 다음 클래스 내의 프로퍼티로 다루고자 한다면 control 키를 누른 상태에서 해당 component를 클래스로 drag & drop 한다. 그리고 프로퍼티 이름을 적으면 된다.

그러면 아래와 같이 클래스에 프로퍼티가 생기면서 해당 component에 연결된다. 이러한 연결은 아래 사진과 같이 inspector pane의 맨 오른쪽 탭인 connections inspector에서 확인할 수 있다. inspector에 있는 이름과 클래스의 프로퍼티 이름이 일치하지 않으면 앱 실행 시 에러가 발생하므로 주의하자.

컴포넌트를 오른쪽 마우스로 눌러서도 connection을 확인할 수 있다.

component의 속성 변경

다음과 같이 코드로도 image, alpha 등의 속성에 접근할 수 있다.

class ViewController: UIViewController {
    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        diceImageView1.image = UIImage(named: "DiceSix")
        diceImageView1.alpha = 0.5

        diceImageView2.image = UIImage(named: "DiceTwo")
    }
}

Outlet vs. Action

위의 예시에서 image view가 코드에 연결된 타입은 Outlet이었다. Outlet은 코드가 UI에 영향을 줘야 하는 경우 사용하는 connection type이다. Action의 경우, 버튼을 클릭했을 때 동작이 실행되는 것과 같이 UI가 코드에 영향을 줘야 할 때 사용할 수 있는 connection type이다.

아래 사진과 같이 connection type을 Action으로 설정하여 connection을 생성할 수 있다.

이와 같은 방법으로 버튼을 클릭했을 때 실행할 코드를 작성할 수 있다.

class ViewController: UIViewController {

    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        diceImageView1.image = UIImage(named: "DiceSix")
        diceImageView1.alpha = 0.5

        diceImageView2.image = UIImage(named: "DiceTwo")
    }

    @IBAction func rollButtonPressed(_ sender: UIButton) {
        diceImageView1.image = UIImage(named: "DiceFour")
        diceImageView2.image = UIImage(named: "DiceFour")
    }
}

Reference

https://www.udemy.com/course/ios-13-app-development-bootcamp/