Toy Project/One Piece (iOS)

9. CollectionView: UICollectionViewDelegateFlowLayout

개발자킹콩 2021. 2. 10. 20:43

CollectionViewDelegateFlowLayout

 

 

 

 

 

 

해당 데이터가 이렇게 나오는 이유는 

CollectionView 하나가 열에 2개를 넣기 힘들다고 판단을 한 것이다.

But, 이 사이즈를 우리가 custom하게 계산해서 넣어줄 수 있다.

 

 

 

 

우리가 지금 생각 할 것은 각 Cell 간의 간격이다.

행에서 보여지는 데이터 2개의 horizontal space는 10, 열의 2개는 vertical space 10.

그렇게 되면 1행의 열 길이에서 10을 빼고 나누기 2를 하게 되면 하나의 cell 크기가 나올 것이다.

 

그리고 그 넓이에 따라서 imageView는 aspect ratio가 7:10 으로 나타나고, 밑의 label 2개가 들어간 곳은 고정적으로 65 정도 높이를 줄 예정이다. 

 

 

 

 

이 정보를 코드로 작성해보자 —> func collectionViewsizeforitem 자동완성

 

 

 

 

 

우리가 이제 계산한 정보를 CGSize type으로 리턴하면 된다.

 

 

CGSize의 경우 넓이와 높이를 계산해야 한다.

 

collectionView.bounds —> 현재 CollectionView의 사이즈를 반환한다.

 

 

 

 

코드를 해석하게 되면 

 

반환하는 CGSize의 경우 width와 height를 지정하여 반환하게 되면 하나의 Cell크기를 디바이스마다 계산하여 적절한 view가 가능하다.

그럼 width는 collectionView의 크기에서 width를 불러와 10을 빼고 /2 를 하면 한 행에서 보여지는 두개의 데이터 중 하나의 cell 의 width는 계산된 것이다.

width와 height는 7:10으로 지정할 것이고, 글자부분을 65 높이로 지정하여 return 한다.

 

 

 

 

 

 


 

 

 

 

여기서 현상금에 따른 Sorting으로 마무리 해보자

 

 

 

 

 

sortedList 변수를 만들어서 bountyInfo를 호출하면 sort된 리스트를 반환하도록 만든다.

여기서 swift에서는 sorted를 제공하고 이전 데이터와 다음 데이터의 어떤 속성을 기준으로 sort할지를 적용해주면 된다.

 

 

 

 

 

완성

 

 

 

 

 

 

우리가 CollectionView를 사용하는 이유:

한 행에 여러 아이템을 넣고 싶다.

디바이스 사이즈마다 다르게 들어갈 수 있다. 이때는 직접적으로 계산해줄 수 있다.

우리가 정한 사이즈를 적용시키기 위해 

이전 시간에 CollectionView의 size inspector에서 원래는 Automatic 이었는데 이것을 None로 바꾸었다.

추청하지 말고 내가준대로 해라~ 라고 지정한 것이다.