[iPhone] UITableView セルの選択

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

Swift 4.0
Xcode 9.0

 

UITableView と Segue

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

  1. 画面遷移先の View Controller を新しく作成
  2. ストーリーボードで Segue を設定
  3. セルが選択されて遷移する画面を作成
 

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

 
Main.storyboard を選択し、ライブラリーエリア からView Controllerを選択 、スクリーンに置きます。
 

 
この 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」 を選択


名前を SubViewController.swift (例) として
プロジェクト内に「create」する
 
swift ファイルはほとんど空の状態ですので、最低限のクラスとしての記述をします。
 
SubViewController.swift

 
新しく作った View Controller を選択すると「Custom Class」の「Class」から、先ほど作成したSubViewControllerが候補に入っています。
 
SubViewControllerを選択
 

 
これで、StoryBoard の Sub View Controller Scene と
SubViewController.swift が結び付けられました。

 

ストーリーボードで 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」を選択

 
成功すれば2つのViewがつながり矢印 Segue ができます
 

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

 

セルが選択されて遷移する画面を作成

 
Sub View Controller Scene のViewに Image View を置きます
 

 
 
以前に Swift で作ったUITable Viewを元に、セルが選択されSegue を使って遷移する部分がこうなります。
 
ViewController.swift

 
まとめて、ViewController.swiftはこのようになります。

ViewController.swift

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

SubViewController.swift

 
SubViewController を右クリックして New reference Outlet とSub View Controller Scene の imageView を紐付けします。
 
これで、ビルド実行
No.4のセルを選択するとアスペクト比を維持して画面横幅に合わせて画像が表示されます。

 
関連ページ:

References:
UITableView – UIKit | Apple Developer Documentation
UITableViewCell – UIKit | Apple Developer Documentation


ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする