5. Search 결과 구현 1 - CollectionView

Search 결과 구현 1 - CollectionView

 

 

현재 검색 API를 만들었고, 결과를 받아올 모델 Movie, Response와 데이터를 받아오는 logic을 완성했다.

이제 결과를 받아와서 CollectionView를 표현해보자

 

 

 

---

 

 

 

CollectionView DataSource, Delegate를 구현해보자

 

 

 

MVVM패턴에서는 ViewController에서 데이터를 갖는게 아닌 ViewModel이 데이터를 갖고있고 메소드를 통해 가져오도록 해야하지만, 전체적 구조에 대한 이해를 높히고자 이렇게 구현해뒀다.

 

CollectionView와 SearchViewController의 DataSource, Delegate를 연결하고 다음과 같은 protocol을 구현하면 된다. UICollectionViewCell도 구현하고 id를 지정해준다.

 

 

 

---

 

 

 

storyboard에서 imageView를 넣고 Aspect Fit을 Aspect Fill로 지정한다.

Aspect Fit 은 잘리는 공간없이 여백이 날 수 있고, Aspect Fill 잘려도 꽉채워 달라는 것이다.

그 후 imageView를 Cell의 movieThumbnail과 연결한다. 

 

 

 

 

 

---

 

 

 

 

collectionView reload

 

 

 

여기서 Outlet 변수 resultCollectionView는 해당 CollectionView와 연결되어 있다.

그렇기에 검색이 될때마다 받아온 데이터로 싹 갈아 엎는 작업이 필요하다. --> reload

 

 

 

 

이렇게 collectionView를 reload하게 되면 새로 받아온 데이터로 collectionView를 다시 나타내게 된다.

 

 

 

 

 

---

 

 

 

 

 

UICollectionViewDelegateFlowLayout

 

 

제일 좌측과 제일 우측은 spacing 8, 아이템 사이의 spacing은 10 이다.

Width : Height = 7 : 10

 

 

---

 

 

 

Cell size를 확인하기 위해 backgroundColor을 red로 설정했다.

 

 

 

---

 

 

 

Min Spacing는 아이템간의 spacing, 줄 간의 spacing을 나타낸다.

Section insets는 전체 collectionView의 4방향에 대한 margin을 조절하는 것이다.

collectionView의 제일 좌측, 우측만 8의 margin을 갖도록 설정했다.

 

 

 

---

 

 

 

Cell 하나의 사이즈는 다음과 같이 지정했다.

 

 

---

 

 

collectionView 같은 경우는 알아서 사이즈를 재는 기능이 존재하기에 이렇게 내가 지정해 줬으면 Estimate Size를 None로 지정하자.