Search

[정리] SOPT 27기 3주차 과제 정리

Main.storyboard에 짠 View의 모습
고정 View는 2주차 과제처럼 ScrollView와 분리해서 따로 View를 만들었다. 그럼 스크롤할 때 함께 올라가지 않는다.
아무것도 모르고 CollectionView를 사용해서 banner와 profile 화면을 모두 만들려고 했지만 실패했다
먼저 ScrollView를 만들고 그 위에 ImageViewCollectionView를 얹기로 마음 먹은 뒤에 시도❗️
결과적으로 위에 화면처럼 나왔다 짠
→ 저 상태로 실행을 하면 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 지정