iOS SkeletonView 사용 주의점

iOS SkeletonView 사용 주의점

 

스켈레톤 뷰와 관련한 이전 포스팅

https://rldd.tistory.com/252

[iOS] SkeletonView에 대해서 알아보자. ☠️

 

 

문제상황

스토리보드 없이 코드로 마이그레이션 하면서 문제 발생

 

• 코드로 만들때는 커스텀 셀을 만들게 되는데, 셀 자체도 isSkeletonable이어야 함

// 아래 코드가 없어서 문제였음. 전체 코드는 아래 참고
self.isSkeletonable = true

 

프로젝트 코드 (전체 예시)

final class NoticeTableViewCell : UITableViewCell {
    static let identifier : String = String(describing: NoticeTableViewCell.self)
    
    // MARK: - View Life cycle
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

		configureUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // MARK: - UIComponents
    var noticeBadge = UIImageView().then {
        $0.isSkeletonable = true
        $0.image = UIImage(systemName: "circle.fill")
        $0.tintColor = .systemPink
    }
    
    var noticeTitle = UILabel().then {
        $0.isSkeletonable = true
        $0.translatesAutoresizingMaskIntoConstraints = false
    }
    
    var noticeDate = UILabel().then {
        $0.isSkeletonable = true
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.textColor = #colorLiteral(red: 0.3272611201, green: 0.3616444767, blue: 0.3698985577, alpha: 1)
    }
    
    var noticeTag = UILabel().then {
        $0.isSkeletonable = true
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.textColor = .white
        $0.backgroundColor = #colorLiteral(red: 0.7137257457, green: 0.7137256265, blue: 0.7137256265, alpha: 1)
        $0.clipsToBounds = true
        $0.layer.cornerRadius = 8 // 문자열 앞 뒤로 띄어쓰기 2개씩 있으면 UI가 더 깔끔해진다.
        
    }
    
    private func configureUI() { 
        // ✅ 컬렉션 뷰를 코드로 작성할 때는 없어도 괜찮지만, 테이블 뷰를 코드로 작성할 때는 필수로 넣어주어야 snapKit오류가 나지 않는다
        self.isSkeletonable = true 
        contentView.isSkeletonable = true
        contentView.addSubViews([noticeBadge, noticeTitle, noticeDate, noticeTag])
        
        noticeBadge.snp.makeConstraints {
            $0.left.centerY.equalToSuperview()
            $0.width.height.equalTo(8)
        }

        noticeTitle.snp.makeConstraints {
            $0.bottom.equalTo(noticeBadge.snp.centerY).offset(-1)
            $0.left.equalTo(noticeBadge.snp.left).offset(12 * DeviceWidthRatio)
            $0.right.equalToSuperview()
        }

        noticeDate.snp.makeConstraints {
            $0.top.equalTo(noticeBadge.snp.centerY).offset(1)
            $0.left.equalTo(noticeBadge.snp.left).offset(12 * DeviceWidthRatio)
        }
        
        noticeTag.snp.makeConstraints {
            $0.centerY.equalTo(noticeDate.snp.centerY)
            $0.left.equalTo(noticeDate.snp.right).offset(6)
        }
    }
}