アルバムの写真をCellに表示できない

##画像加工ができるアプリを開発しています
###アルバムの画像をCollectionViewのCellに、複数枚表示しようと考えていますが表示されません。
記事をたくさん読みすぎてコードがごちゃごちゃになっている気がしています...。
もし対処法がわかる方いらっしゃいましたら、教えていただけると幸いです

swift
1⑴画像を表示するためのViewControllerです
2
3import UIKit
4import Photos
5import DKImagePickerController
6
7class MakeViewController: UIViewController,UIImagePickerControllerDelegate,UINavigationControllerDelegate,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
8    
9    @IBOutlet var cameraImageView : UIImageView!
10    @IBOutlet var filterButton : UIButton!
11    @IBOutlet var editButton : UIButton!
12    @IBOutlet var collectionView : UICollectionView!
13    
14    //画像加工するための元となる画像
15    var originalImage: UIImage!
16    
17    //画像加工するフィルターの宣言
18    var filter: CIFilter!
19
20    override func viewDidLoad() {
21        super.viewDidLoad()
22        //UICollectionViewFlowLayoutをインスタンス化
23        let layout = UICollectionViewFlowLayout()
24        layout.sectionInset = UIEdgeInsets(top: 15, left: 5, bottom: 15, right: 5)//レイアウトを調整
25        layout.minimumInteritemSpacing = 0
26        collectionView.collectionViewLayout = layout
27        
28        collectionView.delegate = self
29        collectionView.dataSource = self
30    }
31    
32    //表示するセルの数
33    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
34           //今回はセルを9個にしてみる
35           return 9
36    }
37    
38    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
39           //表示するCellの登録
40           let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MyCustomCell
41          cell.cameraImageView.image = originalImage
42        
43           return cell
44       }
45    
46    //セルの配置について決める
47      func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
48          let horizontalSpace : CGFloat = 10
49          let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace
50          return CGSize(width: cellSize, height: cellSize)
51      }
52
53    //カメラロールにある画像を読み込むメソッド
54    @IBAction func openAlbum(){
55                 
56        let pickerController = DKImagePickerController()
57        // 選択可能な枚数を9にする
58        pickerController.maxSelectableCount = 9
59        pickerController.didSelectAssets = { [unowned self] (assets: [DKAsset]) in
60                                   
61        // 選択された画像はassetsに入れて返却されるのでfetchして取り出す
62        for asset in assets {
63        asset.fetchFullScreenImage(completeBlock: { (image, info) in
64        // ここで取り出せる
65        self.cameraImageView.image = image
66                    })
67                }
68            }
69               self.present(pickerController, animated: true) {}
70                performSegueToEdit()
71                performsegueToFilter()
72             }
73    
74    func performSegueToEdit(){
75        performSegue(withIdentifier: "toEditViewController", sender: nil)
76    }
77    func performsegueToFilter(){
78        performSegue(withIdentifier: "toFilterViewController", sender: nil)
79    }
80  
81    @IBAction func back(){
82          self.dismiss(animated: true, completion: nil)
83      }
84}
85
86・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
87⑵画像を表示したいCellのコードです
88
89import UIKit
90import DKImagePickerController
91
92class MyCustomCell: UICollectionViewCell, UIImagePickerControllerDelegate {
93    @IBOutlet weak var cameraImageView: UIImageView!
94    var originalImage: UIImage!
95    
96    override func awakeFromNib() {
97        super.awakeFromNib()
98    }
99    
100    //カメラ、カメラロールを使った時に選択した画像をアプリ内に表示するためのメソッド
101    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]){
102        
103        cameraImageView.image = info[.editedImage] as? UIImage
104        
105        originalImage = cameraImageView.image //カメラで写真撮った後に画像を加工する元画像として記憶しておく
106    }
107    
108    
109}
110
111・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

行動規範の内容に同意します

回答1件

ベストアンサー

コードを切り貼りする作業そのものは否定いたしませんが、それぞれのコードを役割をよく理解した上でつなぎ合わせないと、必要のない処理を入れてしまったり、同じような処理を重複して宣言したりとバグの温床になりますのでご注意ください。

とりあえず、ご提示いただいたコードをもとに、DKImagePickerController を使って選択した複数の画像を CollectionView に表示させるためのコードは次のようになります。

本質的に足りない部分は

DKImagePickerControllerで選択した複数の画像を一旦配列に保存する部分
配列に保存された画像をセルに反映される部分

と少ないのですが、いくつかのコードを切り貼りした結果、余分な部分もかなりありましたのでコメントアウトしてあります。

新しい処理を追加する際には、もしそのコードの理解が不十分であれば、無闇に現在のプロジェクトに追加せず、まずは新しい処理だけに特化したごく簡単なサンプルプログラムを作成し、その処理を理解した上で追加した方がより見通しの効く作業になります。

コード中のコメントも合わせて参考にしていただければと思います。

Swift
1import UIKit
2import Photos
3import DKImagePickerController
4
5// MARK: 削除 - 必要のないプロトコルは削除する。
6// DKImagePickerController を使うのであれば、UIImagePickerControllerDelegate,UINavigationControllerDelegate は関係ないので削除
7//class MakeViewController: UIViewController,UIImagePickerControllerDelegate,UINavigationControllerDelegate,UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
8class MakeViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
9    //　MARK: 削除 - 使わないアウトレットは削除
10//    @IBOutlet var cameraImageView : UIImageView!
11//    @IBOutlet var filterButton : UIButton!
12//    @IBOutlet var editButton : UIButton!
13    @IBOutlet var collectionView : UICollectionView!
14    // MARK: 追加 - 選択した画像を保存する配列
15    var imageArray : [UIImage] = [UIImage]()
16    
17    // MARK: 削除 - 使わないプロパティは削除
18    //画像加工するための元となる画像
19    //var originalImage: UIImage!
20    //画像加工するフィルターの宣言
21    //var filter: CIFilter!
22    
23    override func viewDidLoad() {
24        super.viewDidLoad()
25        //UICollectionViewFlowLayoutをインスタンス化
26        let layout = UICollectionViewFlowLayout()
27        layout.sectionInset = UIEdgeInsets(top: 15, left: 5, bottom: 15, right: 5)//レイアウトを調整
28        layout.minimumInteritemSpacing = 0
29        collectionView.collectionViewLayout = layout
30        
31        collectionView.delegate = self
32        collectionView.dataSource = self
33    }
34    
35    //表示するセルの数
36    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
37        // MARK: 変更 - セルの数は固定にするのではなく、iamgeArray の数に合わせて動的に変更する
38        //今回はセルを9個にしてみる
39        // return 9
40        return imageArray.count
41    }
42    
43    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
44        //表示するCellの登録
45        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MyCustomCell
46        // MARK: 変更 - 選択する画像は一つではなく「複数」なので、セルに配置する画像は配列に入れた画像を順次利用する
47        //cell.cameraImageView.image = originalImage
48        cell.cameraImageView.image = imageArray[indexPath.row]
49
50        return cell
51    }
52    
53    //セルの配置について決める
54    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
55        let horizontalSpace : CGFloat = 10
56        let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace
57        return CGSize(width: cellSize, height: cellSize)
58    }
59    
60    //カメラロールにある画像を読み込むメソッド
61    @IBAction func openAlbum(){
62        
63        let pickerController = DKImagePickerController()
64        // 選択可能な枚数を9にする
65        pickerController.maxSelectableCount = 9
66        pickerController.didSelectAssets = { [unowned self] (assets: [DKAsset]) in
67            // MARK: もし、DKImagePickerController を呼び出すごとに配列をリセットするのであれば、次の行を有効にする
68            // self.imageArray.removeAll()
69            
70            // 選択された画像はassetsに入れて返却されるのでfetchして取り出す
71            for asset in assets {
72                asset.fetchFullScreenImage(completeBlock: { (image, info) in
73                    // ここで取り出せる
74                    // MARK:　変更 - 複数枚選択するので、配列に代入する
75                    //self.cameraImageView.image = image
76                    // MARK: image が nil の場合は早期リターン
77                    guard let appendImage = image else {
78                        return
79                    }
80                    
81                    // MARK: 追加 - 配列 imageArray に選択した画像を追加し、collectionView をリロードして追加した画像を表示させる
82                    self.imageArray.append(appendImage)
83                    self.collectionView.reloadData()
84                })
85            }
86        }
87        self.present(pickerController, animated: true) {}
88        // MARK: 削除 - 先日の質問で指摘した「余分な処理」が残ったままなので削除
89        //performSegueToEdit()
90        //performsegueToFilter()
91    }
92    
93    func performSegueToEdit(){
94        performSegue(withIdentifier: "toEditViewController", sender: nil)
95    }
96    func performsegueToFilter(){
97        performSegue(withIdentifier: "toFilterViewController", sender: nil)
98    }
99}

Swift
1import UIKit
2import DKImagePickerController
3
4// MARK: -  削除
5// DKImagePickerController を使うのであれば、UIImagePickerControllerDelegate　は必要ない
6//class MyCustomCell: UICollectionViewCell, UIImagePickerControllerDelegate {
7class MyCustomCell: UICollectionViewCell {
8    @IBOutlet weak var cameraImageView: UIImageView!
9    // MARK: 削除
10    //var originalImage: UIImage!
11    
12    override func awakeFromNib() {
13        super.awakeFromNib()
14    }
15    
16    // MARK: 削除 - DKImagePickerController を使うのであれば必要ない
17    // そもそも、セルに画像を入れる処理は MainViewController で行えば良いので必要ない
18//    //カメラ、カメラロールを使った時に選択した画像をアプリ内に表示するためのメソッド
19//    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]){
20//
21//        cameraImageView.image = info[.editedImage] as? UIImage
22//
23//        originalImage = cameraImageView.image //カメラで写真撮った後に画像を加工する元画像として記憶しておく
24//    }
25//
26//
27}

投稿2020/06/14 01:13

TsukubaDepot

総合スコア5086

ay49

2020/06/14 03:15

昨日書き直す中でvar imageArray : [UIImage] = [UIImage]()の追加や performSegueToEdit()とperformsegueToFilter()の削除は行っていたのですが、書き直す以前のコードを載せてしまっていました。編集のお手数をおかけしてしまい申し訳ありません。 TsukubaDepot様の仰るようにコードに対する理解が追いついていなかったと反省しています。2週間でアプリをリリースするというスクールの課題があり、期日に追われて基礎が曖昧になっていました。無事TsukubaDepot様のようにコードを書き直したところ、複数枚表示することができました！!ありがとうございます。最後に一点だけ質問をお伺いしたいのですが、この画像を画面遷移する際には下のようにprepareのコードが必要だと思います。 override func prepare(for segue: UIStoryboardSegue, sender: Any?) { if segue.identifier == "toEditViewController"{ let EditViewController: EditViewController = segue.destination as! EditViewController //EditViewController.originalImage = self.cameraImageView.image } もうcameraImageViewはないので、cameraImageViewのところにimageArray[indexPath.row]を代入することはできないのでしょうか？ EditViewの方でもコードを書き直し、UIImageであるoriginalImageをimageArray[indexPath.row]にする予定です。

TsukubaDepot

2020/06/14 09:14

値渡しですが、1)どのような条件のときに 2) どのようなデータを渡す、ということが質問者さんで明確になっていない限り何とも言えません。 1)はたとえば「画面上のボタンを押したとき」など、Segueを実行する条件、2)は何枚も選んだ写真すべてのデータなのか、それとも特定の一枚なのか、ということなどです。もしご自身の中で明確になっていないようであればそれをまず明確にし、遷移先の画面で何を表示したいのかも決めた上、まずは実装してみてはいかがでしょうか。もちろん、それでも思いつかないのであれば、新しい質問として立ち上げていただければわかる範囲でアドバイスいたします。

ay49

2020/06/14 13:26

@TsukubaDepot様丁寧にご返信下さりありがとうございます。 ⑴ボタンを押した時に⑵複数画像のまま遷移させるという条件を考えていますいま自分で実装していたところ遷移前のコードエラーは解決したのですが遷移先のコードで大量にエラーが出てしまいます。もう少し自力で取り組んでみようと思いますが、何度試しても解決策がわからなかった場合またteratail上で質問させて頂きたいですこの度は複数枚表示に関して明確なアドバイスを頂きありがとうございました。

行動規範の内容に同意します