【徒然iOS】気ままにUIKit98〜Colloction View Controller 格子状に並んだセルをタップして画面遷移〜

概要

このマガジンは四十を過ぎたおっさんが、

はじはじアプリ体験メモ

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

【Swift】Colloction View Controllerの使い方。格子状に並んだセルをタップして画面遷移する。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

をハイ、レッツゴ🕺

前準備

念の為、

1. バックアップ

をいつも通りやってから本題へ💃

こんな感じかな💦

本題

コレクションビューコントローラーとは、

UICollectionView（以下、コレクションビュー）を管理するコントローラー

コレクションビューコントローラーは直下にコレクションビューが配置されている
👉コレクションビューコントローラーを使うと画面いっぱいにコレクションビューが表示

↓

• 画面全体で表示したい場合：コレクションビューコントローラ

• 画面全体で表示したくない場合：コレクションビュー

コレクションビューについては、

あたりでやって

てな感じで組み込んでるね〜〜〜

⒈とりあえず、サンプルファイルからイメージをセット

でやったやり方を参考に、

てな感じで〜〜〜

⒉新規ビューを追記して、ナビゲーションバーとイメージを配置

まあ、こんな感じかなと💦

⒊コレクションビューコントローラーを配置して、メニュー画面からのセグエを変更

選んで〜〜〜

配置して〜〜

セグエを繋ぎ直した〜〜〜

⒋Identifierに名前をつけて、セルにImage Viewを配置後、ModeをAspect Fit、Tagを１に設定

てな感じで〜〜〜

ハイ、設定まで完了

⒌イメージにpin制約を付ける

制約追加〜〜〜

ピタッと収まったね👀

⒍コレクションビューコントローラから最初に作ったビューをModalで繋ぎ、Identifierに名前を入力

繋いで〜〜〜

てな感じで繋がるので〜〜〜

てな感じで〜〜〜

⒎最初に作ったビュー用の新規クラスを作って適用し、それぞれのパーツを接続

新規クラスを最終行以降に追加〜〜〜

クラスをビューに適用して〜〜〜

アウトレット〜〜〜

アウトレット〜〜〜

ボタンだけアクション〜〜〜

⒏コード組み込み

//
//  TestCollectionViewController.swift
//
import UIKit
class TestCollectionViewController: UICollectionViewController {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //データの個数を返すメソッド
    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }
    //データを返すメソッド
    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        //セルを取得し、イメージビューに画像を設定して返す。
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("TestCell", forIndexPath: indexPath)
        let imageView = cell.contentView.viewWithTag(1) as! UIImageView
        imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
        return cell
    }
    //セル選択時の呼び出しメソッド
    override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        //セグエを実行する。
        performSegueWithIdentifier("TestSegue", sender: nil)
    }
    //画面遷移実行前の呼び出しメソッド
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        //選択中のセルの画像を取得する。
        let index = collectionView?.indexPathsForSelectedItems()?.first
        let cell = collectionView?.cellForItemAtIndexPath(index!)
        let imageView = cell!.viewWithTag(1) as! UIImageView
        //遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
        let controller:ViewController = (segue.destinationViewController as? ViewController)!
        controller.testTitle = String(index!.row)
        controller.testImage = imageView.image
    }
}

//
//  ViewController.swift
//
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var testNavBar: UINavigationBar!
    @IBOutlet weak var testImageView: UIImageView!
    var testTitle:String!
    var testImage:UIImage!
    override func viewDidLoad() {
        super.viewDidLoad()
        //タイトルと画像を設定する。
        testNavBar.topItem!.title = testTitle
        testImageView.image = testImage
    }
    //ボタン押下時の呼び出しメソッド
    @IBAction func pushButton(sender: UIBarButtonItem) {
        //モーダル表示されているビューコントローラーを解放する。
        self.dismissViewControllerAnimated(true, completion:nil)
    }
}

を参考に、書き換え〜〜〜〜

今回のコード

class CollectionStandardViewController: UIViewController {
    
    @IBOutlet weak var myImageView: UIImageView!
    @IBOutlet weak var myNavigationBar: UINavigationBar!
    var myTitle:String!
    var myImage:UIImage!
    override func viewDidLoad() {
        super.viewDidLoad()
        //タイトルと画像を設定する。
        myNavigationBar.topItem!.title = myTitle
        myImageView.image = myImage
    }
    //ボタン押下時の呼び出しメソッド
    @IBAction func myBarButton(_ sender: UIBarButtonItem) {
        //モーダル表示されているビューコントローラーを解放する。
        self.dismiss(animated: true, completion:nil)
    }
}

class MyCollectionStandardViewController: UICollectionViewController {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    //データの個数を返すメソッド
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }
    //データを返すメソッド
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //セルを取得し、イメージビューに画像を設定して返す。
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionCell", for: indexPath as IndexPath)
        let imageView = cell.contentView.viewWithTag(1) as! UIImageView
        imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
        return cell
    }
    //セル選択時の呼び出しメソッド
    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        //セグエを実行する。
        performSegue(withIdentifier: "MySegue", sender: nil)
    }
    //画面遷移実行前の呼び出しメソッド
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //選択中のセルの画像を取得する。
        let index = collectionView?.indexPathsForSelectedItems?.first
        let cell = collectionView?.cellForItem(at: index!)
        let imageView = cell!.viewWithTag(1) as! UIImageView
        //遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
        let controller: CollectionStandardViewController = (segue.destination as? CollectionStandardViewController)!
        controller.myTitle = String(index!.row)
        controller.myImage = imageView.image
    }
}

⒐コレクションビューにクラスを適用して、シミュレータで実行

適用して〜〜〜

起動後〜〜〜

出てきた〜〜〜

ハイ、サイト記事の操作に関しては以上🕺

ブラッシュアップ

とりあえず、AutoLayout〜〜〜

てな感じで〜〜〜

制約を追加して行って〜〜〜

はい問題なし🕺

後は、

でやった恒例の🌐ボタンを追加して、この記事が公開後に見れるようにしとく〜〜〜

てな感じで〜〜〜

記事公開後、

ハイ、完了💃
実機も問題なし🕺

うーむ🤔

2枚目を選んでるのに、タイトルの数字が-1で表示されるのは、ユーザーさんが戸惑うかもしれないので

全体のコードをこっちに変更

今回のコード（まとめ）

class CollectionStandardViewController: UIViewController {
    
    @IBOutlet weak var myImageView: UIImageView!
    @IBOutlet weak var myNavigationBar: UINavigationBar!
    var myTitle:String!
    var myImage:UIImage!
    override func viewDidLoad() {
        super.viewDidLoad()
        //タイトルと画像を設定する。
        myNavigationBar.topItem!.title = myTitle
        myImageView.image = myImage
    }
    //ボタン押下時の呼び出しメソッド
    @IBAction func myBarButton(_ sender: UIBarButtonItem) {
        //モーダル表示されているビューコントローラーを解放する。
        self.dismiss(animated: true, completion:nil)
    }
}

class MyCollectionStandardViewController: UICollectionViewController {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    //データの個数を返すメソッド
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 7
    }
    //データを返すメソッド
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //セルを取得し、イメージビューに画像を設定して返す。
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionCell", for: indexPath as IndexPath)
        let imageView = cell.contentView.viewWithTag(1) as! UIImageView
        imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
        return cell
    }
    //セル選択時の呼び出しメソッド
    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        //セグエを実行する。
        performSegue(withIdentifier: "MySegue", sender: nil)
    }
    //画面遷移実行前の呼び出しメソッド
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        //選択中のセルの画像を取得する。
        let index = collectionView?.indexPathsForSelectedItems?.first
        let cell = collectionView?.cellForItem(at: index!)
        let imageView = cell!.viewWithTag(1) as! UIImageView
        //遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
        let controller: CollectionStandardViewController = (segue.destination as? CollectionStandardViewController)!
        controller.myTitle = String(index!.row + 1) //ココに１を足した
        controller.myImage = imageView.image
    }
    
    @IBAction func webButton(_ sender: Any) {
        let url = URL(string: myCollectionStandardViewController)
        let safariView = SFSafariViewController(url: url!)
        present(safariView, animated: true)
    }
}

ハイ、完成

今回のポイント

配列なんかで、プログラミング言語によっては、0から始まるので、

１項目は0は常識

と思って、こういうところに配慮しない人も多いんだけど、

ユーザーさんなんてほとんどプログラミング言語なんて知らないし、逆に知ってる人だと、

こいつ、デザイン知らないな

と、心の中でツッコんでるので、
ただ、動けばいいではなくて、
こういうところにも配慮してあげてね〜〜〜。

デザインもプログラミングも結局は、

思いやり

Apple公式

UICollectionViewController | Apple Developer Documentation

さて、次回は

【Swift】Collection View Controllerの使い方。レイアウト変更をアニメーションさせる。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

をレッツゴする🕺