[iOS] datePickerCell만들기

WWDC2013에 datePickerCell 시연이 나왔었고,

애플에도 샘플 코드가 등장하지만

컨셉만 가지고 swift3로 구현해 보았습니다.

이 컨셉을 가지고 일반 picker와도 연동이 가능하고 일반 picker의 section수 변경도 할 수 있습니다.

위와 같이 클릭하면 pickerCell이 열리고 선택하면 라벨에 해당 날짜가 채워지는 구조로 되어있습니다.

DatePickerTest.zip

위의 샘플 프로젝트로 확인할 수 있습니다.

먼저 테이블 뷰를 만들고

datePicker가 들어갈 셀을 만들어 줍니다.

클래스는 datePicker를 가지는 cell을 하나 만들어서 추가해주면됩니다.

첨부한 파일을 쓸 경우 datePicker객체와 action2가지를 스토리 보드 상의 datePicker와 연결해 줍시다.

생성한 테이블뷰의 delegate와 datasouce를 해당 viewController에 연결한 뒤 아래와 같이 구현해주면 됩니다.

ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, DatePickerCellDelegate

뷰 컨트롤러 옆에 사용할 delegate 및 dataSource를 먼저 선언해주시고.

아래 함수들을 구현하시면 됩니다.

// MARK: - tableviewDataSource

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

        return 3 // 애니메이션을 보여주기 위해 셀을 3개 생성

    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell:UITableViewCell

        switch indexPath.row {

        case 1: // 가운데 셀은 date picker뷰

            cell = tableView.dequeueReusableCell(withIdentifier: "datePickerCell", for: indexPath) as! DatePickerCell

            (cell as! DatePickerCell).delegate = self

            break

        default:

            cell = tableView.dequeueReusableCell(withIdentifier: "defaultCell", for: indexPath)

            break

        }

        return cell

    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

        switch indexPath.row {

        case 1: // 열렸을때 picker뷰의 높이는 160, 닫혔을때는 0으로 셋팅

            return self.isOpenPickerView ?  self.pickerViewHeight : 0

        default:

            return self.defaultCellHeight

        }

    }

    

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        switch indexPath.row {

        case 0: // 첫번째 셀을 눌렀을 때 pickerView가 열리고 닫히게 설정

            self.isOpenPickerView = !self.isOpenPickerView

            self.tableView.reloadRows(at:[IndexPath(row: indexPath.row+1, section: 0)] , with:.fade) // 애니메이션을 이용해서 자연스럽게 열리고 닫히는 것을 표현

            break

        default:

            break

        }

    }

    // MARK: - DatePickerCellDelegate

    func datePickerCell(datePickerCell: DatePickerCell, datePicked date: Date) {

        // date picker를 선택했을때 선택한 날짜를 0번셀에 표시 

        let cell = self.tableView.cellForRow(at: IndexPath(row: 0, section: 0))

        let dateFormatter = DateFormatter()

        dateFormatter.dateFormat = "yyyy.MM.dd"

        dateFormatter.string(from: date)

        (cell as! TableViewCell).label.text = dateFormatter.string(from: date)

    }