6. Header View (View 구성)

HeaderView - View 구성

 

 

이제 HeaderView에 대해 배워보자

 

 

 

우리가 이전 시간까지 배운 headerview의 내용은 아래의 코드를 완성해야 한다는 것이다.

 

우선 HeaderView를 구성할 때 필요한 Storyboard에서 View를 구성하는 방법을 배우고

다음시간에 DataSource에서 headerView를 구현 등 코드에 대해 배울 것이다.

 

 

 

---

 

 

Storyboard

 

 

Storyboard에서 object library를 확인하면 Header 또는 Footer View를 표현할 수 있는 component가 존재한다

—> Collection Reusable View

 

 

위와 같이 추가하게 되면 아래와 같이 표현된다.

 

 

 

 

 

 

 

Header view의 사이즈는 414 296으로 설정하자

 

 

 

 

 

 

 

---

 

 

 

 

우리는 지금 밑의 사진의 header view를 만들고 있는 것이다.

 

 

 

 

 

 

 

우리는 제일 아래에 존재하는 Label을 수정할 것이다.

형식은 위와 같고 Label의 attributed inspector을 살펴보면 Line 이라는 게 존재한다. 

이는 몇줄로 표현하는 가를 나타내며 0을 적으면 무한정으로 나타낼 수 있다. 무한정은 부담스러우니 2줄로 나타내보자.

 

 

 

 

 

 

그리고 오른쪽 아래에 존재하는 imageView의 경우는 아래와 같이 나타낼 것이다.

 

 

apple에서 제공하는 아이콘을 사용할 것이며, 색은 System Pink Color로 나타낸다.

사이즈는 Point Size로 설정하여 30으로 지정한다. 

 

 

 

 

 

 

 

 

이러면 얼추 형식은 맞춘것 같으니 auto layout을 맞춰보겠다!!

 

Today’s label은 leading 20, top 30으로 맞춘다.

 

큰 imageView는 위의 label과 vertical spacing로 거리를 맞추고 leading, trailing를 맞춘다. 그러면 현재 높이는 지정되어 있지 않으니 height를 200으로 지정한다.

 

작은 imageView의 경우 큰 imageView와 trailing와 bottom을 맞춘다. 그후 trailing -10, bottom -5를 지정한다.

 

왼쪽 밑에 존재하는 label의 경우 큰 imageView와 leading, bottom을 붙히고 각각 -10, -5로 지정한다. 그리고 오른쪽 작은 imageView와 겹칠 수 있기 때문에 Horizontal spacing를 15보다 크게 잡는다.  label의 길이가 짧은 경우 15보다 커질 수 있기 때문이다.

 

 

 

 

왼쪽 밑에서 두번째 label의 경우 imageView와 leading 10을 맞추고 아래의 label과 vertical spacing를 0으로 지정한다. 

 

 

 

 

 

 

 

---

 

 

 

 

그럼 이제 HeaderView의 코드를 완성하고 (코드 설명은 다음시간)

View Components와 connection을 한 후에 코드에 대한 설명을 이어 붙히겠다.

 

 

 

 

 

 

 

 

 

 

우선 TrackCollectionHeaderView 파일을 만들어서 UICollectionReusableview를 상속받도록 지정한다. 

 

 

 

 

 

 

다음과 같은 코드를 완성하고 이제 연결 들어간다

 

 

 

 

 

 

Storyboard에서 header View 의 연결된 클래스가 TrackCollectionHeaderView 임을 지정.

 

 

 

 

 

현재 코드와 View Components 가 연결되어 있지 않기에 연결해준다.

 

 

 

 

 

 

그런데 cardTapped 메소드의 경우 UIButtom을 눌렀을때의 action이다.

투명한 button을 UIimageView위에 나두어야 한다. 

 

 

UIButton을 추가하고 글자를 지운 뒤 UIimageView와 top trailing bottom leading를 맞춘다.

 

 

 

 

그후 Touch up inside로 연결하여 아래와 같이 코드와 View Components를 연결한다.

 

 

 

 

 

여기서 참고할 내용은 constraint를 지정했을때 바뀌는 길이만 표시되고 새로고침이 바로 되지 않는 경우가 존재할 것이다. 이때는 option + cmd + (+button) 을 누르게 되면 새로고침이 완료된다. 혹은 Touch Bar에 Storyboard 작업을 하면 새로고침 모양의 버튼을 클릭해도 된다.

 

우리는 지금까지 View 구성을 완료하였다.

이제 코드를 구현해보자!!