UITableViewCell (테이블 뷰 셀)?

 

 

안녕하세요 :)

iOS 개발자 리치(rich_iosdev)입니다.

공유해드릴 내용은 UITableViewCell 입니다.

 

UITableViewCell

The visual representation of a single row in a table view
테이블 뷰의 하나의 행에 대한 뷰를 나타냅니다.

 

#1 테이블 뷰 셀의 구조

 

UITableViewCell은 UITableView의 1개의 행(row)을 구성하는 Cell 입니다.

해당 Cell에는 기본적으로 표준 스타일을 활용해서 문자열과 이미지를 제공하는 셀을 생성할 수 있습니다.

 

Cell은 Content 영역과 AccessoryView 영역으로 구분됩니다.

 

 

#2 테이블 뷰 셀의 기본 기능

 

UITableView Cell에는 표준 스타일을 활용 할 수 있도록 아래 3개의 프로퍼티가 존재합니다.

 

• textLabel: UILabel: 주제목 레이블
• detailTextLabel: UILabel: 추가 세부 사항 표시를 위한 부제목 레이블
• imageView: UIImageView: 이미지 표시를 위한 이미지뷰 

위 이미지에서

 

좌측은 imageView

중앙에는 문자열 (textLabel, detailTextLabel)

마지막으로 맨 오른쪽에는 액세서리 뷰가 존재합니다

 

#3 테이블 뷰 커스텀 셀 활용

 

기본적으로 활용할 수 있는 프로퍼티가 아닌 UITableViewCell을 상속 받은 커스텀 뷰 위에 원하는 방식대로 뷰를 올릴 수 있습니다.

(단, imageView의 프로퍼티 변수명은 표준 스타일에서 사용되고 있기 때문에 다르게 변수명을 만들어서 이미지 뷰를 올려야합니다)

 

# 샘플 코드

 

import UIKit

class CustomCell: UITableViewCell {
    
    let customImageView: UIImageView = {
        let imageView = UIImageView()
        return imageView
    }()
    
    let nameLabel: UILabel = {
        let label = UILabel()
        label.text = "문자열"
        label.font = UIFont.boldSystemFont(ofSize: 15)
        label.textColor = .black
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        addSubview(customImageView)
        addSubView(nameLabel)
        
        // AutoLayout Code...
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError()
    }
    
}

 

AutoLayout 코드는 생략했습니다.

UITableViewCell은 이렇게 원하는 뷰를 구성해서 원하는대로 변경이 가능합니다.

(UICollectionViewCell도 원하는 뷰로 구성가능합니다)

 

잘못된 내용이 있다면 댓글을 달아주세요!

확인해서 수정하도록 하겠습니다!!

 

끝까지 읽어주셔서 감사합니다 :)