はじめに

今回はUITableViewの説明を行います!

UITableViewはUIButton、UILabelやUITextViewと比べて使い方が複雑ですが、よく使うのでじっくり学習してUITableViewの使い方をマスターしましょう!

Xcodeの基本的な使い方は以下を参考にしてください!

Xcodeの基本的な開発の流れ

UITableViewとは

UITableViewとは

UITableViewとはリスト形式で表示させるコントロールです。ほとんどのアプリでUITableViewが使用されていますので、使い方をしっかりマスターする必要がありますね〜

以下の設定アプリはUITableViewでリスト表示されています。

Simulator Screen Shot 2016.08.20 23.55.56

 

CellとSectionについて

UITableVeiwの1つ1つの項目をCellといい、複数をCellをまとめたものをSectionといいます。

Simulator_Screen_Shot_2016_08_21_0_11_44

 

UITableViewを配置する

Table Viewを配置する

まずはMain.storyboardに「Table View」を配置しましょう!ユーティリティエリアから「Table View」をドラッグして画面に配置します。

スクリーンショット_2016-08-20_23_00_35_2

 

常に画面中央に配置して画面フルに表示されるように調整します。

画面の表示位置を決めます。「Horizontally in Container」と「Vertically in Container」の2つにチェックを入れて「Add 2 Constraints」を選択します。

スクリーンショット_2016-08-20_23_00_48

 

次にTable Viewを画面いっぱいに表示させるようにします。上下左右の端からの距離を0に設定して「Add 3 Constraints」を選択します。

スクリーンショット_2016-08-20_23_38_07

これでTable Viewが画面いっぱいに表示されます。

 

Table View Cellを配置する

Table Viewに重ねるようにユーティリティエリアから「Table View Cell」をドラッグして配置します。

スクリーンショット_2016-08-20_23_00_35

 

Table View Cell のプロパティ「identifier」を設定します。「MyCell」と設定しました!

スクリーンショット_2016-08-20_23_03_11

 

Outletの設定を行う

Table Viewをプログラムから操作するために、Outletを設定しましょう!

エディタを表示させTable Viewをcontrolキーを押しながらエディタにドラッグします。Connectionが「Outlet」になっていることを確認して名前を決めます。

スクリーンショット_2016-08-20_23_04_04

 

UITableViewの表示内容を設定する

UITableViewDelegateとUITableViewDataSourceを追加する

エディタを表示させていよいよプログラムを記述していきましょう!

「ViewController.swift」を開いて上部のクラス宣言している部分に「UITableViewDelegate」、「UITableViewDataSource」の記述を追加します。エラーが発生しますが現時点では気にしないでくださいね〜

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

 

UITableViewに表示する内容を配列で用意する

UITableViewのCellとSectionに表示させる内容を配列で用意します。

Sectionに表示させる内容を以下のように配列「mySection」で宣言しています。

// Sectionで表示する配列
private let mySection: NSArray = ["男の子の名前", "女の子の名前"]

 

各Sectionに表示させるCellの内容を以下のように配列「myManItems」「myWomanItems」で宣言しています。

// Cellで表示する配列
private let myManItems: NSArray = ["太郎", "哲也", "一郎", "宗一郎", "智"]
private let myWomanItems: NSArray = ["花子", "彰子", "葵", "恵美子", "沙苗"]

 

UITableViewを関連付ける

プログラム開始時にUITableViewを関連付けます。以下のようにOutlet「MyUITableView」のdataSourceとdelegateをselfに設定します。

override func viewDidLoad() {
    super.viewDidLoad()

    MyUITableView.dataSource = self
    MyUITableView.delegate = self
}

 

Sectionの数を設定する

以下の関数「numberOfSectionsInTableView」を作成してSectionの数を返します。関数の定義はコード補完で簡単に入力できます。

上記のSectionを表示する配列「mySection」の要素数を返しています。

// Sectionの数を返す
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return mySection.count
}

 

Cellの数を設定する

以下のように関数「tableView」を作成してCellの数を返します。引数「section」は選択されたsectionの番号が0からの順番で返ってきます。

sectionは配列「mySection」で設定するのでsectionが0の場合は「男の子の名前」、1の場合は「女の子の名前」という内容になります。

なので〜 sectionが0の場合は男の子の名前の配列「myManItems」、sectionが1の場合は女の子の名前の配列「myWomanItems」の要素数を返しています。

// Cellに表示する数を返す
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    if section == 0 {
        return myManItems.count
    } else if section == 1 {
        return myWomanItems.count
    } else {
        return 0
    }
}

 

Sectionに表示する内容を設定する

以下の関数tableViewでSectionに表示する内容を設定します。引数sectionは上記の引数sectionと同じように0から順番で返ってくるので配列「mySection」の各要素の内容を返します。

// Sectionの内容を返す
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return mySection[section] as? String
}

 

Cellに表示する内容を設定する

以下のようにCellに表示する内容を返します。

// Cellの内容を返す
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
    let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)
        
    if indexPath.section == 0{
       cell.textLabel?.text = "\(myManItems[indexPath.row])"
    } else if indexPath.section == 1 {
        cell.textLabel?.text = "\(myWomanItems[indexPath.row])"
    }
        
    return cell
}

Cellの内容はUITableViewCell型で返さないといけないので「cell」という名前の変数を用意してCellの内容を返しています。

引数indexPathのsectionプロパティで選択されたsection、rowプロパティもsectionと同様に0からの順番で返ってきて、選択されたCellがわかるので、それぞれに対応した変数「myManItems」と「myWomanItems」の各要素の内容を返しています。

以上でUITableViewに表示する内容を設定することができました!

 

UITableViewで選択した時にどう処理するか記述する

以下の関数がUITableViewで選択された時に呼び出されます。UITableViewが選択されたsectionの番号、Cellの番号、Cellの内容をログとして表示するようにしました!

// Cellがタップされた時に呼び出される
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    if indexPath.section == 0 {
        print("Section:\(indexPath.section) Index:\(indexPath.row) Value:\(myManItems[indexPath.row])")
    } else if indexPath.section == 1{
        print("Section:\(indexPath.section) Index:\(indexPath.row) Value:\(myWomanItems[indexPath.row])")
    }
}

 

上記の記述した「VeiwController.swift」全ての内容は以下のようになります。

//
//  ViewController.swift
//  UITableViewCode
//
//  Created by t-higashi on 2016/08/20.
//  Copyright © 2016年 t-higashi. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var MyUITableView: UITableView!
    
    // Cellで表示する配列
    private let myManItems: NSArray = ["太郎", "哲也", "一郎", "宗一郎", "智"]
    private let myWomanItems: NSArray = ["花子", "彰子", "葵", "恵美子", "沙苗"]
    
    // Sectionで表示する配列
    private let mySection: NSArray = ["男の子の名前", "女の子の名前"]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        MyUITableView.dataSource = self
        MyUITableView.delegate = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // Sectionの数を返す
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return mySection.count
    }
    
    // Sectionの内容を返す
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return mySection[section] as? String
    }
    
    // Cellに表示する数を返す
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        if section == 0 {
            return myManItems.count
        } else if section == 1 {
            return myWomanItems.count
        } else {
            return 0
        }
    }
    
    // Cellの内容を返す
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath)
        
        if indexPath.section == 0{
            cell.textLabel?.text = "\(myManItems[indexPath.row])"
        } else if indexPath.section == 1 {
            cell.textLabel?.text = "\(myWomanItems[indexPath.row])"
        }
        
        return cell
    }
    
    // Cellがタップされた時に呼び出される
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        if indexPath.section == 0 {
            print("Section:\(indexPath.section) Row:\(indexPath.row) Value:\(myManItems[indexPath.row])")
        } else if indexPath.section == 1{
            print("Section:\(indexPath.section) Row:\(indexPath.row) Value:\(myWomanItems[indexPath.row])")
        }
    }
}

 

 

iOSシミュレータで実行してみよう!

上記のプログラムをiOSシミュレータで実行すると以下のようになります!お疲れ様でした!

スクリーンショット_2016-08-23_21_56_53

 

まとめ

  • UITableViewの1つ1つの項目をCell、複数のCellをまとめたものをSectionという
  • Main.storyboardにTable View、Table View Cellを配置する
  • SectionとCellに表示する内容を配列で宣言する
  • プログラムでSectionとCellの数を配列を利用して設定する
  • プログラムでSectionとCellの内容を配列を利用して設定する

これからもがんがんプログラムを解説していきます!

 

参考サイト

UITableViewでテーブルを表示 – Swift Docs

セクション分けしたUITableViewを作る – Swift Docs

 

参考書籍

 

↓ プログラミングを本格的に学びたい方はこちら!