NtKinect: Kinect V2 C++ Programming with OpenCV on Windows10

iOSプログラミング with Swift 3

2016.07.15: created by

2017.04.26: revised by

Swift で TableView を使う

Swift で TableView を使う方法します。

まず、Swiftで別の画面に情報を渡しながら移動する (プログラムで)方法を理解して下さい。これが理解できたら、後は TableView で

TableViewに表示する項目の数を返す --- tableView(_:,numberOfRowsInSection:)->Int関数
TableViewの各項目に表示されるセルを返す --- tableView(_:, cellForRowAtIndexPath:) -> UITableViewCell 関数
TableViewの項目が選択された時に呼び出される --- tableView(_:, didSelectRowAt:) 関数

というメソッドを作ることを理解すればOKです。これらのメソッドを持っているクラスであることを示すのが、親クラスの宣言に続く「プロトコル」であり、TableViewでは

UITableViewDataSource
UITableViewDelegate

の2つが必要です。この「プロトコル」を実装しているクラスは TableView の delegate と dataSource プロパティに代入することができて、この例では self を代入しています。

Xcode を起動して "Create a new Xcode project" で "Single View Application" として新しいプロジェクトを開きます。ここではプロジェクト名を SwiftTableView としています。

ViewController の新しいサブクラスを作ります。

project navigator のプロジェクト名の上でマウスを右ドラッグして "New File..." を選択します。 iOS の Source で Cocoa Touch Class を選んで Next をクリックします。 Class: には "ViewController2", Subclass of: には "UIViewController" Language: には "Swift" を選びます(クラス名は自由に選んで構いません)。 ViewController2.swift がプロジェクトに追加されます。

Main.storyboard上の ViewController の右隣に、ウィンドウ右下の "Object library" から "View Controller" をドラッグして配置します。さらに、新しいView Controller が選択されている状態でウィドウ右上の identity inspector からCustom cluss: に今作成した ViewController2 を設定します。また、Identity の Storyboard IDに ViewController2 と名前をつけます。 (今後、Main.storyboard上のこのUIViewControllerを ViewController2と呼びます。)

Main.storyboard の ViewController2 上に Button とLabel を配置し、 Buttonの表示を "Back" にします。

Main.storyboardの ViewController2 上に配置した Label と "Back" Button をそれぞれViewController2.swift 中のIBoutlet変数とIBAction関数に connect します。

種類	connection	変数名またはメソッド名
Label	Outlet	myLabel
"Back" Button	Action (Touch Up Inside)	tapBack()関数

Main.storyboard上の左側の ViewController の中に TableView を配置します。

Main.storyboardの ViewController 上に配置した TableView を ViewController.swift 中のIBoutlet変数 myTableView に connect します。

ViewController.swift を変更します。

下の例では説明を簡単にするために、テーブルビューの項目数を32個で固定

    return 32

        cell.textLabel?.text = String(indexPath.row)

     controller.id = indexPath.row

これらは必要に応じて自分で変更して下さい。

[注意] この例では項目の個数や内容が変更されることはありませんが、もしもデータの個数や内容が変更される時は TableView の表示を変更するために myTableView.reloadData() メソッドを呼び出す必要があります。

ViewController.swiftに追加するコード(赤字部分)

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var myTableView: UITableView!
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section:Int) -> Int {
        return 32
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: UITableViewCellStyle.subtitle, reuseIdentifier: "Cell")
        cell.textLabel?.text = String(indexPath.row)
        return cell
    }
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let controller = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
        controller.data = indexPath.row
        self.present(controller, animated: true, completion: nil)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        myTableView.delegate = self
        myTableView.dataSource = self
    }

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

}

ViewController2.swift を変更します。

ViewController2.swiftに追加するコード(赤字部分)

import UIKit

class ViewController2: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    var data: Int?
    
    @IBAction func tapBack(_ sender: AnyObject) {
        dismiss(animated: true, completion: nil)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        if data != nil {
            myLabel.text = String(data!);
	}

    }

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

プログラムを実行します。最初の画面では TableView の中に0から31まで数字が並んでいます。スワイプでTableViewの項目をスクロールできます。項目をタップすると選択されて、別の画面に遷移します。 Backボタンで戻ります。

	-->		-->		-->
最初の画面(ViewController)		スクロールして		12を選択(ViewController2)		Backボタンで戻る

サンプルのプロジェクトはこちら。(Xcode 8.3.2版)

http://nw.tsuda.ac.jp