[swift/iOS] TableView 구현하기

2.so_j·2022년 5월 1일

iOS swift

만들 내용은 위와 같습니다

TableView

list 형태의 UI를 구성할 때 주로 사용한다
UIScrollView를 상속하기 때문에 데이터가 많아졌을 때 스크롤이 가능하다
반복되는 행을 cell이라고 부른다

반복되는 행들은 하나의 cell로 만들어 재사용 하는 방향으로 tableView를 구성해보아요

📝 TableView 구현하기

테이블 뷰 생성하기

스토리보드와 viewController 하나씩 만들고

TableView를 추가해줍니다
제약조건은 top / bottom / trailing / leading 모두 0으로 준 상태

tableView Outlet을 연결해주세요

cell 생성하기

위에서 반복되는 행은 cell을 통하여 재활용한다고 했습니다
Xib 파일로 따로 분리해서 cell을 구성해보도록 하겠습니다

Xib 파일도 스토리보드와 같이 xml파일로 이루어져 있습니다

Also create XIB file을 꼭 체크해주세요!

이렇게 생긴 스토리보드를 볼 수 있는데 작업의 편의를 위해 넓이와 높이를 지정해줍니다

레이아웃을 잡아주고, Outlet을 연결해줍니다

데이터 모델 생성

dataModel을 추가해줍니다

서버에서 데이터를 받아오는게 아니기 때문에 더미데이터도 생성해줍니다

extension MusicDataModel{
    static let sampleData: [MusicDataModel] = [
        MusicDataModel(albumCoverImageName: "albumCover01", musicTitle: "긴 밤(feat. GIRIBOY)", author: "Seori", playTime: "3:31"),
        MusicDataModel(albumCoverImageName: "albumCover02", musicTitle: "Running Through The Night", author: "서리", playTime: "3:38"),
        MusicDataModel(albumCoverImageName: "albumCover03", musicTitle: "instagram", author: "DEAN(딘)", playTime: "4:15")
    ]
}

예를 들면 이런식으로 !

cell별로 다른 데이터를 보여줘야 하기 때문에
setData함수를 통해 전달받은 musicData를 outlet변수에 넣어줍니다

셀 등록하기

위의 사진처럼 cell을 구별하기 위한 identifier도 선언해줍니다

그리고 만들어주었던 cell을 등록해줍니다

프로토콜 채택하기

tableView를 구성하기 위해 두가지 프로토콜을 채택해줍니다

UITableViewDelegate
- 화면에 보이는 모습과 행동을 담당

extension MusicTableViewController: UITableViewDelegate{
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90
    }
}

사용한 메서드는 셀의 고정 높이를 지정하는 메서드입니다

UITableViewDataSource
- 필요한 정보와 데이터를 제공하기 위해 사용됨
- 필수로 구현해야 하는 메서드가 존재함

extension MusicTableViewController: UITableViewDataSource{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return MusicDataModel.sampleData.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: MusicTableViewCell.identifier, for: indexPath) as? MusicTableViewCell else { return UITableViewCell() }
        
        cell.setData(MusicDataModel.sampleData[indexPath.row])
        
        return cell
    }
}