[iOS/Swift3.0] iOS TodoList App 만들기 2 (객체 연결)

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. 클래스 생성

일단 각 ViewController는 하나의 클래스와 연결되야 합니다 처음에 있던 VC는 ViewController.swift와 연결되어있습니다 하지만 두번째로 생성한 VC는 연결되어있지 않기 때문에 새로 파일을 생성해 연결하도록 하겠습니다

Command+N > Cocoa Touch Class

Subclass of : UIViewController선택

적절한 Class명을 입력해줍니다. 저는 AddTodoViewController라고 하겠습니다

할일 등록 vc를 선택한 후 identity inspector로 이동합니다 Class에 AddTodoViewController를 입력하면 vc와 클래스 연결이 끝났습니다

1. 객체 연결 먼저 리스트 화면의 객체를 연결하겠습니다 Storyboard에서 Assistance Editor모드로 변경하여 storyboard와 소스코드를 보도록 합니다

IB(interface builder)에서 tableview를 선택해 마우스 드래그로 class에 위치시킵니다 그럼 사진과 같은 팝업이 뜨게됩니다 적절한 이름을 입력해주세요

navigation bar에 있는 Edit버튼도 동일하게 해줍니다

이제 TableView에 데이터를 출력해보도록 하겠습니다

1. TableView 데이터 출력

먼저 tableview에 데이터를 넣기 위해서는 UITableViewDataSource 프로토콜이 필요합니다 이 프로토콜에는 필수적으로 구현해야하는 required 메소드가 2개 있습니다 또 표시되는 모습에 대한 제어, 행 추가 삭제 등의 역할을 하는 UITableViewDelegate가 프로토콜이 필요합니다

클래스에 아래와 같이 작성한 뒤 tableview와 datasource, delegate를 연결해주도록 합니다 




class TodoListViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{}




override func viewDidLoad() {
  super.viewDidLoad()
 
  todoListTableView.delegate = self
  todoListTableView.dataSource = self
}

// n번째 섹션의 m번째 row를 그리는데 필요한 cell을 반환하는 메소드입니다
func tableView(UITableView, cellForRowAt: IndexPath)
Asks the data source for a cell to insert in a particular location of the table view.
 
// n번째 섹션에 몇개의 row가 있는지 반환하는 함수입니다
func tableView(UITableView, numberOfRowsInSection: Int)
Tells the data source to return the number of rows in a given section of a table view.

tableview는 한 줄에 하나의 row가 보여지고 row를 묶는 단위로 섹션을 사용합니다 기본으로 섹션은 1개가 존재합니다 우선 샘플로 보여주기 위해 20개 row를 보여주도록 하겠습니다

해당 함수는 Int형을 반환하므로 return 20을 해주면 됩니다

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 20
}

row 갯수를 해줬으니 cell를 표시해야겠네요 아래 함수는 row를 그리는데 필요한 cell을 반환합니다 테이블 뷰에서 어떤 cell이 화면에 표시되기 직전에 실행됩니다. indexPath는 셀의 위치를 표현하기 위한 일종의 인덱스로 섹션과 row속성을 정의하고 있습니다 일단 cell만 연결한 뒤 실행해보겠습니다

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
 
    return cell
}

tableview를 이용하는 작업이 완료 되었으니 이제 할일 등록 화면의 객체를 연결하겠습니다 앞서 tableview를 했던 것 처럼 4개의 객체를 연결해주세요 Done, Cancel 버튼은 Action으로 연결해줍니다

tableview를 textfield처럼 이쁘게 보이게 하기 위해서 몇가지 코딩을 하겠습니다

override func viewDidLoad() {
        super.viewDidLoad()
 
        // Do any additional setup after loading the view.
        contentTextView.layer.borderColor = UIColor.gray.cgColor  // 테두리 색상
        contentTextView.layer.borderWidth = 0.3 // 테두리 두께
        contentTextView.layer.cornerRadius = 2.0  // 모서리 둥글게
        contentTextView.clipsToBounds = true  //
    }

Done, Cancel버튼이 클릭되면 리스트 화면으로 돌아가야 하기때문에 현재 표시된 등록 화면을 pop해야합니다 등록한 @Action 메소드에 self.navigationController?.popViewController(animated: true)를 작성합니다 그럼 현재 화면이 pop되고 리스트 화면이 보이게 됩니다

객체 연결이 끝났으니 이제 본격적으로 할일 등록 기능을 만들어보도록 하겠습니다🏈