[swift] IGListKit에서 셀의 코너 라운딩 설정하는 방법

15 Nov 2023

swift

IGListKit을 사용하여 커스텀 셀을 만들 때, 셀의 코너를 라운딩하여 보다 깔끔한 UI를 구현할 수 있습니다. IGListKit은 UICollectionView를 기반으로 동작하기 때문에, UICollectionView의 라운딩 기능을 활용하여 셀의 코너를 라운딩할 수 있습니다.

먼저, IGListKit에서 사용할 커스텀 셀을 생성합니다.

class CustomCell: UICollectionViewCell {
    // 셀의 UI 구성 요소들을 정의합니다.
    //...
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 셀의 UI 요소들을 초기화하고 추가합니다.
        //...
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 라운딩 코너 설정 메소드를 작성합니다.
    func setCornerRadius(radius: CGFloat) {
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
    }
}

IGListKit의 셀 포함 컨트롤러에서 데이터를 연결하는 메소드를 구현합니다.

class MyListViewController: UIViewController, ListAdapterDataSource {
    //...
    
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        let sectionController = MySectionController()
        sectionController.inset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        sectionController.minimumInteritemSpacing = 0
        sectionController.minimumLineSpacing = 0
        return sectionController
    }
    
    //...
}

섹션 컨트롤러를 생성하여 셀을 처리하는 메소드에서 코너 라운딩을 설정합니다.

class MySectionController: ListSectionController {
    //...
    
    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let cell = collectionContext?.dequeueReusableCell(of: CustomCell.self, for: self, at: index) as? CustomCell else {
            fatalError("Could not dequeue cell for index \(index)")
        }
        
        // 셀의 코너 라운딩을 설정합니다. (여기서는 모든 셀을 균일하게 설정합니다.)
        cell.setCornerRadius(radius: 10)
        
        return cell
    }
    
    //...
}

위의 예제에서는 IGListKit을 사용하여 UICollectionView의 셀을 만들고 코너를 라운딩하는 방법을 보여드렸습니다. 적절한 코너 반지름 값을 설정하여 원하는 디자인을 구현해보세요. 추가적으로 IGListKit의 다른 기능들에 대해서도 자세히 알아보시기 바랍니다.

참고 자료: