[iOS] 메모 앱 만들기 D-7 (storyboard를 활용한 UI 화면 그리기)

2024년 3월 30일 토요일

 

오늘은 튜터님의 예제풀이를 순서대로 하나씩 따라가며,

과제를 통해 배워야 할 내용들에 대해 기록합니다. 홧팅이닷! ! 

---

 

#1. new file 생성

TodoListViewController로 네이밍을 바꾸고, main.storyboard의 inspector 영역의 custom class 의 class 이름을 TodoListViewController로 바꿔준다. 

 

TodoListViewController는 UIViewController 를 상속받고 있다.

 

 

 

#2. object library에서 1) button과 2) table view 추가 

 

1) button의 constraints는 위와 좌측의 margins만 0과 16으로 걸어주고, "추가하기"로 contents를 바꿔준다.

 

2) table view 는 좌하단의 이미지 아이콘에서 constrain을 걸 수도 있지만 좌측의 리스트에서 table view 를 ctrl 클릭하고 추가하기 button에 drag and drop 해서 상단 constrain을 설정할 수도 있다.

 

vertical spacing을 선택하면 추가하기 button과 table view 사이의 수직적 간격에 대한 제약이 설정되는데, inspector 영역에서 vertical 영역에 Top Space to : 추가하기 / Equals: 47 로 설정된 내용을 볼 수 있다.

 

여기서 constant 를 0으로 수정하여 table view 위쪽 영역의 contrain 설정을 마친다. 

 

table view 상단의 제약을 마친 후, 다시 좌측 리스트에 있는 table view를 safe area로 drag and drop하여 아래와 같이 leading space, trailing space, bottom space 에 대한 나머지 제약들을 설정한다. (shift 버튼을 누르면 다중 클릭이 가능하다.*) 아래의 오른쪽 이미지처럼 파란 선으로 설정된 상태라면  모든 constrains가 충족되었다는 의미로, 이제 table view를 그리기 위한 제약이 충분해졌다.

 

마지막으로 하단의 bottom alignment constraint에서 safe area bottom과의 constant를 0으로 설정하여 화면에서 보여지는 safe area와 table view의 하단의 제약을 동일하게 맞춰 주었다. (수정 전에는 111 이었다. 111 -> 0 )

 

 

 

#3. table view cell 추가하기

 

object library에서 table view cell 을 추가한 후, 새로운 파일을 생성하여 마찬가지로 UIView Controller를 상속받는 TodoTableViewCellController 를 생성해준다. 

 

그리고 inspector 영역에서 custom class 이름을 TodoTableViewCell로 수정해준다. 이러한 설정을 통해 앞으로 이 프로토 타입 셀에 그려지는 화면은 UITableViewCell 이 아닌, TodoTableViewCell에서 만들어 주게 된다.

 

object library에서 label을 선택하여 셀 안에 적당히 추가해 준 뒤, content view에 drag and drop한 후, 아래와 같이 leading space와 center vertical를 다중 선택하여 auto layout을 설정해 준다. 

 

동일하게 object library에서 switch를 우측에 적당히 추가한 후, content view에 drag and drop하고, 이번에는 leading space가 아닌 trailing space 와 ceter vertical로 layout을 설정해 준다.

 

label font 사이즈를 30으로 높여주고, label과 swich 사이의 수평거리 horizontal space를 설정하여,

 

lable과 switch, 두 오브젝트 사이의 노란 경고선이 사라지도록 해준다. (새로고침을 하면 파란 선으로 변한다)

 

 

 

#4. 취소선을 위한 object, view 추가하고 layout 설정하기

 

object labrary에서 아래의 view object를 선택하여 content view 아래로 추가해 준 뒤,

 

label의 시작과 끝, 즉 가로의 길이를 딱 맞추기 위해 leading 과 trailing을 설정하고 수직으로 센터 정렬을 맞추기 위해 center vertically도 선택해 준다. + Add New Constrains에서 Height 을 1로 설정해 준다. 

 

※ 중간에 Add New Constrains 영역이 활성화 되지 않아서 애를 먹었는데, 이럴 땐 우측 사이드바의 Show The Size Inspector에서 Layout 항목이 Autoresizing Mask로 되어있는 지 확인 후 Inferred 값으로 변경해주면 Add New Constrains 영역을 다시 활성화 시킬 수 있다. 이거 완전 개꿀팁이다.. 밑줄 쫙.

Add New Constrains 활성화 시크릿..

 

view의 background 컬러를 검은색으로 설정해준 후, 취소선의 역할임을 감안하여 일단 hidden 처리한다. (스토리보드에서는 보여지지만 실제 화면에서는 보이지 않게 된다.)

 

취소선 역할의 view의 가로 끝단, 즉 view의 trailing이 switch의 leading과 최소 10만큼의 space를 갖도록 제약을 바꾸어 주었는데, 방법은 좌측 리스트에서 label을 선택하고, inspector 영역의 삼각자 부분 제약 상세에서, Trailing Space to : Swich Equals 10인 상태를 edit 하여 

 

Equal 이 아닌 Greater Than or Equal 로 바꾼다. 그러면

 

이렇게 Equrls 가  >= 로 변경된다. 이로써 label 오른쪽 가로 좌표 끝(trailing)과 switch의 왼쪽 시작점(leading) 사이의 relation을 변경해 주었다. 

 

 

여기까지 하면 일단 UI 화면에 보여지는 녀석들은 모두 그려준 준 셈이다.

 

이제 to do list에 들어오는 데이터 구현 기능을 붙여준다.. 다음 편에서 계속..