Main.storyboard에 짠 View의 모습
•
고정 View는 2주차 과제처럼 ScrollView와 분리해서 따로 View를 만들었다. 그럼 스크롤할 때 함께 올라가지 않는다.
•
아무것도 모르고 CollectionView를 사용해서 banner와 profile 화면을 모두 만들려고 했지만 실패했다
•
먼저 ScrollView를 만들고 그 위에 ImageView와 CollectionView를 얹기로 마음 먹은 뒤에 시도❗️
•
결과적으로 위에 화면처럼 나왔다 짠
→ 저 상태로 실행을 하면 CollectionView도 스크롤되고 ScrollView도 스크롤되는 신명나는 상황이 발생하기에 꼭 CollectionView에서 View>Interaction>Multiple Touch 눌러주기
ProfileViewCell
func setCell(info: Profile) {
profileImage.image = UIImage(named: info.imageName)
profileName.text = info.imageName
profileLabel.text = info.statusMessage
}
C++
복사
•
cell에 setCell이라는 함수를 만들어두고 Profile Data를 받아서 프로필 이미지, 프로필 이름, 프로필 상태 라벨을 설정할 수 있게 한다.
ViewController(UICollectionViewDataSource)
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return profile.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = profileCollectionView.dequeueReusableCell(withReuseIdentifier: ProfileViewCell.identifier, for: indexPath) as? ProfileViewCell else {
return UICollectionViewCell()
}
cell.setCell(info: profile[indexPath.item])
// ProfileViewCell 안을 설정하기
return cell
}
}
C++
복사
•
cell이라는 변수에 ProfileViewCell를 받아와서 setCell함수를 부른다.
•
profile이라는 데이터의 해당 indexPath의 item를 받아온다 → TableView는 indexPath의 row ❗️❗️
ViewController(UICollectionViewDelegateFlowLayout)
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 150, height: 225)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 27
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 41, left: 20, bottom: 0, right: 20)
}
}
C++
복사
•
TableView와는 다르게 CollectionView는 해당 셀들의 위치를 FlowLayout를 통해서 잡아줄 수 있다.
1.
첫 번째 함수(sizeForItemAt) : 해당 cell의 크기 잡기
2.
두 번째 함수(minimumLineSpacingForSectionAt) : 각각 셀들 위,아래의 Space
3.
세 번째 함수(minimumInteritemSpacingForSectionAt) : 각각 셀들 좌,우의 Space
4.
네 번째 함수(insetForSectionAt) : CollectionView ContentInset 지정