20210529 - code를 이용해 어플디자인 변경하기2

 

 

어제는 IBOutlet을 이용하여 코드를 통해 UI를 수정했다면,

오늘은 사용자가 'Dice Roll' 버튼을 눌렀을 때 실행되는 것들을 만들 것이다.

 

IBOutlet을 만들었을 때와 마찬가지로, Ctrl 버튼을 누른 상태로 코드의 마지막 중괄호 앞부분으로 연결시켜주면,

버튼이기 때문에 연결 타입이 기본으로 'Action'으로 선택되어 있는 것을 확인할 수 있다.

만약 UI를 수정하고 싶다면 Connection 부분을 'Outlet'으로 변경해주면 되지만

지금 하고자 하는 것은 Action 옵션을 사용한다.

Name 부분에 액션에 대한 설명을 적어준다.

그리고, 자동으로 선택되어 있겠지만 Event - 'Touch Up Inside'를 선택해준다. 

--> 사용자가 해당 버튼을 '눌렀다가 뗄 때' 실행된다.

마지막으로, Type - UIButton 으로 설정해준 뒤, Connect 를 누른다. (혹은 엔터 입력)

 

 

 

 

IBOutlet을 생성했을 때와 마찬가지로,

IBAction에 대한 코드가 자동으로 생성된다.

 

 

---

 

 

코드블럭에 여러 코드를 작성할 건데,

우선 

print("Button got pressed.")를 입력했다.

--> swift에서는 'NONCODE' 부분을 큰 따옴표 "" 사이에 넣는다.

--> 이 코드에 의해, 버튼이 눌러질 때마다 Debug Area에 해당 NONCODE 부분이 출력될 것이다.

 

 

 

CHALLENGE)

 

버튼을 클릭하면, 두 개의 주사위가 모두 4가 되도록 수정한다.

 

 

위 코드를 작성하여 테스트했을 때, 원하던 결과물을 얻을 수 있었다.

 

 

 

 

 

 

 

 

 

추가로,

 

https://dmsitter.tistory.com/88

https://dmsitter.tistory.com/89

 

명명 규칙과, swift에서 사용하는 print 함수에 대한 기본적인 내용도 정리했다.

 

 

---

 

 

배열(Array) 만들어서 사용하기

 

 

지금까지는 단순하게 특정 이미지로 변경했었는데, 버튼을 누를 때마다 이미지가 변경되도록 수정할 것이다.

viewDidLoad와 diceRollButtonPressed 코드블럭에서 수정했던 내용들을 모두 지운 다음,

배열을 만들어서 사용한다.

 

 

주사위 1~6까지의 6개의 이미지를 한 배열로 만든다.

 

swift에서 배열은 [ 1,2,3, ... ]와 같이 생성한다.

diceImageView1에 들어갈 이미지의 배열을 생성하고, 사용해보았다.

 

diceImageView1.image = [image literal, ...][5]

 

라는 코드를 입력했는데, 이 때 [ image literal, ...] 부분이 배열을 의미하고,

뒤에 있는 [5]는 해당 배열의 5번 index에 있는 값을 의미한다.

프로그래밍에서 배열의 인덱스는 0부터 시작해서 9까지..의 순서로 카운트하기 때문에

위의 배열에서 5번 인덱스는 6개의 눈금이 있는 주사위이다.

 

이렇게 인덱스를 직접 지정하지 않고,

버튼을 누를 때마다  주사위가 생성되도록 하기 위해 새로운 변수를 선언한다.

 

 

 

IBOutlet의 아래에 새로운 변수를 만들었다.

 

swift에서 변수는 

var name = ~와 같이 만든다.

 

 

challenge)

버튼을 누를 때마다 왼쪽 주사위는 +1, 오른쪽 주사위는 -1이 되도록 만든다.

단,

처음 버튼을 눌렀을 때 왼쪽 주사위는 2, 오른쪽 주사위는 6이 되도록 하며

최종적으로 왼쪽 주사위가 6, 오른쪽 주사위가 2가 되었을 때 에러가 발생한다.

 

 

 

위 코드로 도전과제를 해결했다.

 

 

내일은 아마도 배열과 변수에 대해 정리하고, 랜덤으로 주사위가 생성되도록 어플을 만들 것이다.