7. Header View (code 구현)

HeaderView code

 

 

Header View 를 구성하는 코드는 다음과 같은 구조를 가진다.

viewSupplementaryElementOfKind 는 보충하는 뷰의 종류를 나타내는 것이며 이것은 Header, Footer를 구분하는 것이다.

 

 

구조는 간단하다. 우리는 지금 trackManager에서 todayMusic이라는 변수 안에 우리가 보여줄 item을 갖고 있다.

그리고 Header View의 구조를 완성하였다.

그렇다면 HomeViewController에서는 header view와 item을 가져와서 header view에서 그 item을 보여주도록 controller부분을 구현하면 되는 것이다.

 

---

item

 

 

우선 기본적으로 header view에 표시할 today’s item 이 있어야한다.

그래서 trackManager에서 todays item을 가져오도록 한다. 

못가져오면 default UICollectionReusableView()를 반환한다.

 

 

 

 

 

header

 

그 다음은 우리가 만들었던 custom headerView를 가져오도록 한다. 

이것도 custom cell을 가져오는 것처럼 구현된다.

 

 

우리는 이제 item을 header에 업데이트 할 메소드를 header(TrackCollectionHeaderView)에 구현할 것이다.

 

 

 

---

 

 

 

이제 TrackCollectionHeaderView에서 update를 구현해보자

 

 

 

 

 

 

 

 

update()

 

 

 

item을 받아와서 AVPlayerItem -> Track 로 type casting를 한다.

정상적으로 진행되었다면 해당 Outlet의 값을 변경시킨다.

 

 

 

 

 

cardTapped()

 

tap을 하게 되었을 때의 action을 만들어야 하기에 headler가 필요하다

 

 

 

AVPlayerItem -> Void 와 같은 타입을 가지는 클로져를 선언 했었는데 이 tapHandler을 이용하겠다. 

 

 

 

현재는 tapHandler이 optional이어서 아직은 아무것도 포함되어 있지않다.

그렇다면 HomeViewController에서 헤어뷰를 구성하는 부분에서 그 기능을 만들어 줘야한다.!!

한마디로 HomeViewController에서 tapHandler을 초기화 하는 것이다.

 

 

 

 

TrackCollectionHeacerView를 다음과 같이 작성하였다.

여기서 tapHandler이 HomeViewController에서 어떻게 구현하는지를 살펴보자!!

 

 

 

 

---

 

 

HomeViewController 코드 분석

 

 

 

 

우선 kind라는 것이 존재한다. 

viewForSupplementaryElementOfKind 라는 것이 존재한다.

이게 어떤 타입의 보충하는 뷰냐? Header이냐? Footer이냐?

 

SupplementaryView —> Header, Footer

 

 

이를 판단하기 위해 switch키워드를 사용해서 분류하였다.

우리가 만들 것은 Header이기 떼문에 Header일때를 구현하면 되는 것이다.

 

우선 item에 우리가 보여줄 todayMusic를 가져온다.

header에는 dequeueReusableSupplementaryView를 사용하며 dequeueReusableCell을 사용할 때와 유사하다.

Storyboard에서 Identifier 지정 안해주면 앱이 죽으니깐 오류메세지 잘 보고 해야한다. (주의)

 

 

item과 header(view)를 정상적으로 가져왔다면 header를 item으로 업데이트하고

클릭되었을때 아래의 코드가 실행된다.

 

 

여기서 tapHandler이라는 Closure를 실행하게 되면서 todaysItem을 던져주는 것이다.

그런데 tapHandler는 어떤 함수 일까?

 

이를 우리는 HomeViewController의 HeaderView를 구성하는 부분에 존재한다.

여기서 tapHandler을 구현한다.

정상적으로라면 music player을 실행시키는 것이지만 아직 player는 구현되지 않았기에 정상적으로 작동되는지 확인하기 위한 출력으로 구현하였다. 

 

 

 

 

---

 

 

 

마무리 작업

 

 

헤당 사진이 꽉 차도록 되지 않기에 설정 들어간다.

imageView의 View의 content Mode 를 Aspect Fit 에서 Aspect Fill로 변경한다.

 

 

 

---

 

 

 

 

완성본

 

 

 

 

출력도 정상적으로 나옴을 확인할 수 있다.