[SWIFT] I tried using UICollectionViewListCell added from Xcode12.

Will UITableView become unusable in a few years? ??

UICollectionViewListCell, which appeared in Xcode12, is a new UI part that replaces UITableView in terms of functionality. You can create a UITableView-like screen with UICollectionViewListCell.

This means that it's useless for UITableView ...

So, I will try using ʻUICollectionViewListCell`, which will be used when displaying the list format screen in the future.

1. Create layout (UICollectionViewLayout)

This time I wanted to display a list in ʻinset Grouped` format, so I set it as follows.

override func viewDidLoad() {
    super.viewDidLoad()
    navigationItem.title = "title"
    collectionView.collectionViewLayout = createLayout()
}

private func createLayout() -> UICollectionViewLayout {
    let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let layout = UICollectionViewCompositionalLayout.list(using: config)
    return layout
}

Now you are ready for a list-style layout like healthcare.

2. Acquisition of display data

This time, execute the API to get the article of Qiita and display the title on the screen. Therefore, create a process to get the list of articles. Use Alamofire

private func getData() {
    AF.request(
        "https://qiita.com/api/v2/items",
        method: .get
    ).responseJSON { response in
        switch response.result {
        case .success:
            if let data = response.data {
                let json = try! JSONDecoder().decode([ItemsResponse].self, from: data)
                print(json)
            }
        case let .failure(error):
            print(error)
        }
    }
}

struct ItemsResponse: Codable, Hashable {
    let body: String?
    let coediting: Bool?
    let commentsCount: Int?
    let createdAt: String?
    let group: String?
    let id: String?
    let likesCount: Int?
    let pageViewsCount: String?
    let privateField: Bool?
    let reactionsCount: Int?
    let renderedBody: String?
    let tags: [Tag]?
    let title: String?
    let updatedAt: String?
    let url: String?
    let user: User?
}
struct User: Codable, Hashable {
    let descriptionField: String?
    let facebookId: String?
    let followeesCount: Int?
    let followersCount: Int?
    let githubLoginName: String?
    let id: String?
    let itemsCount: Int?
    let linkedinId: String?
    let location: String?
    let name: String?
    let organization: String?
    let permanentId: Int?
    let profileImageUrl: String?
    let teamOnly: Bool?
    let twitterScreenName: String?
    let websiteUrl: String?
}

struct Tag: Codable, Hashable {
    let name: String?
    let versions: [String]?
}

You can get the json of the response by executing the method created with this.

3. Register how to display

First, set the Section configuration of the Collection View. This time I wanted to make it a simple one section, so I created the following Enum.

extension FirstViewController {
    enum Section {
        case main
    }
}

Next, register how to display. In terms of TableView, I think it is a process similar to UITableViewDataSource.

private func setupCollectionView() {
    let registration = UICollectionView.CellRegistration<UICollectionViewListCell, ItemsResponse> { cell, _, text in
        var content = cell.defaultContentConfiguration()
        //Set article title
        content.text = text.title
        cell.contentConfiguration = content
    }
    dataSource =
        UICollectionViewDiffableDataSource<Section,
                                           ItemsResponse>(collectionView: self.collectionView) { collectionView, indexPath, text in
        collectionView
            .dequeueConfiguredReusableCell(using: registration,
                                           for: indexPath,
                                           item: text)
    }
}

Create screen update process

It's like taking a snapshot and adding sections and items ...

private func populate(with response: [ItemsResponse]) {
    var snapshot = NSDiffableDataSourceSnapshot<Section, ItemsResponse>()
    snapshot.appendSections([.main])
    snapshot.appendItems(response)
    dataSource?.apply(snapshot)
}

Execute the method created according to the life life cycle

In the end, it became a class like this.

import Alamofire
import UIKit

class FirstViewController: UIViewController {

    @IBOutlet private weak var collectionView: UICollectionView!

    private var dataSource: UICollectionViewDiffableDataSource<Section, ItemsResponse>?
    private var displayData: [ItemsResponse] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = "title"
        collectionView.collectionViewLayout = createLayout()
        setupCollectionView()
        getData()
    }

    private func createLayout() -> UICollectionViewLayout {
        let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        let layout = UICollectionViewCompositionalLayout.list(using: config)
        return layout
    }

    private func setupCollectionView() {
        let registration = UICollectionView.CellRegistration<UICollectionViewListCell, ItemsResponse> { cell, _, text in
            var content = cell.defaultContentConfiguration()
            content.text = text.title
            cell.contentConfiguration = content
        }

        dataSource =
            UICollectionViewDiffableDataSource<Section,
                                               ItemsResponse>(collectionView: self.collectionView) { collectionView, indexPath, text in
            collectionView
                .dequeueConfiguredReusableCell(using: registration,
                                               for: indexPath,
                                               item: text)
        }
    }

    private func populate(with response: [ItemsResponse]) {
        var snapshot = NSDiffableDataSourceSnapshot<Section, ItemsResponse>()
        snapshot.appendSections([.main])
        snapshot.appendItems(response)
        dataSource?.apply(snapshot)
    }

    private func getData() {
        AF.request(
            "https://qiita.com/api/v2/items",
            method: .get
        ).responseJSON { response in
            switch response.result {
            case .success:
                if let data = response.data {
                    let json = try! JSONDecoder().decode([ItemsResponse].self, from: data)
                    self.populate(with: json)
                }
            case let .failure(error):
                print(error)
            }
        }
    }

}

extension FirstViewController {
    enum Section {
        case main
    }
}
///For Qiita article mapping
struct ItemsResponse: Codable, Hashable {

    let body: String?
    let coediting: Bool?
    let commentsCount: Int?
    let createdAt: String?
    let group: String?
    let id: String?
    let likesCount: Int?
    let pageViewsCount: String?
    let privateField: Bool?
    let reactionsCount: Int?
    let renderedBody: String?
    let tags: [Tag]?
    let title: String?
    let updatedAt: String?
    let url: String?
    let user: User?

}
struct User: Codable, Hashable {

    let descriptionField: String?
    let facebookId: String?
    let followeesCount: Int?
    let followersCount: Int?
    let githubLoginName: String?
    let id: String?
    let itemsCount: Int?
    let linkedinId: String?
    let location: String?
    let name: String?
    let organization: String?
    let permanentId: Int?
    let profileImageUrl: String?
    let teamOnly: Bool?
    let twitterScreenName: String?
    let websiteUrl: String?
}

struct Tag: Codable, Hashable {
    let name: String?
    let versions: [String]?
}

Try to run

I was able to use it for the time being.

Swift It's been so long since I forgot how to use UICollectionViewDiffableDataSource ... Not only ʻUICollectionViewListCell but ʻUICollectionView itself has evolved considerably, so I'll do my best to keep up!

Next, I will add refresh processing and additional reading processing, etc., and proceed to a level that can be used as an application.