swift로 table view안에 date picker 넣기

https://www.iosinsight.com/inline-uidatepicker-swift-uiviewcontroller/

Inline UIDatePicker In Swift With UIViewController | iOS Insight

 

https://github.com/lmacfadyen/InlineUIDatePickerSwift/blob/master/InlineUIDatePickerSwift/ViewController.swift

lmacfadyen/InlineUIDatePickerSwift

[Summary]

1. 이 예제는 UITabelViewController가 아니고, UIViewController를 쓴다

2. UIDatePicker을 두개 써서 시작시간이랑 끝시간을 지정한다

3. 두 시간 사이에는 반드시 15분의 텀이 있어야 하고 디폴트는 1시간으로 지정된다

4. UIDatePicker가 열렸다가 닫히는 구조이다. 이 예제에서는 MKMapView를 써서 밑을 구현했는데 나는 필요없는 기능이다!

 

 

1. 이 예제는 Single View Application으로 만들었다.

2. 스토리보드에 UITableView랑 UIStackView를 메인 UIView안에 넣는다.

3. table view는 dynamic prototypes를 2로 설정한다(?)

4. 하나의 prototype cell은 date picker을 위한거고, 나머지 하나는 열린 picker가 없을 때 날짜를 표현하기 위한거다.

5. UIStackView는 지도를 넣으려고 하는 것 같다. 나는 이 기능은 필요 없으니 패스!

 

 

Constraints with Constant equal to 0 are defined on the table view for leading, trailing, and top relative to the main UIView. For the stack view, leading, trailing and bottom constraints relative to the main UIView are defined also with Constantvalues of 0. One more is added for the stack view top, also relative to the main UIView. This one is set to a Constant of 0 to start, but in viewWillAppear, it will be updated to match the height of the table view, and then it will not change again. This means that once the table view is initially sized, the stack view will start vertically at the bottom of the table view, based on the table view’s height without open date pickers.

 

1.constraints를 constant equal to 0으로 define 해서 table view의 leading trailing으로 하고, 메인 UIView랑 top relative로 설정해라

2. 스택 뷰는 이케 해라~ 필요없으니까 안함~
3. viewWillAppear에서 원래 0인게 height of the table view랑 매치되게 업데이트 될거고, 이제 변하지 않을거다

4. -> table view가 처음에 sized되면, 스택뷰는 table view의 딱 bottom에서 시작될거고, table view의 height에 의해서 맞을거다~

 

이사람이 table view아랫쪽에 constrained relative로 하지 않은 이유는, date picker을 열었을 때 map이 줄어드는 것을 원치 않아서라고 한다.

 

main View의 background는 clear로 지정되어 있어야 하고, dateCell과 걔네 field들도 똑같다.

 

first prototype에서 Style은 right detail로 하면 constraint들이 필요없따

Identifier은 dateCell로 한다

 

second prototype은 Style Custom으로 남겨두고, UIDatepicker을 Content View 아래에 추가한다. constraint는 leading, trailing, top, bottom에 추가하고 value는 constant 0으로 한다. relative to margin ㄴㄴ

 

 

datePickerCell의 custom checkbox가 체크 되어있는지 확인하고, row height의 value는 216으로 한다. 

 

This one is based on inherent knowledge of the intrinsic content size of the UIDatePicker. When experimenting with not setting this value, various issues seem to occur. The UIDatePicker is one component that does not seem to lend itself well to dynamic sizing.

 

왜 이케 하냐면, UIDatePicker에 값 설정을 안해주면 많은 문제가 생겼기 때문이다. UIDatePicker은 dynamic sizing하기 힘든 아이라고 한다.

 

마지막으로, table View에 height constraint를 추가하고 value를 88로 한다. 수정할 계획이지만, 대충 정한거라고 한다. UITableView의 높이를 정하는 건 테이블 content의 크기를 고려한 다양한 방법들이 있지만, automatic dimensioning과 height constraint를 쓰는게 row size에 따라 크기를 더해가는것보다 더 선명하다고 판단했다고 한다.

 

date picker cell에 있는 date picker에 접근하기 위해서, 99라는 태그를 주자.

 

 

 

 

dateCell의 content view는 배경이 검은색이어야하고(이사람은 다크모드로 만듦), Title이랑 Detail Field는 흰색글자여야 한다.

 

리얼리티를 위해 ViewController을 UINavigationController에 넣는다고 한다?! Editior> Embed In> Navigation Controller

 

아...위에 상단 바를 위해서 만든거구나..(납득)

 

네비게이션 아이템은 상단 바가 있어야되니까, 상단 바의 Style을 Black으로 하고, Translucent를 해제했다.(translucent = 반투명) 나중에 코드에서 추가적으로  status bar match를 할 예정이라고 한다.

 

이케 하고 run하면 상단바밖에 안보인다. 안쪽을 하나도 안만들었기 때문!

 

 

 

 

 

 

 

여기부터 ViewController의 코드를 쓰는데 집중한다..

 

먼저 우리가 필요한 @IBOutlet들은, table view의 아웃렛, stack view의 top constraint, 그리고 table view의 높이 constraint가 필요하다고 한다.

 

@IBOutlet weak var tableView: UITableView!

@IBOutlet weak var stackTopConstraint: NSLayoutConstraint!

@IBOutlet weak var dateTableHeightConstraint: NSLayoutConstraint!

 

stack view top constraint는 stack view top이랑 table view bottom이랑 붙게 해주는 용도라고 한다.

 

 

 

다음에 할 일은, start랑 end time field를 나타내기 위한 class를 만들고, title이랑 date field를 명시해주는거라고 한다. 쵸큼 이따 이게 왜 필요한지 보일거라고 한다! 그리고 extension을 하나 추가해줄건데, start시간에서 간격을 설정해주는 기능이고 우리는 15분으로 할거라고 한다.

 

 

우리는 UITableViewController대신 UIViewController을 쓰고 있으므로, UITableViewDataSource랑 UITableViewDelegate 프로토콜을 채택한다.