20210528 - code를 이용해 어플디자인 변경하기1

 

 

Main.storyboard를 통해 화면을 설정했었는데,

이번엔 코드를 통해 화면을 수정한다.

ViewController.swift에서 코드를 수정할 것이다.

 

 

Main.storyboard 에서 Adjust Editor Options - Assistant를 체크한다.

 

 

 

왼쪽에는 Main.storyboard, 다르게 말하면 Interface Builder 화면이,

오른쪽에는 ViewController.swift 화면이 나타나게 된다.

 

 

ViewController.swift의 코드에서 UI를 참조하기 위해 'IB outlet(=Interface Builder outlet)'을 생성해야 한다.

 

'주사위 1'을 '주사위 2'로 수정할 것인데,

먼저 Ctrl 키를 누른 상태로 주사위1을 코드로 드래그한다.

코드 중 11번째 줄인 class ViewController~ 와 13번째줄인 override func ~ 사이로 넣어준다.

 

 

 

팝업이 하나 뜨게 되고, 'Name' 칸에 이 연결의 이름을 입력한다.

여기에서 입력한 이름은 코드파일에서 이 '주사위 1'에 해당하는 Image View의 명칭이 될 것이다.

 

 

diceImageView1 로 이름을 정해주고 Connect

여기서 주의할 점은,

어떤 변수의 이름을 정할 때 소문자로 시작해서 각 단어의 시작마다 대문자로 적어주는 방법이 보편적으로 사용된다.

이렇게 이름을 짓는 방법을 'camel casing'이라고 한다.

 

 

IBOutlet이 생성된 것을 볼 수 있다.

 

 

이 상태에서 어플을 테스트해보면 정상적으로 실행이 되는데,

 

방금 만든 IBOutlet~ 부분의 이름을 diceImageViewOne으로 수정할 경우,

debug area에 에러 메시지가 뜨면서 테스트되지 않는다.

 

 

상단을 살펴보면

Terminating app due to uncaught exception 'NSUnknownKeyException', reason: ~

~ this class is not key value coding-compliant for the key diceImageView1.

 

라고 적혀있는 것에서 에러가 난 원인에 대한 힌트를 얻을 수 있다.

 

 

사실 Main.storyboard에서 보이는 것들도 사실은 코드로 이루어져 있는데,

Main.storyboard를 우클릭해서 Open As - Source Code를 들어가면 확인해볼 수 있다.

 

 

 

 

connection의 변경하기 전의 이름을 참조하고 있는 것을 확인할 수 있다.

이를 해결하기 위해,

 

 

 

해당 이미지를 우클릭하여, referencing outlets 부분을 삭제해주고,

ViewConteroller.swift 에 아까 만들어둔 IBOutlet~~ 문장의 맨 앞에 있는 버튼과 이미지를 다시 연결해주면 된다.

이 때, 연결 순서는 버튼 - 이미지 이다.

 

 

 

사실 이런 번거로운 과정을 거치지 않고,

이름을 수정하고자 할 때 'diceImageView1' 부분을 Ctrl을 누른 상태로 클릭하거나,

우클릭을 한 뒤 Refactor - Rename 을 선택하여 수정하면 된다.

Refactor - Rename을 선택하면 이 단어가 사용된 모든 부분을 자동으로 찾아주며, 함께 적용시킬 수 있다.

 

 

이름을 수정한 뒤 화면 오른쪽의 'Rename'을 눌러주면 적용된다.

 

 

 

----

어플 충돌이 발생할 경우, 항상 Debug Area 의 제일 윗부분을 살펴보면 원인을 파악할 수 있다.

-----

 

 

 

 

Who.What = Value 를 작성해서 코드를 수정할 것이다.

->

Whe needs to be changed?

What property about this thing needs to change?

set the new Value (어떻게 바꿀 것인지)

 

 

해당 부분의 코드블럭으로 넣어줄 것인데,

 

우선, viewDidLoad에 의해, 어플이 실행되었을 때 아래의 코드블럭이 실행되는 조건이 주어진 것을 알 수 있으며

 

diceImageView1.What = Value 를 작성할 것이다.

여기서 What에 들어갈 항목은, 자동완성으로 제공되기도 하며, Attributes inspector 에서 확인 가능하다.

 

diceImageView1.image = imageliteral

 

을 입력했는데, imageliteral은 단어에서 주는 느낌 그대로..

이미지파일을 직접 선택해서 넣어줄 수 있게 만들어준다.

 

 

 

이렇게 아이콘이 생기는데, 아이콘을 더블클릭하면 선택할 수 있는 이미지들이 나타나는데 원하는 이미지를 선택해주면 된다.

 

 

 

-------

 

 

override func viewDidLoad() {

    Code goes here

}

->

view가 load될 때, 중괄호 안의 코드가 실행된다.

 

-------

 

주사위1의 투명도와, 주사위2의 이미지를 추가로 변경했다.