
정말 많이 사용되는 CollectionView 를 띄워보자.
Collection View 를 생성하기 전에 먼저 CollectionView 에서 사용될 Cell 을 만들어보자
UICollectionViewCell를 상속받는 Cell을 생성해주자.
그리고 알 수 있게 배경화면을 파란색으로 설정해주자
class CollectionViewCell: UICollectionViewCell {
static let identifier = "CollectionViewCell"
override init(frame: CGRect) {
super.init(frame: frame)
//Cell에서는 View대신 ContentView를 사용한다
contentView.backgroundColor = .blue
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
이제 CollectionView를 사용할 ViewController에서 CollectionView를 생성하고, Layout 설정해주자.
class ViewController: UIViewController{
//collectionView를 생성해주자
private var collectionView : UICollectionView?
override func viewDidLoad() {
super.viewDidLoad()
configureCollectionView()
}
private func configureCollectionView(){
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: 50 , height:50)
layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
//위 layout들로 UICollectionView를 생성해주자
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView?.backgroundColor = .systemBackground
//collectionView에서 사용하고 싶은 cell을 identifier를 사용하여 등록해주자!!
collectionView?.register(CollectionViewCell.self, forCellWithReuseIdentifier: CollectionViewCell.identifier)
collectionView?.delegate = self
collectionView?.dataSource = self
guard let collectionView = collectionView else {
return
}
view.addSubview(collectionView)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
collectionView?.frame = view.bounds
}
}
이제 ViewController 에 나타낼 CollectionView의 cell 과 section, item 수를 정해주자!
collectionViewDelegate 를 사용해서 나타내자
extension ViewController : UICollectionViewDelegate, UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.identifier, for: indexPath) as? CollectionViewCell else { return UICollectionViewCell() }
return cell
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}
}
그림처럼 3개의 섹션 안에 5개의 아이템을 넣어줬다.
이제 실행하면 위의 결과처럼 잘 나올 것이다!
전체코드
import UIKit
class ViewController: UIViewController{
//collectionView를 생성해주자
private var collectionView : UICollectionView?
override func viewDidLoad() {
super.viewDidLoad()
configureCollectionView()
}
private func configureCollectionView(){
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: 50 , height:50)
layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
//위 layout들로 UICollectionView를 생성해주자
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
//알 수 있게 배경색을 노란색으로 정해주자
collectionView?.backgroundColor = .systemBackground
//collectionView에서 사용하고 싶은 cell을 identifier를 사용하여 등록해주자!!
collectionView?.register(CollectionViewCell.self, forCellWithReuseIdentifier: CollectionViewCell.identifier)
collectionView?.delegate = self
collectionView?.dataSource = self
guard let collectionView = collectionView else {
return
}
view.addSubview(collectionView)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
collectionView?.frame = view.bounds
}
}
extension ViewController : UICollectionViewDelegate, UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.identifier, for: indexPath) as? CollectionViewCell else { return UICollectionViewCell() }
return cell
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 3
}
}
class CollectionViewCell: UICollectionViewCell {
static let identifier = "CollectionViewCell"
override init(frame: CGRect) {
super.init(frame: frame)
//Cell에서는 View대신 ContentView를 사용한다
contentView.backgroundColor = .blue
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
'iOS > UIKit' 카테고리의 다른 글
[UIKit] : TextField 값 실시간으로 가져오기 (0) | 2022.09.11 |
---|---|
[UIKit] : CollectionView Header 만들기 - (UICollectionReusableView) (0) | 2022.09.02 |
[UIKit] : UIButton 속 이미지 크기 조절하기 (0) | 2022.08.25 |
[UIKit] : 구조체 문자열 원하는 문자열로 바꾸기 (0) | 2022.08.24 |
[UIKit] : Scroll View content 페이지 넘기기 (page Control 사용) (0) | 2022.08.23 |