Swift - Create UI

How to Create UI

storyboard 의 + 버튼으로 source들을 추가할 수 있다.

Story Board 에서 visual 요소들이 어떻게 배치되는지, 구성되는지 등을 한눈에 볼 수 있다.

 

play 버튼 : 앱에서 어떻게 사용되는지 동작 확인 가능(bulid succeeded 가 뜨고 시뮬레이터로 작동)

하단의 view as : Device별, 다크모드 화이트모드별, 가로모드 혹은 세로모드별로 어떻게 구성되는지 쉽게 볼 수 ⭕️

Connect UI & Code

✨ screen -> view controllers

앱에서 한 페이지에서 다른페이지로 이동 = 하나의 view controller에서 다른 view controller로 이동

 

viewController에서 조작 후 빌드 버튼을 누르면 시뮬레이터에 해당 사항이 적용되서 나타남.

✏️ 스토리보드의 요소를 viewController의 코드와 연결짓고 controll+요소 드래그를 이용 (옆의 코드창에)

      (옆의 창의 코드를 띄우려면 adjust editor options -> assistant를 눌러서 띄우면 된다 = 이런 비슷한 버튼임)

이후 connection, Name, Type등을 설정할 수 있는데 Name작성시 camelcase 이용할것

스토리보드에서 요소를 누른 후 우측 탭중 맨 오른쪽의 동그라미로 (Show the connections inspector)

view Controller과의 연결을 볼 수 ⭕️

 

⚠️ 이름을 변경해서 view Controller와 연결이 정상적❌ -> controll+드래그로 다시 Name을 짓는것을 추천

 

Adding Constraints to Design

 👉🏻 Action 배우기

하단의 align을 이용해 수직, 수평정렬을 쉽게 할 수 있음

controll+드래그로 다른요소 : equal width/height, vertical Spacing등 설정 가능

또한 우측의 show the size inspector을 눌러 위에서 조정했던 것들을 자세히 조정 가능 (예- equal height등)

 

Label의 경우 view Controller에서 연결을 Outlet과 했다면 button의 경우 Action과 연결

 Outlet is a way to represent something in code => Outlet change the visual effect of something

 Action make the app interactive => can communicate with app

Swift Conditional Statement

 ✨아래처럼 조건문을 이용

var age = -5;

if age == 18{
	print("You are able to get driver license");
} else {
	print("You are too young to get license");
}