[iOS] SkeletonView 사용에서의 유의점⚠️

✅ 이번 시간에는 SkeletonView 사용에서의 유의점에 대해서 알아보자.

 

🟠 이전 글에서 SkeletonView에 대해서 확인해 보았다.

 

2021.12.01 - [분류 전체보기] - [iOS] SkeletonView에 대해서 알아보자. ☠️

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

 

하지만 위의 포스팅은 스토리보드를 통해 컬렉션 뷰를 만들어서 사용했기에 코드로 작성할 때는 제대로 작동하지 않는 것을 확인할 수 있었다.

 

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

 

✅ 내가 만든 커스텀셀 예시를 하나 올려두겠다.

class NoticeTableViewCell : UITableViewCell {
    static let identifier : String = "noticeCell"
    
    // MARK: - Properties
    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가 더 깔끔해진다.
        
    }
    
    // MARK: - View Life cycle
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        addContentView()
        noticeSetConstraints()
//        updateStyles()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func addContentView() {
        // 컬렉션 뷰를 코드로 작성할 때는 없어도 괜찮지만, 테이블 뷰를 코드로 작성할 때는 필수로 넣어주어야 snapKit오류가 나지 않는다
        self.isSkeletonable = true // MARK:: 아 ㅡㅡ 이 코드가 없어서 안되는 거였구나.. 스켈레톤 집중
        contentView.isSkeletonable = true
        contentView.addSubViews([noticeBadge, noticeTitle, noticeDate, noticeTag])
    }
    
    private func noticeSetConstraints() {
        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)
        }
    }
}

addContentView()안에 

self.isSkeletonable = true // MARK:: 아 ㅡㅡ 이 코드가 없어서 안되는 거였구나.. 스켈레톤 집중

이 코드가 문제였다.

 

다음에는 더 주의하자