1. 다음과 같은 모양의 Cell을 Snapkit으로 만들어보자

Untitled

3가지 서브뷰가 들어간다

UIImageVIew(), Label(),Label() 라벨은 따로 따로 레이아웃을 설정하는게 귀찮으니 vertical stackview에 넣어 한번에 레이아웃을 구성하게 함.

2. 스텍뷰에 subView를 추가할때는 주의사항이 있음

stackView.addSubview()를 사용하면 경고가 뜨면서 스텍뷰의 내용이 화면에 그려지지 않음

stack overflow검색 결과

height and vertical position are ambiguous for UIStackView

stack 뷰에 서브뷰를 추가할경우 addsubview가 아닌 addArrangedSubView를 사용해아한다고함.

3. 코드

import UIKit
import SnapKit

class ExploreViewCellSnapkit : UITableViewCell{
    let iconImg = UIImageView()
    let fileName = UILabel()
    let fileAttribute = UILabel()
    let verticalStackView = UIStackView()
    static let identifier = "ExploreTableViewCellSK"
    
    override func layoutSubviews() {
        verticalStackView.axis = .vertical
        verticalStackView.spacing = 5.0
        verticalStackView.contentMode = .scaleToFill
				//stackview는 addArragedSubview를 사용해야함
        [fileName,fileAttribute].forEach { label in
            verticalStackView.addArrangedSubview(label)
        }
        
        [iconImg,verticalStackView].forEach { subView in
            contentView.addSubview(subView)
        }
        
        self.fileName.font = .systemFont(ofSize: 16, weight:.bold)
        self.fileAttribute.font = .systemFont(ofSize: 14)
        self.fileAttribute.textColor = .systemGray
        
        iconImg.snp.makeConstraints { make in
            make.centerY.equalToSuperview()
            make.width.equalTo(60)
            make.height.equalTo(60)
            make.leading.equalToSuperview().inset(0)
        }

        verticalStackView.snp.makeConstraints { make in
            make.centerY.equalToSuperview()
            make.leading.equalTo(iconImg.snp.trailing).offset(10)
            make.trailing.equalToSuperview().inset(10)
        }
        
    }
}