[ Swift ] IBOulet & IBAction

이번에는 IBOulet과 IBAction에 대해서 확인을 해보도록 하자.

그전에 AutoLayout을 통해서 만들어놨던 내용에서 IBOulet과 IBAction을 이용해서 코드에서 UI에 접근을 할 수 있도록 진행해볼 예정이다.

 

< Assistant 진입 >

StoryBoard에서 Scene화면에서 상단의 정렬 버튼을 클릭하면 Assistant를 선택할 수 있다.

해당 내용을 선택할 경우에는 ViewController와 연결된 코드가 나타나게 된다.

 

< Custom Class 섹션 >

Storyboard의 Scene과 Swift ViewController에 연결하는 방법은 인스펙트 메뉴에서 가운데 메뉴를 선택한 다음에 CustomCalss 섹션에서 Class에 연결하고 싶은 ViewController의 이름을 적으면 된다.

현재는 그전에 AutoLayout을 지정한 ViewController 클래스가 연결이 되어 있는 것을 확인할 수 있다.

 

해당 ViewController Class에서 StoryBoard에서 구성한 UI에 접근할 수 있도록 만들어 보자.

 

< Oulet 변수 생성 >

StoryBoard에서 연결하고자 하는 UI를 선택한다. 필자의 경우에는 그전에 진행했던 빨간색 View를 선택했다.

이후에 마우스 왼쪽 클릭을 하고 해당 ViewController Class에 드래그앤드롭을 진행할 경우에 이렇게 insert Oulet or Oulet Collection 관련 내용이 표기가 된다. 마우스를 해제하면 이렇게 Oulet 변수를 설정하는 메뉴가 나타나는 것을 확인할 수 있다.

 

Oulet 변수는 StoryBoard에 등록한 UI Object에 접근하여 컨트롤하기 위해 변수에 바인딩한 UI Object 변수를 Oulet 변수라고 한다.

 

예를 들어 코드에서 UIView의 백그라운드 컬러를 변경하고 싶다면 IBOulet을 이용하여 ViewController Class에 Oulet 변수를 추가해줘야 코드상에서 UIView의 백그라운드 컬러를 변경할 수 있다.

 

해당 내용을 추가해보자.

 

< Oulet 변수 설정 >

필자의 경우에는 Name을 backgroundColor로 지정을 하였다. 그리고 Type은 기본적으로 StoryBoard에서 드래그앤 드롭을 한 내용을 그대로 가져온다. 해당 녀석을 가져오는 것이기 때문에 그대로 가져온다는 것으로 인식을 하면 될 것 같다.

 

그리고 아래에 Storage 내용이 나오는데 해당 내용은 Weak와 Strong으로 2가지가 있다.

Storage 내용은 항목에서 알수 있듯이 Storage 즉, 저장공간관련된 내용을 암시한다는 것을 알 수 있을 것이다.

 

Storage는 메모리 정책을 어떻게 진행할 것인지 알려주는 항목이다.

Strong으로 선언된 변수는 다른 곳에서 참조하고 있을 경우에 메모리에서 제거가 되지 않지만, Weak로 선언한 경우에는 다른 곳에서 참조하고 있더라도 시스템에서 임의적으로 메모리에서 제거할 수 있다.

 

Strong으로 선언할 경우에는 메모리 누수가 발생할 수도 있는 경우가 생길수도 있기 때문에 평상시라면 Weak로 선언을 해주는 것이 좋다.

 

< Oulet 변수가 생성된 내용 >

Connect Button을 클릭하게 되면 이렇게 입력한 내용의 Oulet변수가 생기는 것을 확인할 수 있다.

이 변수를 통해서 UIView의 내용을 코드에서 마음껏 변경할 수가 있다.

 

추가적으로 컬러 변경 버튼이 클릭되었을 경우에 UIView의 백그라운드 색상이 변경될 수 있도록 액션을 취하는 내용 또한 연결을 해보도록 하자.

 

 

UIView를 ViewController에 연결한 내용과 동일하게 드래그앤 드롭을 통해서 진행해주면 된다.

 

< Action 함수 정의 메뉴 >

하지만 UIView를 드래그앤드롭했을 때와는 다른 메뉴가 표출이 된다. Action함수를 지정할 수 있는 메뉴이다.

어떠한 동작을 할 수 있도록 정의하고 연결할 수 있도록 한다.

예를들어 해당 컬러번경 버튼이 클릭되었을 때에 UIView의 백그라운드 색상이 변경될 수 있도록 이벤트를 처리할 수 있도록 해주는 기능이라고 보면 될것 같다.

 

필자의 경우에는 색상을 변경하는 Button임으로 object 이름은 changeColorBtn으로 명칭을 했고, 연결은 액션 이벤트를 줌으로 Action항목을 선택하였다. 추가적으로 Type은 Any에서 UIButton으로 변경해준다.

Event는 해당 버튼의 이벤트를 나타내는 항목인데 필자의 경우에는 버튼이 클릭되었을 때에 발생하는 내용을 표기할 부분으로 Touch Up Inside 항목을 선택하였다.

 

Event 항목을 클릭하면 매우 다양한 이벤트를 설정할 수 있고, 예를 들어 Touch Drag Inside를 선택하게 된다면 버튼을 터치하고 드래그 했을 때에 액션 함수가 호출하게 된다는 점이다.

 

이렇게 서로 다양한 이벤트가 있음으로 참고하여 내용을 진행하면 좋을 것 같다.

 

Arguments 내용은 액션메시지를 보내는 객체 이벤트 핸들러를 설정하는 Sender로 지정을 하였다.

 

< changeColorBtn 함수 생성 >

Connect 버튼을 클릭할 경우에 이렇게 함수가 생성이 되는 것을 확인할 수 있다.

이렇게 액션 함수를 생성하게 되면 StoryBoard에서 생성한 내용에서 버튼이 클릭되었을 경우 ViewController에 연결된 changeColorBtn 함수가 호출이 되게 된다.

 

< 함수 내용 코드 작성 >

Button이 클릭되었을 경우에 UIColor가 gray로 변경되도록 내용을 작성해보았다.

이후에 빌드를 하여 에뮬레이터에서 내용을 확인해보면 이렇게 gray로 변경되는 것을 확인할 수 가 있다.

 

그럼 이제 생성을 각종 다양한 랜덤 색상으로 변경되도록 추가로 작성을 진행해보도록 하자.

 

< 랜덤 색상 변경 >

이렇게 필자의 경우 랜덤으로 색상이 변경될 수 있도록 진행을 해보았다.

 

코드 내용과 디버깅 창을 확인해보도록 하자.

 

< random color 변경 코드 >

필자의 경우 코드는 이렇게 작성을 하였다.

우선 getRandomColor라는 함수를 생성하였고, 반환으로는 UIColor를 반환하도록 생성을 하였다.

그리고 각각의 상수 red, green, blue를 선언하여 해당 값들이 CGFloat 값을 랜덤으로 가져오도록 진행을 하였다.

 

여기서 CGFloat란 애플 developer의 문서를 확인하여 설명을 해드린 다면...

 

CGFloat의 유형은 크기와 정밀도는 CPU 아키텍처에 따라 다릅니다. 64비트 CPU용으로 빌드할 때 CGFloat 유형은 해당 유형과 동일한 64비트 IEEE 배정밀도 부동 소수점 Double유형입니다. 32비트 CPU용으로 빌드할 때 CGFloat 유형은 해당 유형과 동일한 32비트 IEEE 단정밀도 부동 소수점 Float유형입니다.

 

이렇게 친절하게 설명이 되어있지만... 그냥 쉽게 말하면 각 PC의 상황에 맞게 알아서 잘 사용할 수 있도록 해주는 좀더 좋은 Float라고 생각하면 된다.

 

자 여기서... 앞에 기초 문법 내용들을 까먹은 분들이라면... 지금이라도 다시 복습하고 넘어오도록 하자.

 

그리고 CGFloat 형태를 출력하기 위해 String 으로 형변환을 진행하였고, 각 함수가 호출될때 마다 console창에 항목들이 출력될 수 있도록 print 함수의 내용을 작성하였다.

 

이렇게 랜덤으로 rgb 값을 가져와서 색상을 계속적으로 랜덤으로 변경할 수 있도록 진행을 해보았다.

 

참고로 필자도 Swift 쪽은.. 초보 개발자이기때문에 소스 코드가 이상한 경우에는 내용을 댓글로 달아준다면... 공부에 도움이 될 듯 싶다.

 

자 오늘은 무튼 이렇게 Oulet 변수와 Action 함수를 이용하면 코드에서 UI에 접근이 가능하다는 것을 알아보았다.

 

Button이나 각종 기능구현에 필수임으로... 좀더 복습이 필요할것 같다. 다양하게 해봐야겠다.