이미지와 버튼 상호작용

Main 스토리보드에서 이미지 요소를 선택한 후, control(^)을 눌러 코드쪽으로 드래그하면 해당 이미지 요소에 해당하는 코드가 생성된다. 스토리보드와 코드를 보는 방법은 스토리보드에서 Assistant를 선택해 주면된다.

이미지를 끌어당겨 코드쪽으로 옮기면 다음과 같은 코드가 생성된다.

@IBOutlet weak var diceImageView1: UIImageView!

@IBOutlet 은 해당 이미지 요소를 참조할 수 있도록 해준다.
그러면 diceImageView1이라는 변수는 이미지와 연결된 것이다. 스토리보드에서 이미지를 우클릭해보면 다음과 같이 연결된 것도 확인 할 수 있다.

앱이 실행되었을 때, 이미지 요소를 바꾸고 싶다면, 변수의 image속성을 UIImage메서를 사용하여 수정해 줄 수 있다. 강의에서도 원래는 image Literal을 사용하였지만 xcode 13 에서는 더이상 지원하지 않는 듯하다.

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

다음과 같은 코드를 추가해주면 앱이 실행되었을 때, Assets에 있는 DiceSix 이미지로 변경된 것을 확인 할 수 있다.

투명도를 나타내는 alpha 속성을 수정하고 싶다면 다음과 같이 해주면된다.

diceImageView1.alpha = 0.5

요소의 어느 속성을 바꿔야 할지 모르겠다면 Attribute Inspector에 있는 이름들을 참고하자.

버튼의 경우 이미지와는 다르게 control(^) 하고 드래그 할시 다음과 같이 설정해준다.

Event에서 Touch Up Inside는 버튼을 누르고 뗄때 이벤트가 발생한다는 의미이며 버튼의 이름은 rollButtonPressed로 해주었다.
다음 코드는 버튼이 눌렸을 때, 로그에 "Button got tapped." 라는 메세지를 출력하고 두개의 이미지를 변경해준다.

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