[IOS/Swift]Label과 Button을 만들고 함수와 연결하기

Layout을 구성하기전 참고사항

Android에서 다양한 기기에 대해서 layout을 지원하기위해 xml을 분리하는 것 처럼 IOS에서도 다양한 화면에  view들이 잘 나오게 하기 위해서 AutoLayout을 지원함.

AutoLayout: 다양한 화면 사이즈에서 화면이 잘 보여지도록 Constraints(제약사항)를 이용하여 자동으로 layout을 변경해 주는것

Constraints

- Align의 경우 화면의 가운데, 또는 객체간의 배열을 만들고 싶을때 사용

- Pin은 화면상의 특정 기준을 중심으로 고정하여 상하좌우 위치를 정할때 사용한다. 

예제의 Layout 구성 : Title 용 label / Color 변경을 위한 버튼 4개 

아이폰 6에서 보이는 모습

Constraints의 Align을 이용하여 화면을 구성  

White 버튼을 View의 정 가운데 위치하게 두고 layout을 잡음

(orizontally in container = 0, vertically in container  = 0)  

vertically in container 값이 0이면 화면의 세로축 정 가운데를 의미한다.

vertically in container 값이 -100이면 화면의 세로축 정 가운데에서 위로 100에 위치하는 것을 의미한다. (+100은 정 가운데에서 아래로 100인 지점을 의미)

위의 화면을 구성하기 위해 실제로 추가된 Constraints 목록

스토리 보드에서 구성한 내용이 Assistant Editor의 Preview에서 보여지는 모습 

(하단의 + 버튼을 이용 다양한 사이즈에서 모습을 볼 수 있다.)

Action Event 작성

자동으로 생성되어진 ViewController.swift 파일에 다음 함수를 작성했다.

- changeBackgroundToBlack: 검정색으로 배경을 변경 

- changeBackgroundToWhite: 흰색으로 배경을 변경

- changeBackgroundToBlue: 파란색으로 배경을 변경 

이벤트 연결하는 방법

해당 view를 오른쪽 클릭하여 원하는 event에 + 버튼을 클릭 > Assistant Editor에서 원하는 함수를 클릭 > 파란색 선처럼 연결선이 보이고 해당  view와 함수가 연결된다. 

또다른 방법으로는 Storyboard에서 원하는 view를 클릭 > Show the connections instpector를 클릭하여 해당 view에 연결된 함수를 확인 하고 추가, 삭제 할 수 있다.