Table View - Reuse Cell, 코드로만 View 짜기

Groot·2022년 6월 27일

TIL iOS swift 프로젝트

TIL

목록 보기

25/148

TIL

🌱 난 오늘 무엇을 공부했을까?

📌 Table View - Reuse Cell

📍 dequeueReusableCell

지정된 재사용 식별자에 대해 재사용 가능한 테이블 보기 셀 개체를 반환하고 테이블에 추가한다.
셀이 많아져서 메모리가 커지는 걸 방지하기 위해서 사용한다.
View에 보이지 않는 셀은 Reuse 큐에서 대기
tableView(_:cellForRowAt:) delegate 메서드에서 사용하는 dequeueReusableCell(withIdentifier:for:) 메서드에서 셀이 resue 된다.

📍 prepareForReuse

UITableViewCell의 메서드
테이블 보기의 대리자가 재사용할 수 있도록 재사용 가능한 셀을 준비합니다.
dequeueReusableCell(withIdentifier:)에서 개체를 반환하기 직전에 이 메서드를 호출합니다.
잠재적인 성능 문제를 방지하려면 콘텐츠와 관련이 없는 셀의 속성(예: 알파, 편집 및 선택 상태)만 재설정하자.

만국박람회 프로젝트 Step02 시작

UML

UI sketch

UI 코드로 짜보기

let expo1900ScrollView: UIScrollView = {
        let storeLabel = [titleLabel, posterImageView, visitorsLabel, locationLabel, durationLabel, descriptionLabel]
    
        let scrollView = UIScrollView() // 스크롤뷰
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        return scrollView
    }()
    
    let expo1900StackView: UIStackView = { // 스택뷰
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.alignment = .center
        stackView.distribution = .equalSpacing
        stackView.spacing = 10
        return stackView
    }()
    
    let titleLabel: UILabel = { // 라벨설정
        let label = UILabel()
        label.font = UIFont.preferredFont(forTextStyle: .title2)
        label.numberOfLines = 2 // 2줄부터
        label.textAlignment = .center // 가운데 정렬
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let posterImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "poster")
        imageView.contentMode = .scaleAspectFit // 비율을 유지하면서 뷰의 사이즈에 맞게 이미지를 늘리는 옵션(이미지가 뷰를 꽉채우지 못해서 남는 부분은 투명)
        return imageView
    }()
    
    let visitorsLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let locationLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let durationLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0 // 줄의 개수가 무한대
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(expo1900ScrollView)
        setScrollViewConstraints()
        storeLabel.forEach {self.expo1900StackView.addArrangedSubview($0)}
        self.expo1900ScrollView.addSubview(expo1900StackView)
        setStackViewConstraints()
    }

    private func setScrollViewConstraints() {
        expo1900ScrollView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
        expo1900ScrollView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
        expo1900ScrollView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
        expo1900ScrollView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
    }
    
    private func setStackViewConstraints() {
        expo1900StackView.topAnchor.constraint(equalTo: expo1900ScrollView.contentLayoutGuide.topAnchor).isActive = true
        expo1900StackView.bottomAnchor.constraint(equalTo: expo1900ScrollView.contentLayoutGuide.bottomAnchor).isActive = true
        expo1900StackView.leadingAnchor.constraint(equalTo: expo1900ScrollView.contentLayoutGuide.leadingAnchor).isActive = true
        expo1900StackView.widthAnchor.constraint(equalTo: expo1900ScrollView.frameLayoutGuide.widthAnchor).isActive = true
        expo1900StackView.trailingAnchor.constraint(equalTo: expo1900ScrollView.contentLayoutGuide.trailingAnchor).isActive = true
    }