[iPhone] UITableView セルの選択

iPhoneアプリ開発でUITableView は基本です。UITableViewのテキストと画像のセルが選択された時のSegueを使った画面遷移をSwiftで簡単に説明します。
 
いずれかのCell を選択するとそのCellの画像が画面に表示される例です
 

table2_01
table2_02

 

Swift 3.0
Xcode 8.0

 

sponsored link

UITableView と Segue

 
UITableViewでプロジェクトが出来上がった前提で始めます。できていない場合はこちらUITableView を参照してください。
作成の大まかな流れは

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

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

 
Main.storyboard を選択して、右端下にあるライブラリーエリアの Object Library からView Controllerを選択 (下に検索がありますので「View」とすれば直ぐに出てきます。)
 
view_controller_1
 
スクリーンへドラッグ・アンド・ドロップします
 
スクリーンショット 2014-11-17 19.24.52
 
この 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 を選択
 
スクリーンショット 2014-11-17 19.42.23
 
これで、StoryBoard の Sub View Controller Scene と
SubViewController.swift が結び付けられました。

 

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

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

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

 
present_modal 
成功すれば2つのViewがつながり矢印 Segue ができます
 
スクリーンショット 2014-11-17 19.53.05
 
この 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
 
ストーリーボードで背景、文字色を多少見栄が良くなるように変更
 
以前に Swift で作ったUITable View を元に、セルが選択されSegue を使って遷移する部分がこうなります。
 
ViewController.swift

 
追加したViewController.swiftはこのようになります。

ViewController.swift

 
遷移先で画像を表示できるように設定します。

SubViewController.swift

 
SubViewController を右クリックして New reference Outlet とSub View Controller Scene の imageView を結ぶ
 
vc_2
 

ビルドして、iPhone6sのサイズで実行すると
 
table2_01
 
No.4のセルを選択すると
 
table2_02 
アスペクト比を維持して画面いっぱいに画像が表示されます。

Objective-C のケースは こちら です