写真を別ビューに渡してみよう

Blog

 

今日は、collectionViewの写真を選択したら別ビューで表示する方法を紹介します。

 

collectionViewに写真を表示するまではこちらを参考にしてください。

 

今は、写真が表示されているだけの状態です。

 

 

 

 

ここから写真をタップしたら別ビューへ表示させていきます。

 

では、実際にやっていきましょう。

 

 

UIの設定

 

 

  1. ViewControllerを追加。
  2. Buttonを追加し「Back」に変更。
  3. imageViewを追加し、Content Modeを「Aspect Fit」に変更。

 

 

 

 

ファイルの作成

 

 

追加したViewContollerにファイルを作って関連させます。

 

  1. 「subViewController.swift」を作成。
  2. Classに「subViewController.swift」を選択。

 

1 )

 

 

2 )

 

 

 

セグエの設定

 

セグエを追加し設定します。

 

  1. 左側のcollectionViewの上部の黄色のアイコンを「controlキー」を押しながら、subViewControllerまでつなぎ「show」を選択。
  2. セグエを選択し、Identifierを「toSubViewController」にする。

 

1 )

 

 

2 )

 

 

 

コネクトとコーディング

 

subViewController.swiftにコーディングしていきます。

 

  1. ImageViewをOutlet接続。
  2. ButtonをAction接続、コーディング。
  3. 画像を受け取る変数を追加。
  4. 受け取った画像をImageViewに表示するコード記入。

 

import UIKit

class subViewController: UIViewController {
    
    
    @IBOutlet weak var imageView: UIImageView!
    var selectedImg: UIImage!
    
    

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView.image = selectedImg
        
    }
    
    
    @IBAction func backBtn(_ sender: Any) {
        
        dismiss(animated: true, completion: nil)
    }

}

 

 

 

 

 

コーディング

 

ViewController.swiftのコーディングをしていきます。

 

  1. 写真がタップされた時のコードを記入。
  2. セグエのコードを記入。

 

1 )

  func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
       
        selectedImage = UIImage(named: photos[indexPath.row])
        if selectedImage != nil {
           
            performSegue(withIdentifier: "toSubViewController",sender: nil)
        }
    }

 

2 )

  override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        if (segue.identifier == "toSubViewController") {
            let subVC: subViewController = (segue.destination as? subViewController)!
            
            subVC.selectedImg = selectedImage
        }
    }

 

 

 

 

 

全コード

 

import UIKit

class ViewController: UIViewController ,UICollectionViewDataSource,
UICollectionViewDelegate {
    
    var selectedImage : UIImage?
    
    // サムネイル画像の名前
    let photos = ["dog1", "dog2", "dog3", "dog4", "dog5" ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{
        
        // "Cell" はストーリーボードで設定したセルのID
        let testCell:UICollectionViewCell =
            collectionView.dequeueReusableCell(withReuseIdentifier: "Cell",
                                               for: indexPath)
        
        // Tag番号を使ってImageViewのインスタンス生成
        let imageView = testCell.contentView.viewWithTag(1) as! UIImageView
        // 画像配列の番号で指定された要素の名前の画像をUIImageとする
        let cellImage = UIImage(named: photos[indexPath.row])
        // UIImageをUIImageViewのimageとして設定
        imageView.image = cellImage
        
        // Tag番号を使ってLabelのインスタンス生成
        let label = testCell.contentView.viewWithTag(2) as! UILabel
        label.text = photos[indexPath.row]
        
        return testCell
    }
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // section数は1つ
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        // 要素数を入れる、要素以上の数字を入れると表示でエラーとなる
        return photos.count;
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
       
        selectedImage = UIImage(named: photos[indexPath.row])
        if selectedImage != nil {
           
            performSegue(withIdentifier: "toSubViewController",sender: nil)
        }
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        if (segue.identifier == "toSubViewController") {
            let subVC: subViewController = (segue.destination as? subViewController)!
            
            subVC.selectedImg = selectedImage
        }
    }
        
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

 

 

import UIKit

class subViewController: UIViewController {
    
    
    @IBOutlet weak var imageView: UIImageView!
    var selectedImg: UIImage!
    
    

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView.image = selectedImg
        
    }
    
    
    @IBAction func backBtn(_ sender: Any) {
        
        dismiss(animated: true, completion: nil)
    }

}

 

 

 

実行結果

 

 

 

 

 

 

いかがでしたでしょうか。

 

以上で「写真を別ビューに渡してみよう」の説明を終わります。

 

 

🤗

 

 

コメント