0
class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

let imageView = UIImageView()
let img = UIImage(named: "image")

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.


    imageView.image = img
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 3
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    cell.contentView.addSubview(imageView)

    return cell
}

}

上のようにしても、コレクションビューに画像が表示されないのはなぜでしょうか。

2 件の回答 2

1

imageViewのインスタンスを使いまわしているためです。
一つのViewは一つの親にしかもてないため、
二つ目のセルが生成されて、addSubviewしたときに、一つ目のセルからはがされてしまします。
三つ目のセルが生成されると、二つ目のセルからはがされて三つ目のセルに張り付きます。
CollectionViewは前後のセルを内部的に生成しますので、画面外にあるセルに画像が張り付ていることになります。
そのために、一見、一つも画像が張り付いていないように見えるのだと思います。

セルごとにimageViewのインスタンスを作成し、そこに画像をセットするようにしてみてください。

■追記
セルごとに

let imageView = UIImageView(image: UIImage(named: "image"))

を追加してもダメであれば、以下を試して、各セルが赤くなるか確認してみてください。

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

    cell.backgroundColor = .red

    return cell
}
4
  • 「セルごとにimageViewのインスタンスを作成して、画像をセットする」というのはcellForItemAtの中にlet imageView = UIImageView(image: UIImage(named: "image"))を追加するということで正しいでしょうか。これをしても、画像は表示されませんでした。
    – knms
    Commented 2018年10月9日 9:59
  • 回答に追記しましたので、ご確認ください。
    – user17014
    Commented 2018年10月9日 10:18
  • 試してみると、ちゃんと赤くなりました。Storyboardを使わずにCollectionViewを作ってみようと思いやってみましたがOOPerさんのご指摘の通り、色々と問題点があるようなのでやはりStoryboardを使おうと思います。わざわざ、お付き合い頂きありがとうございました!
    – knms
    Commented 2018年10月9日 10:38
  • datasourceが設定されていないせいかと思ったのですが、赤くなっているということはその点はうまくいっているようですね。お力になれず申し訳ないです。あと、プロジェクトに画像を設定し忘れていると何も表示されないので、その点も確認してみてください。
    – user17014
    Commented 2018年10月9日 10:42
0

あなたのコードには複数の誤りがあります。

  • Viewは複数の場所を掛け持ちできない

     user17014 さんの回答にも書かれている事柄です。

  • 詳細不詳のイニシャライザでUIImageViewのインスタンスを作成している

    UIImageViewで引数のないイニシャライザの動作は不詳です。そのようなイニシャライザでインスンタンスを作成(let imageView = UIImageView()のこと)しても、結果は保障されません。

  • dequeueReusableCell(withReuseIdentifier:for:)で取り出したセルにaddSubview(_:)で子ビューを追加している

    dequeueReusableCellで取得したセルは常に再利用品である可能性があります。従って、以前に追加した子ビューを削除することなく子ビューを追加すると、使っているうちにどんどん子ビューが増えていき、動作速度の上でもメモリ使用量の上でもシステムを圧迫することになります。

Storyboard上でPrototype Cellに子ビューを追加した上で、カスタムセルクラスを使用すれば、上記を全部いっぺんに解消できます。


以下のカスタムセルクラスを用意する。

MyCustomCell.swift (他の部分とつじつまを合わせてくれれば、クラス名は任意です。)

import UIKit

class MyCustomCell: UICollectionViewCell {
    @IBOutlet weak var imageView: UIImageView!

}

Storyboard上のIdentifiercellとしたプロトタイプセルで

  • Custom ClassMyCustomCellに変更する
  • UIImageViewをレイアウトエディタ上で該当のプロトタイプセルに貼り付ける
    (必要に応じてConstraintを設定してください。)
  • 該当のプロトタイプセルを選択した状態でAssistantエディタを開き、レイアウトエディタ上のUIImageViewMyCustomCellクラスのimageViewに接続する

ViewControllerは以下のように修正

import UIKit

class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    //画面に表示するviewは掛け持ちはできない
    //let imageView = UIImageView()
    let img = UIImage(named: "image")

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 3
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //次の行が実行時エラーになるならstoryboardでのcellの設定がうまくいっていない
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCustomCell

        //`dequeueReusableCell(withReuseIdentifier:for:)`で取得したセルは常に再利用品である可能性がある
        //単純に取り出すたびにaddSubview()していくと、子ビューが増える一方でメモリ使用料・処理時間とも増え続ける
        cell.imageView.image = img

        return cell
    }
}

(let cell = ...の行は後ろの方に修正点があるのでご注意を。)

UICollectionViewCellのデフォルトは空っぽなので、storyboardを使用したくないと言う理由が特にあるのでない限り、storyboardでプロトタイプセルのレイアウトを行なって、カスタムセルクラスを使用することをお勧めします。

2
  • 無事に画像が表示されました。ありがとうございました!Storyboardを使わずにやってみようとしましたが、色々と問題点があったんですね。独学で勉強しているだけでは気づけなかった問題点まで指摘して頂いて、とても感謝しています。
    – knms
    Commented 2018年10月9日 10:53
  • @Srypt さん、Viewをプログラムコードで追加しながら画面構成を作っていくと言うのは実は結構難しいです。単純なサンプルコード程度の画面ならなんとかなるんですが、私なんかあちこちで偉そうなことを書いているくせに、少し油断すると全然思った画面にならずに苦労しています。何もかもいきなりわかるもんではありませんので、少しずつマスターして行かれれば良いと思います。
    – OOPer
    Commented 2018年10月9日 10:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。