Colin's Blog
[swift] IGListKit에서 테이블 뷰 형태로 데이터 표시하는 방법

IGListKit은 UICollectionView를 좀 더 쉽게 구성하고 관리할 수 있는 도구입니다. IGListKit를 사용하면 리스트 형태로 데이터를 표시할 수 있으며, 여기에는 테이블 뷰도 포함됩니다.

이번 튜토리얼에서는 IGListKit를 사용하여 테이블 뷰 형태로 데이터를 표시하는 방법에 대해 알아보겠습니다.

필요한 준비물

단계별 설명

1. IGListKit 프로젝트 설정

프로젝트에서 IGListKit 프레임워크를 사용하기 위해, CocoaPods을 사용하여 IGListKit을 설치합니다. Podfile에 다음 코드를 추가합니다:

pod 'IGListKit'

그런 다음 터미널에서 다음 명령어를 실행하여 라이브러리를 설치합니다:

$ pod install

2. 데이터 모델 클래스 생성

먼저, 데이터를 표시하기 위한 모델 클래스를 만듭니다. 예를 들어, 사용자 정보를 표시하는 User 클래스를 생성해보겠습니다. User 클래스는 다음과 같은 속성을 가질 수 있습니다:

class User {
    var name: String
    var age: Int
    
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

3. 셀과 레이아웃 클래스 생성

다음으로, 셀과 레이아웃 클래스를 생성합니다. IGListKit에서는 셀 및 레이아웃 클래스를 사용하여 데이터를 커스텀하게 표시할 수 있습니다. 셀 클래스는 UICollectionViewCell을 상속하고, 레이아웃 클래스는 UICollectionViewLayout을 상속합니다.

class UserCell: UICollectionViewCell {
    // 셀의 UI 요소들 선언 및 설정
}

class UserCellLayout: UICollectionViewLayout {
    // 데이터 표시를 위한 레이아웃 설정
}

4. ViewController 설정

마지막으로, IGListKit을 사용하여 테이블 뷰 형태로 데이터를 표시할 ViewController를 설정합니다. ViewController 클래스에서 IGListKit의 ListAdapter 및 ListCollectionView를 사용하여 데이터를 표시합니다.

class ViewController: UIViewController {

    let users: [User] = [
        User(name: "John", age: 25),
        User(name: "Amy", age: 28),
        User(name: "Mike", age: 30)
    ]
    
    lazy var adapter: ListAdapter = {
        return ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    }()
    
    let collectionView: ListCollectionView = {
        let layout = UICollectionViewFlowLayout()
        let collectionView = ListCollectionView(frame: .zero, collectionViewLayout: layout)
        
        return collectionView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(collectionView)
        adapter.collectionView = collectionView
        adapter.dataSource = self
    }
}

extension ViewController: ListAdapterDataSource {
    
    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return users
    }
    
    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        let sectionController = MySectionController()
        return sectionController
    }
    
    func emptyView(for listAdapter: ListAdapter) -> UIView? {
        return nil
    }
}

위의 코드에서 users 배열에 사용자 정보를 저장하고, ListAdapterDataSource를 구현하여 데이터를 반환하고 셀을 구성합니다.

이제 IGListKit를 사용하여 테이블 뷰 형태로 데이터를 표시할 준비가 되었습니다. 실행하여 확인해보세요!

참고 자료:

© 2018 Colin. All rights reserved.