iOSプログラミング with Swift 3


2016.07.15: created by
2017.04.26: revised by

Swift で TableView を使う

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

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

というメソッドを作ることを理解すればOKです。 これらのメソッドを持っているクラスであることを示すのが、親クラスの宣言に続く「プロトコル」であり、TableViewでは の2つが必要です。 この「プロトコル」を実装しているクラスは TableView の delegatedataSource プロパティに代入することができて、 この例では self を代入しています。


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



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













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






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



  6. Main.storyboardの ViewController2 上に配置した Label と "Back" Button を それぞれViewController2.swift 中のIBoutlet変数とIBAction関数に connect します。
  7. 種類connection変数名またはメソッド名
    LabelOutletmyLabel
    "Back" ButtonAction (Touch Up Inside)tapBack()関数















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



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









  10. ViewController.swift を変更します。
  11. 下の例では説明を簡単にするために、テーブルビューの項目数を32個で固定

        return 32
    
    とし、 項目に表示する文字列は行番号、
            cell.textLabel?.text = String(indexPath.row)
    
    で、項目を選択したときに遷移するViewControllerに渡す情報も行番号
         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()
        }
    
    }
    
  12. ViewController2.swift を変更します。
  13. 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()
        }
    }
    
  14. プログラムを実行します。 最初の画面では TableView の中に0から31まで数字が並んでいます。 スワイプでTableViewの項目をスクロールできます。 項目をタップすると選択されて、別の画面に遷移します。 Backボタンで戻ります。
  15. --> --> -->
    最初の画面(ViewController) スクロールして 12を選択(ViewController2) Backボタンで戻る
  16. サンプルのプロジェクトはこちら。(Xcode 8.3.2版)


http://karel.tsuda.ac.jp