/Diary

Primary LanguageSwift

Diary 간단한 일기 앱 만들기

완성된 앱 화면

(앱 구현 완료 후 추가 예정)

✍🏻 일기장 기능 상세 요약

  • 일기장 탭을 누르면 일기 리스트를 표시할 수 있다.
  • 즐겨찾기 탭을 누르면 즐겨찾기한 일기의 리스트를 표시할 수 있다.
  • 일기를 등록, 수정, 삭제, 즐겨찾기 할 수 있다.

✍🏻 활용기술

UITabBar

앱에서 다른 하위 작업, 뷰, 모드 사이의 선택을 할 수 있도록 탭바에 하나 혹은 하나 이상의 버튼을 보여주는 컨트롤. 스크린샷 2022-02-11 오후 7 47 16

평소에 앱을 사용하다보면 위와 같이 앱 하단에 버튼이 있는 것을 볼 수있는데, 그것을 탭바라고 한다. 그 탭바 안에 있는 요소들을 UITabBar Item 이라고 한다. 탭바는 UITabBarController와 함까 사용하지만, 앱에서 독립적인 컨트롤로도 사용 가능하다.

UITabBarController

일기장 탭과 즐겨찾기 탭을 클릭하면 각각 다른 화면이 보이게끔 해줌.

다중 선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러로, 선택에 따라 자식 뷰 컨트롤러를 보여줄 것인지가 결정. 탭바 컨트롤러의 인터페이스에 있는 각 탭은 커스텀뷰 컨트롤러에 연관되어있고 사용자가 특정 탭을 선택하면 탭바컨트롤러는 그에 상응하는 뷰컨트롤러의 루트뷰를 표시한다.

스크린샷 2022-02-11 오후 7 16 36

바컨트롤러는 UIViewController를 상속받는 클래스이므로 뷰 속성을 갖는다. 해당 뷰는 탭바 뷰와 커스텀컨텐츠를 포함한 뷰이다. 탭바뷰는 사용자를 위한 선택컨트롤러를 제공하고 하나 혹은 하나 이상의 탭바 아이템으로 구성된다. 탭바뷰는 사용자가 선택할 수있는 여러개의 아이템으로 주로 구성된다. 그리고 탭바뷰의 선택된 아이템에 해당하는 컨텐트뷰가 화면에 표시되게 된다.

UICollectionView

일기 리스트를 표시하기 위해 해당 기능을 사용한다. UICollectionView는 데이터 항목의 정렬된 컬렉션을 관리하고 커스텀한 레이아웃을 사용해 표시하는 객체이다. 테이블뷰처럼 스크롤뷰를 상속받고 있고 다양한 레이아웃을 보여줄 때 사용된다.

스크린샷 2022-02-11 오후 7 48 28

위 두개의 스크린샷이 컬렉션뷰로 구현된 화면이다. 테이블뷰는 리스트 형태로만 표현이 가능하지만 콜렉션 뷰는 위처럼 리스트형태 말고도 다양한 형태로 모두 구현 가능하다.

Collection View의 구성요소는 아래와 같다.

  • Cell : 컬렉션 뷰의 콘텐츠를 표시.
  • Supplementary View : 섹션에 대한 정보를 표시. 헤더와 푸터라고 생각하면 좋다. 필수 구현 요소는 아니다.
  • Decoration View : 컬렉션 뷰에 대한 배경을 꾸밀 때 사용

그리고 컬렉션뷰는 레이아웃 객체를 통해 컬렉션 뷰 내의 아이템배치 및 시각적 스타일을 결정한다. (UICollectionViewLayout, UICollectionViewFLowLayout) 레이아웃객체가 하는 일은 cell, supplementary view, 내부에 있는 decoration view, 컬렉션뷰의 바운드 의 위치를 결정하고, 시각적 상태의 정보를 컬렉션 뷰에 제공한다.

UICollectionViewLayout

UICollectionView에서는 UI Flow Layout 클래스에 레이아웃 객체를 사용해서 항목들을 정렬할 수 있다. 해당 클래스를 사용하게 되면 셀을 원하는 대로 정렬 할 수 있다. flow layout은 셀의 성형 경로를 배치한다. 최대한 행을 따라 많은 셀을 채우다가 현재의 행에 더 이상 셀이 들어갈 수 없게 된다면 새로운 행을 만들어 계속 배치해나간다.

스크린샷 2022-02-11 오후 7 36 51

(패스트캠퍼스 강의 이미지 참고)

위의 그림은 세로로 스크롤이 되는 플로우 레이아웃이다. 셀은 선형 경로에 따라 가로로 그려지고, 아래에 새로운 행을 만들어 나간다. 이외에도 더 많은 모양응로도 구현이 가능하다.

스크린샷 2022-02-11 오후 7 49 46

(패스트캠퍼스 강의 이미지 참고)

UICollectionViewFlowLayout의 구성단계는 다음과 같다.

  1. Flow 레이아웃 객체를 작성하고 컬렉션 뷰에 이를 할당한다.
  2. 셀의 width, height를 정한다. (반드시 정해줘야함. 작성하지 않게 되면 0으로 디폴트값을 가져버려, 표시되지 않는다.)
  3. 필요한 경우 셀들 간의 좌우 최소 간격, 위아래 최소 간격을 설정한다.
  4. 섹션에 header, footer가 있다면 이것들의 크기를 지정한다.
  5. 레이아웃의 스크롤 방향을 설정한다.

스크린샷 2022-02-11 오후 7 41 11

셀과 행간의 간격 이외에도 세션 자체에 간격을 줄 수 있다.

UICollectionView

컬렉션 뷰로 보여지는 콘텐츠들을 관리하는 객체이다. 이를 정의하기 위해서는 UI collection view 데이터 소스 프로토콜을 준수해야하고, 데이터 소스의 역할은 콜렉션뷰에 몇개의 섹션이 있는지, 몇개의 셀이 있는지 어떤 뷰를 사용할건지 등에 대한 정보를 콜렉션뷰에 제공하는 역할을 수행한다.

스크린샷 2022-02-11 오후 7 43 35

데이터 소스 프로토콜의 주요 메서드는 위와 같다. 옵셔널로 선언되지 않은 것들에 대해서는 모두 필수적으로 작성해주어야한다.

UICollectionViewDelegate

콘텐츠의 표현, 사용자와의 상호작용과 관련된 것들을 관리하는 객체이다. 데이터 소스와 다르게 델리게이트는 필수로 구현하지 않아도 된다.

CollectionView와 관련된 핵심 객체들의 관계

스크린샷 2022-02-11 오후 7 44 28

(패스트캠퍼스 강의 이미지 참고)

NotificationCenter

이벤트 퍼스를 사용하여 수정 삭제 즐겨찾기 같은 행위에 이벤트를 옵저빙하는 곳에 전달하여 기능을 구현한다.