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

iPhoneのUITableViewとUICollectionViewは基本的でスクロールすることで小さい画面を有効に使えるUIです。更にマス目に入った画像を選択して画面遷移して拡大表示する設定を試してみます。
 

collectionview_1
collectionview_10

Swift 3.0
Xcode 8.0

 

sponsored link

UICollectionView と Segue

 
UICollectionViewが出来上がったところから始めます。できていない場合は こちら を参照して作成してください。作成の大まかな流れは

  1. 画面遷移先の View Controller を新しく作成
  2. ストーリーボードでの Segue の設定
  3. セルが選択されたときの挙動をコーディングする

 

1. 画面遷移先の View Controller を新しく作成

 
Main.storyboard を選択して、右端下にあるライブラリーエリアの Object Library から
View Controller を選択
 
view_controller_1
 
スクリーンへドラッグ・アンド・ドロップします
 
スクリーンショット 2016-04-08 16.06.03
 
この View Controller に対応するClass を新たに作成します。

メニューの「File」「New」「File…」

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-17-17-13-18

「iOS」-> 「Swift File」 を選択

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-17-17-14-44
名前を SubViewController.swift (例) としてプロジェクト内に「create」
 
swift ファイルはほとんど空の状態なので最低限のクラスとしての記述をしておきます。
 
SubViewController.swift

 
ストーリーボードで 新しく作った View Controller を選択してライブラリーエリアの Identity Inspector に入り「Custom Class」の「Class」から、候補が選択できます
 
SubViewController を選択
 
スクリーンショット 2016-04-08 16.47.02
 
これで、StoryBoard の Sub View Controller Scene とSubViewController.swift が結び付けられました。
 

2. ストーリーボードでの Segue の設定

 
UICollectionView が設定されている View Controller Scene と
Sub View Controller Scene を segue で結びます

  1. View Controller Scene の上部バーにあるアイコンを右クリック
  2. manual の+をつかんでSub View Controller Sceneに持っていく
  3. Sub View Controller Scene から選択肢が出るので「Modal」を選択

 collectionview_11

 
成功すれば2つのViewがつながり矢印 Segue ができます
 
collectionview_12
 
この Segue の上にできたアイコンをクリックして、ライブラリエリアにある Attributes Inspector を選択
 
スクリーンショット 2016-01-20 14.26.05
 
identifierに「toSubViewController」と記述。このキーワードは画面遷移で使われます
 

3. セルが選択されたときの設定をする

 
Sub View Controller Scene のView一杯に Image View を置きます
 
スクリーンショット 2014-11-17 19.58.41
 
セルが選択されSegue を使って遷移する部分です。背景、文字色も少し変えましたがそれはストーリーボードでの変更です。
 

 
SubViewController を右クリックして New reference Outlet とSub View Controller Scene の imageView を結びます。
 
collectionview_13
 
まとめると
ViewController.swift

 

SubViewController.swift

 

ビルドして、iPhone6sのサイズで実行すると
 

collectionview_1
 
No.6のセルを選択すると
 

collectionview_10 
アスペクト比を維持して画面いっぱいに画像が表示されます。

 
 
関連ページ: