kujiraxo’s diary

日々の作業メモ。

Swiftで画像アプリ(その7)〜画面遷移

サムネ一覧画面から画像をクリックすると一枚の画像表示画面に遷移する仕組を作る。

参考サイトは下記。

[iPhone] UICollectionView セルの選択と画面遷移

まずMain.storyboardでView Controllerを新しく追加。Collection Viewの隣に配置する。

View Controllerに対応するClassを作る。メニュー - File - New - File... - iOS - Swift File 「SubViewController.swift」

Main.storyboardのView ControllerのプロパティからClassをSubViewControllerに設定する。

f:id:kujiraxo:20180723163513p:plain

次にsegueを設定する。元のView Controller Sceneの上部左のアイコンを右クリックし、manualの+を掴んでSub View Controller Sceneに持って行く、Present Modallyを選択。

できた矢印segueをクリックし、プロパティからIdentifierにtoSubViewControllerを設定。

f:id:kujiraxo:20180723164007p:plain

Sub ViewにImage Viewを追加し領域全体に広げる。

SubViewController.swiftに下記コードを記載。

class SubViewController: UIViewController {

 

    @IBOutlet weak var imageView: UIImageView!

    var selectedImg: UIImage!

    

    override func viewDidLoad() {

        super.viewDidLoad()

 

        imageView.image = selectedImg

        imageView.contentMode = UIViewContentMode.scaleAspectFit

    }

 遷移元のsegue設定のコードを書く。

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

 

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        collectionView.delegate = self

    }

 

    

    var selectedImage : UIImage?

    

    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

        }

    }

 

}

 これで画像クリックで遷移される。

f:id:kujiraxo:20180723164800p:plain

f:id:kujiraxo:20180723164835p:plain

 

MyPicApp-006