[iPhone] UITableView セルの選択

UITableViewのテキストと画像のセルが選択された時のSegueを使った画面遷移をSwiftで簡単に説明します。

以下はいずれかのCell を選択するとそのCellの画像が画面に表示される例です

Xcode 13.4.1

UITableView と Segue

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

[iPhone] UITableView をストーリボードで作る

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

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

画面遷移先の 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

import Foundation
import UIKit

class SubViewController: UIViewController{

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

import Foundation

import UIKit

class SubViewController: UIViewController{

override func viewDidLoad() {

super.viewDidLoad()

}

新しく作った 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についてはこちらを参考にしてください。

[iPhone] Segueで画面遷移させる

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

設定の手順としては、

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

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

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

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

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

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

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

ViewController.swift

　　var selectedImage: UIImage?
　　…

// Cell が選択された場合
func tableView(_ table: UITableView,didSelectRowAt indexPath: IndexPath) {
    // [indexPath.row] から画像名を探し、UImage を設定
    selectedImage = UIImage(named: imgArray[indexPath.row] as! String)
    if selectedImage != nil {
        // SubViewController へ遷移するために Segue を呼び出す
        performSegue(withIdentifier: "toSubViewController",sender: nil)
    }
}

// Segue 準備
override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
    if (segue.identifier == "toSubViewController") {
        let subVC: SubViewController = (segue.destination as? SubViewController)!
        // SubViewController のselectedImgに選択された画像を設定する
        subVC.selectedImg = selectedImage
    }
}

var selectedImage: UIImage?

…

// Cell が選択された場合

func tableView(_ table: UITableView,didSelectRowAt indexPath: IndexPath) {

// [indexPath.row] から画像名を探し、UImage を設定

selectedImage = UIImage(named: imgArray[indexPath.row] as! String)

if selectedImage != nil {

// SubViewController へ遷移するために Segue を呼び出す

performSegue(withIdentifier: "toSubViewController",sender: nil)

}

// Segue 準備

override func prepare(for segue: UIStoryboardSegue, sender: Any!) {

if (segue.identifier == "toSubViewController") {

let subVC: SubViewController = (segue.destination as? SubViewController)!

// SubViewController のselectedImgに選択された画像を設定する

subVC.selectedImg = selectedImage

}

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

ViewController

import UIKit

class ViewController: UIViewController ,
    UITableViewDataSource, UITableViewDelegate{

    @IBOutlet var table:UITableView!

    var selectedImage: UIImage?

    // section毎の画像配列
    let imgArray: NSArray = [
        "img0","img1",
        "img2","img3",
        "img4","img5",
        "img6","img7"]

    let label2Array: NSArray = [
        "2013/8/23/16:04","2013/8/23/16:15",
        "2013/8/23/16:47","2013/8/23/17:10",
        "2013/8/23/17:15","2013/8/23/17:21",
        "2013/8/23/17:33","2013/8/23/17:41"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    //Table Viewのセルの数を指定
    func tableView(_ table: UITableView,
                   numberOfRowsInSection section: Int) -> Int {
        return imgArray.count
    }

    //各セルの要素を設定する
    func tableView(_ table: UITableView,
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        // tableCell の ID で UITableViewCell のインスタンスを生成
        let cell = table.dequeueReusableCell(withIdentifier: "tableCell",
                                             for: indexPath)

        let img = UIImage(named: imgArray[indexPath.row] as! String)

        // Tag番号 1 で UIImageView インスタンスの生成
        let imageView = cell.viewWithTag(1) as! UIImageView
        imageView.image = img

        // Tag番号 ２ で UILabel インスタンスの生成
        let label1 = cell.viewWithTag(2) as! UILabel
        label1.text = "No."+String(indexPath.row + 1)

        // Tag番号 ３ で UILabel インスタンスの生成
        let label2 = cell.viewWithTag(3) as! UILabel
        label2.text = String(describing: label2Array[indexPath.row])

        return cell
    }

    func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120.0
    }

    // Cell が選択された場合
    func tableView(_ table: UITableView,didSelectRowAt indexPath: IndexPath) {
        // [indexPath.row] から画像名を探し、UImage を設定
        selectedImage = UIImage(named: imgArray[indexPath.row] as! String)
        if selectedImage != nil {
            // SubViewController へ遷移するために Segue を呼び出す
            performSegue(withIdentifier: "toSubViewController",sender: nil)
        }
    }

    // Segue 準備
    override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        if (segue.identifier == "toSubViewController") {
            let subVC: SubViewController = (segue.destination as? SubViewController)!
            // SubViewController のselectedImgに選択された画像を設定する
            subVC.selectedImg = selectedImage
        }
    }
}

import UIKit

class ViewController: UIViewController ,

UITableViewDataSource, UITableViewDelegate{

@IBOutlet var table:UITableView!

var selectedImage: UIImage?

// section毎の画像配列

let imgArray: NSArray = [

"img0","img1",

"img2","img3",

"img4","img5",

"img6","img7"]

let label2Array: NSArray = [

"2013/8/23/16:04","2013/8/23/16:15",

"2013/8/23/16:47","2013/8/23/17:10",

"2013/8/23/17:15","2013/8/23/17:21",

"2013/8/23/17:33","2013/8/23/17:41"]

override func viewDidLoad() {

super.viewDidLoad()

}

//Table Viewのセルの数を指定

func tableView(_ table: UITableView,

numberOfRowsInSection section: Int) -> Int {

return imgArray.count

}

//各セルの要素を設定する

func tableView(_ table: UITableView,

cellForRowAt indexPath: IndexPath) -> UITableViewCell {

// tableCell の ID で UITableViewCell のインスタンスを生成

let cell = table.dequeueReusableCell(withIdentifier: "tableCell",

for: indexPath)

let img = UIImage(named: imgArray[indexPath.row] as! String)

// Tag番号 1 で UIImageView インスタンスの生成

let imageView = cell.viewWithTag(1) as! UIImageView

imageView.image = img

// Tag番号２で UILabel インスタンスの生成

let label1 = cell.viewWithTag(2) as! UILabel

label1.text = "No."+String(indexPath.row + 1)

// Tag番号３で UILabel インスタンスの生成

let label2 = cell.viewWithTag(3) as! UILabel

label2.text = String(describing: label2Array[indexPath.row])

return cell

}

func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

return 120.0

}

// Cell が選択された場合

func tableView(_ table: UITableView,didSelectRowAt indexPath: IndexPath) {

// [indexPath.row] から画像名を探し、UImage を設定

selectedImage = UIImage(named: imgArray[indexPath.row] as! String)

if selectedImage != nil {

// SubViewController へ遷移するために Segue を呼び出す

performSegue(withIdentifier: "toSubViewController",sender: nil)

}

// Segue 準備

override func prepare(for segue: UIStoryboardSegue, sender: Any!) {

if (segue.identifier == "toSubViewController") {

let subVC: SubViewController = (segue.destination as? SubViewController)!

// SubViewController のselectedImgに選択された画像を設定する

subVC.selectedImg = selectedImage

}

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

SubViewController

import Foundation
import UIKit

class SubViewController: UIViewController{

    @IBOutlet var imageView: UIImageView!
    var selectedImg: UIImage!

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView.image = selectedImg
        // 画像のアスペクト比を維持しUIImageViewサイズに収まるように表示
        imageView.contentMode = UIView.ContentMode.scaleAspectFit
    }
}

import Foundation

import UIKit

class SubViewController: UIViewController{

@IBOutlet var imageView: UIImageView!

var selectedImg: UIImage!

override func viewDidLoad() {

super.viewDidLoad()

imageView.image = selectedImg

// 画像のアスペクト比を維持しUIImageViewサイズに収まるように表示

imageView.contentMode = UIView.ContentMode.scaleAspectFit

}

SubViewController を右クリックして New reference Outlet とSub View Controller Scene の imageView を紐付けします。

これで、ビルド実行
No.4のセルを選択するとアスペクト比を維持して画面横幅に合わせて画像が表示されます。