3. Making Editable Views

[NEULiee]

• [x] Getting Ready for Editing
• [x] Managing Content Views
• [x] Using Content Views
• [x] Editing Reminders

Getting Ready for Editing

[NEULiee]

Getting Ready for Editing

Learned

1. Create Sections for an Editing Mode

   • Collection view를 [title, date, notes] Section 세개로 나누었고 Section 을 Int, Hashable 을 따르는 enum으로 선언하였습니다.
   • isEditing 이란?
     • UIViewController 의 instance property
     • A Boolean value indicating whether the view controller currently allows the user to edit the view contents.
     • user가 view를 현재 편집할 수 있는지 알려주는 Bool 값

2. Configure the View and Editing Modes

   • view 모드, editing 모드 둘 다 지원하도록 viewing & editing snapshots 의 분리된 Snapshot 을 생성합니다. (+ 별도의 cell configuration) 같은 view controller 에서 생성..?

3. Add an Edit Button

   • editButtonItem property
   • setEditing(_:animated:)

4. Show Headers in Editing Mode

   • UIKit에서는 기본적으로 collection view에 헤더가 없다.
   • Collection view에 헤더를 추가하는 두가지 방법
     1. 찾기
     2. 찾기

Quiz.1 Which of the following is NOT true about headers in a UICollectionView?

TRUE

• Headers are disabled by default
• You can include a supplementary data array containing your header titles.
• You can treat the first item in the section data array as the header title.

FALSE

• You can provide a dictionary of sections with a header defined as a key and an array of items for that section defined as the value. Although you can use a dictionary that stores your model data to set up a custom data structure, collection views don't use this method for providing header titles. collection view는 dictionary 형태로 값을 주지 않는다.

[NEULiee]

Managing Content Views

Learned

커스텀 Content View

• UIContentConfiguration

• didSet

  • The didSet observer reconfigures the view every time the configuration — including the reminder that it contains — changes, ensuring that the view always represents the updated model data.
  • 어떠한 값이 변경된 직후에 호출된다.

• modern content view

iOS14 부터 tableView, collectionView 에서 content configuration 를 사용해서 내용을 표시하는 것을 modern cell configuration이라고 하는 것 같다.

[NEULiee]

Using Content Views

Learned

1. Extract Configuration Methods ( cell 구성을 분리한다 )

   • UIListContentConfiguration 을 반환하는 함수로 추출

2. Create a Reusable Layout Function

   • top, leading, trailing, and bottom
   • translatesAutoresizingMaskIntoConstraints

3. Create a Custom View with a Text Field

   • UIView의 intrinsicContentSize 함수
     • 본질적인 컨텐츠크기 ex) label 의 width나 height를 지정해주지 않아도 오류가 발생하지않는다.
   • UITextField.clearButtonMode = .whileEditing -> 편집중에 보여준다.
     • UITextField.ViewMode 를 설정해주면 clear button이 언제 보여줄지 설정해준다.
     • clearButton

4. Conform to the Content View Protocol

   • UIContentView protocol
     • 이 프로토콜을 채택하면 view가 configuration 내에서 정의한 contents 와 style을 렌더링 한다는 신호

5. Complete the Content View

   • 슬슬 configure 의 늪에 빠져서 앞이 안보이는중
   • text가 업데이트되면 다른 view에서도 업데이트 해줘야한다는 말 같은데....

6. Display the Content View

   • 편집할 수 있는 title을 편집창에 넣어준다.

7. Create Content Views for the Date and Notes

   • 타이틀과 같은 방식으로 date와 notes의 content view를 추가한다.
   • datePicker의 여러가지 style

Quiz

Q. What would you NOT include in a custom content view? A. A reference to the model data Including model data directly in the view code can create problems. Instead, provide the content view with a configuration structure with a property that includes the model data. 뷰 코드에 직접 모델 데이터를 포함하면 문제가 발생할 수 있으니 모델 데이터를 포함하는 속성이 있는 구성 구조와 함께 콘텐츠 보기를 제공

Q. Which code snippet defines and activates the height constraint for subview? A. subview.heightAnchor.constraint(equalToConstant: 120).isActive = true

Q. How can you ensure your content view’s visual representation stays in sync with its associated model data? A. Include a didSet observer for the configuration property in your content view that reconfigures the view every time the configuration object changes. didSet observer를 포함

[NEULiee]

Editing Reminders

Learned

1. Add a Working Reminder

   • 편집한 내용을 저장하기 위한 임시 Reminder를 만들고 편집모드를 종료할 때 Remider를 저장한다.
   • Equatable 프로토콜
     • struct, enum 은 Equatable 프로토콜을 채택하기만 해도 !=, == 등 비교를 할 수 있다.
     • class는 Equatable 프로토콜 채택 + 직접 구현을 해야한다.

2. Make the Text Configuration Editable

   • Reminder의 제목 TextField가 변경될 때마다 실행되는 메서드 생성
   • 편집모드를 종료할 때 view mode에서 최신 변경 사항으로 업데이트 되도록 한다.
   • empty closure 선언하기
     • var onChange: (String)->Void = { _ in }

3. Make the Date Configuration Editable

   • 2와 동일

4. Make the Notes Configuration Editable

   • 2와 동일

5. Cancel Edits

   • Reminder를 원래 상태로 복귀

6. Observe Changes in a View Hierarchy

   

Quiz

Q. Which of the following is NOT a reason why UIKit uses the delegate pattern for many controls? UIKit 에서 delegate 패턴을 사용하는 이유중 옳지 않은 것은?

A. It allows you to tightly couple the view controls to the model. The opposite is true. A UIKit control that uses the delegate pattern doesn’t need to know anything about the model. A control reports to their delegate only that an interaction or event has occurred. The delegate is responsible for responding accordingly.

• 모델을 뷰컨트롤러에 긴밀하게 연결할 수 있습니다. delegate 패턴을 사용하는 UIKit은 model에 대해 알 필요가 없습니다. UIKit은 interaction 또는 이벤트가 발생했다는 것만 delegate에 알립니다. delegate는 그에 응답할 책임이 있습니다.

Q. What step is missing from this process for setting up a custom date picker content view?

1. Add and initialize a date variable. date 변수를 선언한다.
2. Create a UIDatePicker object. UIDatePicker 객체를 생성한다.
3. Set the style of the date picker. date picker의 스타일을 지정한다.
4. Add the date picker as a subview. subview로서 date picker를 추가한다.
5. Lay out the date picker. date picker의 레이아웃을 지정한다.
6. Define a closure or function to execute when the user interacts with the date picker. 사용자가 date picker와 interaction 할 때 실행할 클로저 또는 함수를 정의한다.
7. Update the date variable and any other model data to the new date value when the user interacts with the picker. 사용자가 date picker와 interaction 할 때 날짜 변수 및 기타 모델 데이터를 새 날짜 값으로 업데이트한다.

A. Register a target and an action with the picker. date picker에 addTarget 으로 action을 추가한다.