[iOS/Swift3.0] iOS TodoList App 만들기 1 (화면 설계)

Let's make iOS TodoList App (TodoList App 만들기)

그동안 배운 것을 활용해보기 위해 할일을 적고 체크하는 TodoList 앱을 만들어보기로 합니다.

• 구현 기능

  • Todo List 조회
  • Todo 등록
  • Todo 삭제
  • Todo 완료 체크

• 사용할 것

  • Navigation Controller
  • UIBarButtonItem
  • Auto Layout
  • UserDefaults (데이터 영구 저장)
  • UITableView (리스트 출력)
  • UITextField, UITextView (Todo 등록)

---

1. 화면 구현

[TodoList] 앱은 두개의 화면을 가집니다 첫번째는 리스트 화면, 두번째는 등록화면입니다

먼저 Navigation Controller를 등록하기 위해 화면에 위치한 ViewController를 선택한 뒤 메뉴>Editor>Embed in>Navigation Controller를 선택합니다

그럼 View Controller앞에 NC가 생기고 VC상단에 Navigation Bar가 생긴 것을 확인할 수 있습니다

먼저 VC에 TableView를 배치하고 Pin클릭, 화면에 꽉차도록 Constraints에 모두 0을 줍니다, margin은 꼭 체크 해제를 하세요 안그러면 여백이 생깁니다

이제 tableview Cell을 앞서 배치한 tableview에 가져다 놓으세요 그럼 사진과같이 cell이 만들어집니다. 이 cell에는 데이터가 위치하게 됩니다

이번 프로젝트에서는 custom cell을 사용하지않고 기본으로 제공해주는 것을 사용합니다.

cell을 선택한 뒤 inspector에서 'Style'을 Subtitle로 설정해주세요 그럼 Title과 Subtitle로 구성된 cell이 나오게됩니다 저는 기타 필요하다고 생각되는 속성을 inspector에서 설정해줍니다

vc에서 cell을 가져오기 위해선 id값이 필요한데 그것은 identifier에 정의해줍니다. 저는 cell이라고 적겠습니다

이제 리스트는 설계가 끝났으니 Todo를 등록하고 삭제할 수 있도록 버튼을 만들겠습니다. 이 버튼은 navigation bar에 위치하게됩니다

Bar Button Item을 찾은 뒤 navigation bar 양쪽에 위치시켜주세요 위치시킨 버튼을 선택한 뒤 inspector에서 System Item에서 각각 Edit와 Add를 선택하여줍니다

두번째, Todo 등록화면 Todo 등록화면은 4개의 item을 가지고 있습니다. 제목을 작성할 UITextField, 세부 내용을 작성할 UITextView, 작성 완료 시 선택할 Done버튼, 작성을 취소할 Cancel버튼입니다

먼저 navigation bar에 앞서 했던 것 처럼 버튼 두개를 배치시킵니다

다음으로 textfield를 화면에 배치시키고 pin 메뉴를 선택한 뒤 Constraints를 부여합니다, bottom은 textview 오토레이아웃을 설정하면 자동으로 설정됩니다 

이제 세부 내용을 입력할 수 있도록 textview를 textfield 아래에 위치시킵니다 그다음 textfield에 했던 것 처럼 constraints를 부여합니다

자 근데 textview에 갑자기 빨간 선이 생겼습니다.. 

왜 그러는지 간단하게 AutoLayout에 대해 알아보겠습니다

---

[AutoLayout]

앞에서 textfield와 textview를 배치할 때 auto layout을 사용했습니다. 요즘은 디바이스가 일정한 화면이 아닌 사이즈가 다른 se, plus, x모델이 있기 때문에 따로 view의 사이즈와 위치를 정해주지 않으면 디바이스 화면 크기에 따라서 레이아웃이 달라져버립니다

그래서 오토레이아웃을 사용하는데 오토레이아웃은 객체의 width, height, x, y 4개의 제약조건이 필요합니다

좀전에 textview에서는 left, right, top에 제약조건을 부여하였습니다 그런데 textview는 글자 line 수에 따라 높이가 변할 수 있기 때문에 auto layout이 textview가 얼만큼의 높이가 필요한 것인지 추측할 수 없기 때문에 height에서 오류가 발생하게 됩니다

textview안에서 마우스를 드래그하거나 pin버튼을 클릭한 후 height를 지정하겠습니다 거기서 height를 선택하면 textview는 현재 화면에 배치된 크기만큼의 높이를 가지게됩니다

textfield에서 오류가 발생하지 않은 이유는 textfield는 한 줄의 크기만 가지고 있기 때문에 height가 어느 정도의 크기를 갖는지 추측할 수 있어 오류가 발생하지 않았습니다

auto layout을 사용하여 뷰를 배치시키고 나면 별도의 처리없이 모든 디바이스에서 동일한 레이아웃을 볼 수 있습니다

---

1. Segue 등록

리스트 화면에서 Add버튼 클릭 시 등록화면으로 이동할 수 있도록 segue를 부여하겠습니다

Add버튼에서 마우스 드래그하여 등록화면 view에 위치시킵니다 화면에 뜬 팝업에서 show를 선택해주세요 그러면 +버튼 클릭 시 할일 등록 화면으로 이동하게됩니다

뷰를 모두 배치시켰으니 이제 클래스에 화면에 구현된 객체를 연결하겠습니다