【Swift】縦横スクロールのデータ展開ができない

Question

前提・実現したいこと

Swift初心者です。
参考書やWebsiteを参考に開発を進めているのですが、
タイトルのように縦横スクロールできる画面を作成したく、以下のサイトを参考にViewの作成を行いました。
https://qiita.com/misakiagata/items/5c66fa69d72897474209

※縦のタイトルはAPIにより取得し、タイトルに関連する画像を横スワイプに展開するためAPIより取得、縦、横ともにインフィニットにスクロールする要件となっています。

発生している問題・エラーメッセージ

viewDidLoad内でAPIをコールし、データを取得しており、
UITableViewのタイトルデータとUICollectionView内のデータはAPIのレスポンスによって内容が変わります。
APIで取得したデータをどのようにコントロールし、どこでUICollectionView内のデータとして展開すれば良いかが分からない状態で困っています。
解決策と原因を教えていただきたいです。

Answer 1

Qiita の記事に合わせれば、下記のあたりで表示するようにすれば良いかと思います。
ただし、画像そのものの取得は非同期で別途行う必要がありますのでご注意ください。

extension ContentsViewController: UITableViewDelegate, UITableViewDataSource {
    // 中略
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContentsTableViewCell", for: indexPath) as! ContentsTableViewCell
        
        // tableView のタイトルはここでセットする
        cell.titleLabel.text = "(indexPath.row + 1)行目"
        cell.setCollectionViewDataSourceDelegate(dataSourceDelegate: self, forRow: indexPath.row)
        cell.contentsCollectionView.reloadData()
        return cell
    }
    // 後略
}

extension ContentsViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    // 中略
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ContentsCollectionViewCell", for: indexPath) as! ContentsCollectionViewCell
        
        // CollectionView の画像はここでセットする
        // ここでは空の画像、ランダムな背景色をセット
        cell.contentsImageView.image = UIImage()
        var colors: [UIColor] = [.red, .black, .blue, .brown, .cyan, .green, .magenta]
        cell.contentsImageView.backgroundColor = colors[Int.random(in: 0..<colors.count)]
        
        return cell

    }
    // 後略
}

Comments

[k_itani]

早々のご回答ありがとうございます。
APIで取得したデータは、collectionView(_:cellForItemAt:)内で展開するということでしょうか？
勉強不足で恐縮ですが、ご教示いただけますと幸いです。

[TsukubaDepot]

そういうことになりますが、k_itaniさんが具体的にどのタイミングで、どのような方法で取得されるかによって詳細は異なってくるかと思います。

大雑把に言えば
1. APIから非同期でデータを取得し、何らかの形式で保存する
2. 保存が完了したら collectionView のリロードを行う
という流れになるかと思います。

[k_itani]

認識が間違ってたらすみませんが、
collectionView(_:cellForItemAt:)内でデータを取得するAPIをコールし、レスポンスデータを配列に格納したものを表示するということであってますか？
また、その場合、TableViewとCollectionViewとのデータの紐付けはどのようにすればよろしいでしょうか？

[TsukubaDepot]

そこでAPIからデータを取得しようと試みても正常に取得できません（セルを生成する瞬間にAPIからデータが取得できない、つまり完全なリアルタイム処理ができないため）。
もし、この点のご理解が及んでいないようであれば、まずは非同期ネットワーク処理のあたりに関する知識を整理された方が、最終的なご理解は早いかもしれません。
例えば、関連する質問はこの辺りがあります。
https://teratail.com/questions/280659

[k_itani]

ご指摘ありがとうございます。
TsukubaDepotのおっしゃる通り、この辺りの理解はあまりできてないと思います。
参考ページのご共有ありがとうございます。こちらを参考に勉強してみます。

[TsukubaDepot]

たとえば、tableViewにWebAPIで取得したデータを表示できるようになれば、理解も進むと思います（ちなみに、WebAPIからデータを取得してtableViewに表示するサンプルは、大抵の初心者本にも掲載されています）。
参考にされている記事は有用ではあるのですが、tableViewにCollectionViewも載せている例なので、その階層構造もきちんと理解する必要がありそうです。