Collection View 간단하게 정리해보기.

limwin94·2020년 3월 9일
4

iOS

목록 보기
5/7

Collection View

그리드와 스택, 타일, 그리고 원형 배열을 포함하여 다양한 유연성을 제공하는 인터페이스이다.

Section

  • Header, Cell, Footer로 이루어져 있으며 옵셔널이다. (있어도되고 없어도 된다.)
  • Header, FooterSupplementary View이다.
  • Section별로 구분이 된다.

Table View

Collection View와 비슷하다. List형태로 나타내어 진다.

  • Plain Table View
  • Grouped Table View
    -> 뷰를 그룹화해서 보여주는가, 아닌가에 대한 차이

Index Path

Section내의 Cell을 나타내는 위치를 표현한다.

  • TableView : n번째 Section의 n번째 Row.
  • CollectionView : n번째 Section의 n번째 Item.

위치를 표현하는 용어가 다르다.
Header와 Footer는 Index Path가 아닌 다른 메소드로 접근한다.

Collection View 예시 코드

  • ViewController.swift

    class ViewController: UIViewController {
       @IBOutlet weak var colletionView: UICollectionView!
       private let collectionDataSource = CollectionDataSource()
       private let collectionDelegate = CollectionDelegate()
       
       override func viewDidLoad() {
           super.viewDidLoad()
           self.colletionView.dataSource = self.collectionDataSource
           self.colletionView.delegate = self.collectionDelegate
           self.colletionView.reloadData()
       }
    }
  • CollectionViewDataSource.swift

    class CollectionDataSource: NSObject, UICollectionViewDataSource {
       func numberOfSections(in collectionView: UICollectionView) -> Int {
           return 7
       }
       
       func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
           return 5
       }
       
       func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
           let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath)
           
           let red: CGFloat = indexPath.item % 2 == 0 ? 0 : 0.8
           let green: CGFloat = indexPath.item % 3 == 0 ? 0 : 0.8
           let blue: CGFloat = indexPath.item % 5 == 0 ? 0 : 0.8
           
           cell.backgroundColor = UIColor(red: red, green: green, blue: blue, alpha: 1)
           return cell
       }
    }
  • CollectionDelegate.swift

    class CollectionDelegate: NSObject, UICollectionViewDelegate {
       func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
           print(indexPath.debugDescription)
       }
    }
  • 관계도 정리 (사진 등록이 안되어 링크로 대신합니다.)
    https://gist.github.com/Limwin94/669f3d8d343919c29dab7ee9efe307ba

profile
수많은 에러를 경험 중..😵

4개의 댓글

comment-user-thumbnail
2020년 3월 9일

오! 관계도 정리 직접 만드신건가요?? 이해하기 쉬워서 좋은것 같아요! 👍🏻

1개의 답글
comment-user-thumbnail
2020년 3월 9일

오늘 수업을 잘 정리했네요! TRI !

1개의 답글