Swift codebase UI 그리기 TableVeiw

영화관 선택부분을 테이블뷰로 그려볼까합니다

let choiceCinemaLabel = UILabel()
let cinemaTableView = UITableView()

 

일단 영화관 선택 레이블이랑 테이블뷰 생성!

 

contentView.addSubview(choiceCinemaLabel)
contentView.addSubview(cinemaTableView)

contentView 에 넣어줍니다

왜 여기다 넣어주는지 모르겠다면 이전 포스팅 참고해주셔요

 

cinemaTableView.delegate = self
cinemaTableView.dataSource = self

절대 잊지 말것,,,,

이거 까먹어서 내 셀 어디갔지 한적이 한두번이 아닌.,..

 

 

choiceCinemaLabel.snp.makeConstraints { make in
    make.top.equalTo(actorListColletionView.snp.bottom).offset(20)
    make.leading.equalTo(actorLabel.snp.leading)
}

cinemaTableView.snp.makeConstraints { make in
    make.top.equalTo(choiceCinemaLabel.snp.bottom).offset(10)
    make.leading.trailing.equalToSuperview()
    make.bottom.equalToSuperview()

    make.height.equalTo(300)
}

오토레이아웃 잡아주기!

테이블뷰의 높이를 왜 저렇게 잡았는지는 밑에서 설명하겠어요

 

 

choiceCinemaLabel.text = "영화관 선택"
choiceCinemaLabel.textColor = .white
choiceCinemaLabel.font = .systemFont(ofSize: 17, weight: .semibold)

cinemaTableView.register(CinemaTableViewCell.self, forCellReuseIdentifier: CinemaTableViewCell.identifier)
cinemaTableView.backgroundColor = .brown
cinemaTableView.separatorStyle = .none

영화관 선택 텍스트를 넣어주고 글자색과 폰트 사이즈 등을 설정해 줍니다

테이블뷰는 셀을 레지스터 하고 어떻게 잡히는지 보기 위해 색을 임의로 넣어줄게요

마지막 설정한 separatorStyle은 테이블뷰에서 기본으로 넣어주는 구분선인데 저는 안넣고 싶어서 none 으로 설정합니다

 

 

extension MainPageViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = cinemaTableView.dequeueReusableCell(withIdentifier: CinemaTableViewCell.identifier, for: indexPath) as? CinemaTableViewCell else { return UITableViewCell() }

        cell.clipsToBounds = true
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}

델리게이트랑 데이터소스 익스텐션으로 채택해주고요

영화관 선택은 3개만 보여줄거랑 셀은 3개

커스텀한 셀 파일 채택

그리고 셀의 높이를 일단 100으로 잡아주었습니다

 

import SnapKit

class CinemaTableViewCell: UITableViewCell {
    static let identifier = "CinemaTableViewCell"
    
    
    let container = UIView()
    let cinemaName = UILabel()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        configureUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    func configureUI() {
        contentView.backgroundColor = .systemPink
        contentView.addSubview(cinemaName)
        contentView.clipsToBounds = true
        contentView.layer.cornerRadius = 5
        
        cinemaName.text = "티켓박스 신촌점"
        cinemaName.textColor = .white
        
        
        cinemaName.snp.makeConstraints { make in
            make.centerY.equalTo(contentView.snp.centerY)
            make.leading.equalTo(contentView.snp.leading).offset(10)
        }
    }
    
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
        // Configure the view for the selected state
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()

        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 16.0, left: 16, bottom: 16, right: 16))
    }
}

셀 커스텀은 이렇게 했슴다

 

결과물은 이렇습니다!

테이블뷰 오토레이아웃을 잡아줬을 때 300으로 줬는데 그 이유가

테이블뷰 셀 자체 높이는 100으로 줘서 총 세개면 300이 됩니다

테이블뷰 높이가 모든셀의 높이보다 작으면 자동으로 스크롤 할 수 있게 되는데 어차피 3개만 보여줄거라 

셀 모두 합친 높이로 테이블뷰 높이로 설정해주었습니다

 

다음 포스팅은 예매하기 버튼인데 이건 스크롤뷰에 들어가지 않고 바닥에 고정되어야합니다

골머리 또 썩었는데 함 해보께요