[iOS] 할 일 체크리스트 앱 만들기! To do list

새로운 프로젝트를 만들어주자. 이름은 ToDoList. 딱히 설정해야할 것은 없다.

 

 

스토리보드에 기존에 있던 뷰 컨트롤러는 삭제해주고(ViewController.swift 파일도 함께 삭제) 테이블 뷰를 끌어온다.

 

 

테이블 뷰를 선택한 상태에서 Editor - Embed in - Navigation Controller을 통해 네비게이션 컨트롤러를 추가한다.

 

 

기존에 스토리보드에 있던 뷰 컨트롤러를 삭제해서 entry point가 없으니 지정해주자.

네비게이션 컨트롤러를 선택하고 attributes inspector에서 View Controller 영역에서 Is Initial View Controller 체크체크!

 

 

네비게이션 바 영역에 Bar Button Item을 추가해주자.

 

 

이 버튼을 선택하고 인스펙터의 Bar Button Item 영역에서 System Item 부분을 Add로 바꾸자. 그러면 자동으로 버튼의 모양이 +로 바뀐다.

 

 

뷰 컨트롤러를 두 개 추가해주고 모두 세그 연결을 해준다. 옵션은 Show!

 

 

Swift 파일 세 개를 만들어준다. 이름은 각각 TableViewController, AddViewController, DetailViewController

그리고 맞는 컨트롤러와 스위프트 파일을 각각 연결해준다.

 

새로운 파일을 만들 때는, Cocoa Touch Class를 사용하고

TableViewController의 부모 클래스는 UITableCiewController, AddViewController은 UIViewController, DetailViewController은 UIVIewController로 설정한다.

 

 

추가한 뷰 컨트롤러 중 하나는 목록 추가 화면으로 사용할 것이다. 네비게이션 영역의 타이틀을 Add로 바꿔주고, 텍스트필드와 버튼을 추가한다. 버튼의 이름은 Add로 변경한다

 

 

남은 뷰 컨트롤러는 목록에서 셀을 하나 클릭하면 그 셀의 상세 정보를 확인할 수 있는 화면으로 이동하는데, 그 화면을 위한 컨트롤리이다. 네비게이션 아이템의 이름을 Detail로 바꿔주고, 라벨을 하나 추가한다.

 

 

목록이 표시되는 뷰 컨트롤러이다. 이름을 To Do List로 표시하였고, 프로토타입 셀의 ID를 myCell이라는 이름으로 바꿔준다.

 

 

다음으로는, TableViewController.swift에서 TodoListView의 테이블뷰를 아웃렛으로 만들어준다. 변수명은 toDoListView로 했다. 자료명은 UITableView이다.

 

다음은 AddViewController.swift에서 텍스트필드와, Add 버튼을 코드와 같이 작업한다.

 

 

다음은 DetailViewController.swift에 라벨 아웃렛 지정을 해준다.

 

 

TableViewController에서 클래스 외부에 items와 itemsImageFile이라는 변수를 만들고 배열을 넣어준다.

해당 작업 전, 앱에서 사용할 사진(아이콘)을 폴더에 먼저 넣어준다. 나는 Assets.xcassets 폴더에 넣어주었다.

 

 

numberOfSections 메서드를 활성화해준다. 해당 앱에서는 섹션은 하나만 필요하기에 return 1이다.

 

tableView의 numberOfRowsInSection메서드는 섹션 하나에 몇 개의 행이 들어가는 지를 묻는 것이다. 위에서 설정한 배열의 개수가 이 행의 개수와 같게 해야하기 때문에 return items.count이다. (items라는 배열의 수(count)

 

 

이제 cellForRowAt 메서드를 활성화하자! 이 메서드는 각 행의 내용을 리턴한다. 행의 개수 만큼 반복적으로 호출이 된다.

withIdentifier은 myCell, 그리고 cell은 위 코드처럼 지정해준다.

아까 설정한 배열을 cell에 보여주기 위한 과정이다.

 

 

중간점검!

여기까지 하면 스토리보드에서는 왼쪽 처럼 보이지만, 시뮬레이터에서 확인하면 오른쪽 화면 처럼 배열의 내용들이 잘 출력되는 것을 볼 수 있다.

 

 

다음은 삭제를 가능하게 해주는 코드이다.

items와 itemsImageFile을 모두 삭제할 수 있게 코드 작성을 하며, fade 방식 -> 스와이프를 통해서 삭제를 할 수 있게 해준다.

이렇게까지 하면 삭제 문구가 한글이 아닌 "delete" 영어로 나와서 titleForDeleteConfirmationButtonForRowAt 메서드를 작성해주어야 한다.

 

 

스와이프를 해서 삭제할 수 있다.

 

 

다음은 네비게이션 바에 edit 버튼을 넣어 목록을 수정할 수있게 해주자.

viewDidLoad 함수에 위 사진처럼 코드를 한 줄 입력해준다.

오른쪽에 Add 버튼을 삽입했으므로 LeftBarButtomItem으로 한다.

 

 

밑에서 moveRowAt 메서드를 사용할 차례이다.

이 메서드는 수정 화면에서 목록의 각 셀에 오른쪽 버튼으로 스와이프를 하여 순서를 변경할 수 있게 한다.

 

 

이렇게 삭제와 순서 변경이 가능하다.

 

 

다음으로는 AddViewController에서 목록 추가를 할 수 있는 기능을 구현하자.

버튼 액션에 코드를 작성해준다.

 

또한 TableViewController에 가서 이렇게 viewWillAppear이라는 메서드를 작성하는데, 이는 해당 뷰에 접근(?)할 때 마다 리로드를 실행하여 새롭게 업데이트된 뷰를 보여준다.

 

 

여기까지 진행하면 애드 뷰에서 데이터를 하나 입력하면 To Do List에 자동으로 그 값이 보여진다.

 

 

다음으로는 리스트에서 셀을 하나 선택하면 상세정보로 이동하는데, 그 상세정보(Detail) 뷰를 작업할 것이다.

테이블 뷰와 디테일 뷰를 연결해주는 segue의 id를 sgDetail로 설정한다.

 

 

DetailViewController에서 클래스 내부에 이렇게 코드를 작성해준다.

 

 

이후 TableViewController에서 prepare 메서드를 작성한다. 여기에서 segue.identifier은 sgDetail로 설정한다.

 

 

이렇게 목록에서 셀을 하나 클릭하면 detail view 화면으로 이동하는 것을 확인할 수 있다!

 

 

 

 

[참고] Do it! 스위프트로 아이폰 앱 만들기