20210601 간단한 어플 만들기, Auto Layout & Responsive UI -1

 

오늘은 다른 도움을 받지 않고

skeleton project를 가져와서 직접 어플을 만들어본다.

 

이번에 만들어 볼 어플은 'magic 8 ball'이라는 이름의 간단한 선택을 도와주는 어플이다.

 

먼저, Main.storyboard에서 어플을 디자인한다.

 

 

조촐한.. UI를 만들고....

 

ViewController.swift 에서 imageView에 대한 IBOutlet과, button에 대한 IBAction을 만들어준다.

IBAction을 만들 때는 항상 Connection, Type, Event를 확인한다.

 

제공된 asset에서 이미지파일 여러 가지를 배열에 넣어주고,

버튼을 누를 때마다 랜덤하게 이미지가 뜨도록 코드를 작성해주면 끝

 

 

 

어제까지 만들었던 어플을 그대로 디자인만 바꿔서 만든 셈이다.

 

 

---

 

다음 섹션으로 넘어가서,

Auto Layout과, 반응형 UI에 대해 공부한다.

 

 

화면의 비율이 달라진다거나, 회전할 때, 다른 기기로 사용할 때마다 UI의 각 요소들이 레이아웃(배치)되는 것에 대한 내용이다.

 

 

1. 수동으로 수정하는 방법

xcode에서 .storyboard 파일을 선택한 뒤 

화면 아래에 있는 버튼을 눌러주면

 

 

기기의 종류(화면의 가로x세로 비율)나 라이트/다크모드, 방향을 각각 수동으로 선택해서 UI를 수정할 수 있다.

 

 

 

내일은 자동적으로 UI element들의 위치를 설정하는 방법을 공부할 것이다.