[SWIFT] J'ai essayé d'utiliser UICollectionViewListCell ajouté à partir de Xcode12.
UITableView deviendra-t-il inutilisable dans quelques années? ??
UICollectionViewListCell, qui est apparu dans Xcode12, est une nouvelle partie d'interface utilisateur qui remplace UITableView en termes de fonctionnalités. Vous pouvez créer un écran de type UITableView avec UICollectionViewListCell.
Cela signifie que c'est inutile pour UITableView ...
Donc, je vais essayer d'utiliser ʻUICollectionViewListCell`, qui sera utilisé lors de l'affichage de l'écran de format de liste à l'avenir.
1. Créer une mise en page (UICollectionViewLayout)
Cette fois, je voulais afficher une liste au format «Inset Grouped», donc je l'ai définie comme suit.
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.title = "Titre"
collectionView.collectionViewLayout = createLayout()
}
private func createLayout() -> UICollectionViewLayout {
let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: config)
return layout
}
Vous êtes maintenant prêt pour une mise en page de type liste comme celle de la santé.
2. Acquisition des données d'affichage
Cette fois, exécutez l'API pour obtenir l'article de Qiita et afficher le titre à l'écran. Par conséquent, créez un processus pour obtenir la liste des articles. Utilisez 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]?
}
Vous pouvez obtenir le json de la réponse en exécutant la méthode créée avec this.
3. Enregistrez comment afficher
Tout d'abord, définissez la configuration de section de la vue de collection. Cette fois, je voulais en faire une section simple, j'ai donc créé l'Enum suivant.
extension FirstViewController {
enum Section {
case main
}
}
Ensuite, enregistrez comment afficher. En termes de TableView, je pense que c'est un processus similaire à UITableViewDataSource.
private func setupCollectionView() {
let registration = UICollectionView.CellRegistration<UICollectionViewListCell, ItemsResponse> { cell, _, text in
var content = cell.defaultContentConfiguration()
//Définir le titre de l'article
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)
}
}
Créer un processus de mise à jour d'écran
C'est comme prendre un instantané et ajouter des sections et des éléments ...
private func populate(with response: [ItemsResponse]) {
var snapshot = NSDiffableDataSourceSnapshot<Section, ItemsResponse>()
snapshot.appendSections([.main])
snapshot.appendItems(response)
dataSource?.apply(snapshot)
}
Exécuter la méthode créée en fonction du cycle de vie
En fin de compte, c'est devenu une classe comme celle-ci.
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 = "Titre"
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
}
}
///Pour la cartographie des articles Qiita
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]?
}
Essayez de courir
J'ai pu l'utiliser pour le moment.
Swift Cela fait si longtemps que j'ai oublié comment utiliser UICollectionViewDiffableDataSource ...
Non seulement ʻUICollectionViewListCell mais ʻUICollectionView lui-même a considérablement évolué, donc je ferai de mon mieux pour le suivre!
Ensuite, je vais ajouter un traitement de rafraîchissement et un traitement de lecture supplémentaire, etc., et passer à un niveau qui peut être utilisé comme une application.
Recommended Posts