❌ 컬렉션 뷰를 가로 스크롤할 때 다음 이미지가 살짝 보이는 문제

 

🔍 문제 원인

layout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 300)

 

• UIScreen.main.bounds.width는 전체 화면 너비를 기준으로 설정됩니다.
• 하지만, UICollectionView는 UITableViewCell 안에 있어서 contentView.bounds.width를 기반으로 설정해야 합니다.
• layoutSubviews()에서 collectionView.frame = contentView.bounds로 설정되어 있지만, layout.itemSize가 초기 생성 시점에 설정되므로 변경되지 않을 수 있음.
• 따라서 컬렉션 뷰의 실제 크기보다 itemSize가 작거나 크면, 다음 아이템이 살짝 보이는 문제 발생.

 

🛠 해결 방법

1. 컬렉션 뷰의 itemSize를 contentView.bounds.width로 동적으로 설정
2. layoutSubviews()에서 layout.itemSize를 업데이트

class ImageTableViewCell: UITableViewCell {
    
    static let reuseIdentifier: String = "ImageTableViewCell"
    
    private var images: [String] = []
    
    // ✅ collecitonView 선언 클로저에서 별도로 빼내어 설정 
    private let layout: UICollectionViewFlowLayout = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        return layout
    }()
    
    private lazy var collectionView: UICollectionView = {
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.isPagingEnabled = true
        collectionView.backgroundColor = .black
        return collectionView
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        contentView.backgroundColor = .black
        contentView.addSubview(collectionView)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(ReviewImageCell.self, forCellWithReuseIdentifier: ReviewImageCell.reuseIdentifier)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        collectionView.frame = contentView.bounds
        
        // ✅ 여기서 itemSize를 업데이트
        layout.itemSize = CGSize(width: contentView.bounds.width, height: contentView.bounds.height)
        layout.invalidateLayout() // 레이아웃 다시 계산
    }
    
    func configure(images: [String]){
        DispatchQueue.main.async {
            self.images = images
            self.collectionView.reloadData()
        } 
    }
}

 

 

 

📌 추가 설명

1. layoutSubviews()에서 layout.itemSize를 업데이트
   • contentView.bounds.width를 가져와서 정확한 크기로 설정.
   • layout.invalidateLayout()을 호출하여 다시 계산.
2. layout.itemSize = CGSize(width: contentView.bounds.width, height: contentView.bounds.height)
   • UIScreen.main.bounds.width가 아닌 contentView.bounds.width를 사용해야 UITableViewCell의 크기에 맞게 조정됨.
3. 결과
   • 컬렉션 뷰에서 스크롤할 때 다음 이미지가 보이는 문제 해결.
   • 완전한 페이지 단위 스크롤이 적용됨.