[iPhone] UITableView セルの選択

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

Xcode 13.4.1

 

UITableView と Segue

 

UITableViewでプロジェクトが出来上がった前提で始めます。こちらを参照してください。
 

TableViewを作るには、UITableView専用のTableViewControllerを使うこともできますが、汎用的なViewCo...
 

 

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

 

この作業をする前にView Controller の概要を表示してくれる「Minimap」が煩わしいので消しておきます
「Editor」から「MiniMap」のチェックを外すと消えます

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

 
この View Controller に対応するClass を新たに作成します。

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

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


名前を SubViewController.swift (例) として
プロジェクト内に「create」する
Where、Group、Targets はそれぞれのプロジェクト名


 
swift ファイルはほとんど空の状態ですので、最低限のクラスとしての記述をします。
 
SubViewController.swift

 
新しく作った View Controller で、

  • バーにあるアイコン View Controller を選択
  • 「Show the Identity Inspector」タグ
  • 「Custom Class」の「Class」

先ほど作成したSubViewControllerが候補に入っています。

 
SubViewControllerを選択
 

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

 

ストーリーボードで Segue を設定

 

UITableView が設定されている View Controller Scene と
Sub View Controller Scene を segue で結びます。基本的なSegueについてはこちらを参考にしてください。
 

アプリでA画面からB画面に遷移したいケースは結構あります。コードで記述せざる得ない場合もありますが、StoryboardでSceneを作って...
 
設定の手順としては、

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

  

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

 
この Segue の上にできたアイコンをクリックして
ライブラリエリアにある Attributes Inspector を選択
 

 
identifierに「toSubViewController」と記述。このキーワードは画面遷移で使われます

 

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

 

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

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

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

ViewController

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

SubViewController

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

 

関連ページ:

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


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

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

フォローする