iOS :: TableView Code로 구현하기

안녕하세요! 상어입니다.

오늘은 전편에 이어 TableView를 Code로 구현하는 내용을 다뤄보겠습니다.

저는 개인적으로 Storyboard를 애용하기 때문에 code로 구현하는 일은 잘 없지만,

간혹 한번씩(드물지만) 코드로 구현하는 경우가 생기더라구요 ㅎㅎ 

전편에는 ViewController에 TableView를 추가한 것과, 

UITableViewController 두가지 예시를 전부 보여줬는데, 

code와 xib편에서는 ViewController에 TableView를 추가하는 방식만 보여드릴거에욤'ㅁ'

UITableViewController는 스스로 꼭 응용해보시길..!!(절대 귀찮아서가 아닙니다..?🤫)

자 그럼 시작하겠습니다.

첫번째로 해야할 일은 TableView를 만들어야겠지요? 그래서 저는 변수로 만들어 놓을겁니다.

// tableView 생성
private let tableView: UITableView = {
    let tableview = UITableView()
    return tableview
}()

ViewController에 변수로 tableView를 만들었습니다. 

이제 내가 어떤 모양으로 꾸려나갈지 설정해야하니까 UITableViewCell 파일을 만들어줍니다.

저는 CodingCustomTableViewCell이름을 가진 파일을 만들었습니다.

그리고 ImageView와 Label이 하나씩 필요하기 때문에 tableView와 마찬가지로 변수로 만듭니다.

// imageView 생성
private let img: UIImageView = {
    let imgView = UIImageView()
    imgView.image = UIImage(named: "icon")
    return imgView
}()
    
// label 생성
private let label: UILabel = {
    let label = UILabel()
    label.text = "상어상어"
    label.textColor = UIColor.gray
    return label
}()

네 되었습니다.

이제부터 오토레이아웃을 코드로 할건데, 조금 헷갈릴수도 있으니 차근차근 따라오세요!!

저는 최종적으로 

이런형태의 cell이 나오기를 바라기 때문에, 

ImageView는 leading 16pt, top 10pt, bottom 10pt, trailing 15pt, width&height 64pt

Label은 leading 15pt, ImageView에 관해 centerY

로 설정할 예정입니다.

private func setConstraint() {
    contentView.addSubview(img)
    contentView.addSubview(label)
        
    img.translatesAutoresizingMaskIntoConstraints = false
    label.translatesAutoresizingMaskIntoConstraints = false
        
    NSLayoutConstraint.activate([
        img.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
        img.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
        img.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10),
        img.widthAnchor.constraint(equalToConstant: 64),
        img.heightAnchor.constraint(equalToConstant: 64),
        label.leadingAnchor.constraint(equalTo: img.trailingAnchor, constant: 15),
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 16),
        label.centerYAnchor.constraint(equalTo: img.centerYAnchor)
    ])
}

지금은 뷰가 적기 때문에 constraint가 얼마 나오지 않지만, 나중에 뷰가 많아지면 constraint관리가 힘들어져요.

그땐 snapkit이라는 좋은 library가 있으니 추천 합니당ㅎㅎ 

https://github.com/SnapKit/SnapKit

그리고 코드로 cell을 만들면 init을 생성해줘야합니다.

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    setConstraint()
}
    
required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

이전편에서는 init을 하지 않았는데 code로 할땐 init을 해줘야 하는 이유는

인터페이스 빌더에서는 자동으로 초기화를 해주지만, 코드에서는 인터페이스 빌더를 사용하는게 아니기 때문입니다.

그래서 초기화를 하지않는다면 아무것도 뜨지 않는다는 사실,,ㅠㅠ

저는 스토리보드만 쓰니 처음에 아무것도 안떠서 너무나 당황했어요 ㅋㅋㅋㅋ

이제 cell의 설정을 마쳤으니 다시 ViewController로 돌아가서 TableView를 마저 세팅할거에욥

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
     
    tableView.register(CodingCustomTableViewCell.self, forCellReuseIdentifier: "CodingCustomTableViewCell")
    setConstraint()
        
    // autoHeight
    tableView.rowHeight = UITableView.automaticDimension
    tableView.estimatedRowHeight = UITableView.automaticDimension
}

viewDidLoad에 tableView의 delegate와 datasource 대리자를 위임해주세요. 

(이전편에서 대리자 위임에 관한 설명을 했으니 여기서는 패스할게요!)

그 후, CodingCustomTableViewCell이라는 identifier을 가진 CodingCustomTableViewCell클래스를 tableView에 등록해주세요.

identifier은 마음대로 설정해도됩니닷.

autoHeight부분은 내가 만약 custom으로 cell의 크기를 유동적으로 변환시키고 싶다면 두줄을 추가하면 됩니다.^^

이제 TableView의 constraint를 조정해야겠지요?

private func setConstraint() {
    self.view.addSubview(tableView)
    tableView.translatesAutoresizingMaskIntoConstraints = false
        
    NSLayoutConstraint.activate([
       tableView.topAnchor.constraint(equalTo: self.view.topAnchor),
       tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
       tableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
       tableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
    ])
}

setConstraint라는 function을 만들고 그 안에 TableView의 constraint를 조정해주었습니다.

storyboard로 치자면 top, bottom, leading, trailing 전부 0으로 설정한 것과 같습니다.

그리고 viewDidLoad에서 setConstraint를 불러주세용 :)

** constrinat조정하는 코드를 넣기 전에 TableView를 현재 view에 add해야하는걸 잊지마세용!!

현재 view에 아무것도 없는데 constraint조정한다고 하면 에러가 납니다ㅠㅠ **

그 후에는 Storyboard와 동일하게 UITableViewDelegate와 UITableViewDataSource 프로토콜을 채택해줍니다.

저는 cell을 5개 출력할 예정이기 때문에 numberOfInSection의 return 값을 5로 했습니다.

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "CodingCustomTableViewCell", for: indexPath) as? CodingCustomTableViewCell else { return UITableViewCell() }
        
        return cell
    }
}

넴! 따라오느라 힘드셨죵ㅠㅠ

늘 생각하는거지만 TableView세팅은 너무나 할게 많은 것 같아요 ㅋㅋㅋ

그래두 여기까지 잘 따라오셨다면

쨔쟈쟌~~

이렇게 이쁘게 출력되는 것을 보실 수 있으실거에요.

전체코드는 아래에 넣어놓을게용

펼치면 코드를 확인할 수 있습니다!😁

모두 미세먼지 조심하세용!!! 마스크 꼭꼭!

안뇽!

class ViewController: UIViewController {
    
    // MARK: - Property
    
    // tableView 생성
    private let tableView: UITableView = {
        let tableview = UITableView()
        return tableview
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.register(CodingCustomTableViewCell.self, forCellReuseIdentifier: "CodingCustomTableViewCell")
        setConstraint()
        
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = UITableView.automaticDimension
    }
    
    // MARK: - Private
    
    private func setConstraint() {
        self.view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: self.view.topAnchor),
            tableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            tableView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
        ])
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "CodingCustomTableViewCell", for: indexPath) as? CodingCustomTableViewCell else { return UITableViewCell() }
        
        return cell
    }
}

class CodingCustomTableViewCell: UITableViewCell {

    // MARK: - Property
    
    // imageView 생성
    private let img: UIImageView = {
        let imgView = UIImageView()
        imgView.image = UIImage(named: "icon")
        return imgView
    }()
    
    // label 생성
    private let label: UILabel = {
        let label = UILabel()
        label.text = "상어상어"
        label.textColor = UIColor.gray
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setConstraint()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - Private
    
    private func setConstraint() {
        contentView.addSubview(img)
        contentView.addSubview(label)
        
        img.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            img.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            img.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            img.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10),
            img.widthAnchor.constraint(equalToConstant: 64),
            img.heightAnchor.constraint(equalToConstant: 64),
            label.leadingAnchor.constraint(equalTo: img.trailingAnchor, constant: 15),
            label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 16),
            label.centerYAnchor.constraint(equalTo: img.centerYAnchor)
        ])
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    }
}