[Clone/Instagram] FeedCell 초기 UI 구현 | 복습 & 새롭게 알게된 개념 #2

[Yang seung hyun]

FeedCell 초기 UI구현

cell의 디자인을 보고 강의 보기 전에 혼자 구현해봤다. 강의에선 오토레이아웃을 사용하기 편하게 UIView를 Extension했다. 하지만 AutoLayout 복습도 할겸 그냥 anchor로 AutoLayout을 구현했다.

까다로웠던 점

tableView와 달리 collectionView는 cell의 width의 길이에 따라 많은 cell이 한 line에 올 수도 단 한개의 cell이 한 라인을 차지할 수 있음을 알게 되었다. width는 view의 width로 하면 되는데 height가 문제였다. collectionView(: cellForItemAt:) DataSource 메서드가 실행되기 이전에 collectionView(:layout:sizeForItemAt:)가 실행되어서 height를 지정하기 애매했다. 다이나믹한 cell의 height 설정 방법을 고민하고 있다.

복습한 개념

• UIImageView contentMode

ScaleToFill : UIImageView크기와 같게 이미지 size 늘어남

ScaleAspectFit : 이미지 원본 비율 유지하며 UIImageView의 size에 맞게 이미지를 확장

ScaleAspectFill : 비율 유지하면서 view의 size에 맞게 이미지 채운다.

• ContentCompressionResistance

cell의 크기는 정해져있고 vertical로 5개정도의 subView를 추가했다. imageView의 크기가 상당히 클수 있기에 그 아래에 존재하는 subView들은 가려지게 되었다. 그래서 contentCompressionResistance 우선순위를 줄여 이미지 뷰 아래에 존재하는 subView들의 각자 intrinsic size는 챙기고 imageView의 height를 감소하도록 했당..

새롭게 알게된 개념

• ClipsToBounds

View의 bounds에 의해 subview들이 clip(잘리다)될 수 있는지 의미

• UIView의 frame과 bounds 차이

frame.origin은 superView에 의해 결정되고 bounds.origin은 순수 View자체에 기준을 갖는다.

frame.size는 View가 차지하는 영역을 사각형으로 감싼 값이 들어간다. ( 유동적으로 바뀐다.)

bounds.size는 View자체 순수 size다.