Swift codebase UI 그리기 CollectionView

내가 지금까지 그린 화면 왼쪽 

넣고 싶은거 오른쪽에 배우 리스트 !! 콜렉션뷰!!

이거 하느라 진짜 울고 싶었다

 

var actorListColletionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 10
        layout.scrollDirection = .horizontal
        layout.sectionInset = .zero
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.backgroundColor = .black
        return cv
    }()

콜렉션뷰  생성!!해주고 콜렉션뷰에 대한 설정을 해준다

 

contentView.addSubview(actorListColletionView)

viewdidLoad 에 이거 추가해줌

근데 나는 함수를 따로 만들어서 함수를 viewDidLoad 에 추가해줬다

 

actorListColletionView.snp.makeConstraints { make in
    make.top.equalTo(actorLabel.snp.bottom).offset(10)
    make.leading.equalToSuperview()
    make.trailing.equalToSuperview()
    make.height.equalTo(80)
}

콜렉션뷰에 대한 오토레이아웃 잡기

snapKit 사용함

 

actorListColletionView.backgroundColor = .orange
actorListColletionView.register(ActorCollectionViewCell.self, forCellWithReuseIdentifier: ActorCollectionViewCell.identifier)

컬러지정해주고 셀을 resister 해줌

 

extension DetailPageViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       guard let cell = actorListColletionView.dequeueReusableCell(withReuseIdentifier: ActorCollectionViewCell.identifier, for: indexPath) as? ActorCollectionViewCell else { return UICollectionViewCell() }
        
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: 125, height: 57)
    }

당연히? 델리게이트와 데이터소스를 채택해줍니다

셀은 임의로 5개 뿌리도록 해놨고

커스텀 셀을 채택함

 

sizeforeItemat 으로 셀의 크기를 지정해 주었다

---

콜렉션뷰 셀 커스텀

 

import UIKit
import SnapKit

class ActorCollectionViewCell: UICollectionViewCell {
    
    static let identifier = "ActorCollectionViewCell"
    
    let actorProfileImage = UIImageView()
    let actorNameLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.configureUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureUI() {
        self.backgroundColor = .blue
        self.layer.cornerRadius = 5
        
        contentView.addSubview(actorProfileImage)
        contentView.addSubview(actorNameLabel)
        
        
        actorProfileImage.backgroundColor = .red
        actorProfileImage.layer.cornerRadius = 5
        actorNameLabel.text = "배우이름배우이름배우이름"
        actorNameLabel.textColor = .white
        
        actorProfileImage.snp.makeConstraints { make in
            make.top.equalToSuperview().offset(10)
            make.bottom.equalToSuperview().offset(-10)
            make.leading.equalToSuperview().offset(10)
        }
        
        actorNameLabel.snp.makeConstraints { make in
            make.leading.equalTo(actorProfileImage.snp.trailing).offset(10)
            make.trailing.equalToSuperview().offset(-10)
            make.centerY.equalTo(actorProfileImage.snp.centerY)
        }
    }
    
}

셀에는 이미지와 배우이름 레이블이 들어감!

이상태로 빌드하면 안됩니다! ㅋㅋ

오토레이아웃 잡을건 보니 bottom 을 안잡았음

원래는 저 "배우" 레이블에 bottom 이 잡혀 있었는데 지워주고 콜렉션뷰에만 bottom 을 잡아줍니다

위에 포스터가 들어갈 부분이랑 헷갈려서 색도 파랑으로 바꿈 근데 아직도 안되네?

내가 만든 셀 어디갔어

 

저는 바보입니다

 actorListColletionView.delegate = self
 actorListColletionView.dataSource = self

이걸 넣지도 않고 셀을 불러오려했슴다

근데 이름이 길어지면 이미지가 밀리고 이름이 잘려서 수정해야함 일단 끝!