728x90
내가 지금까지 그린 화면 왼쪽
넣고 싶은거 오른쪽에 배우 리스트 !! 콜렉션뷰!!
이거 하느라 진짜 울고 싶었다
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
이걸 넣지도 않고 셀을 불러오려했슴다
근데 이름이 길어지면 이미지가 밀리고 이름이 잘려서 수정해야함 일단 끝!
728x90
'iOS Swift > Study' 카테고리의 다른 글
Swift codebase UI 그리기 TableVeiw (0) | 2024.04.25 |
---|---|
Swift codebase UI 그리기 ScrollView 넣기! (0) | 2024.04.25 |
[codebase UI 그리기] Button 누를시 다른 view 로 화면전환 하기 (0) | 2024.04.22 |
스토리보드 없이 Custom Navigation Controller 연결하기 (0) | 2024.04.22 |
To Do List 만들기 (1) alret 창 띄우고 할 일 적기 (0) | 2024.03.28 |
댓글