UITableViewで表を表示する方法(その1) – Xcodeの使い方8 | 沖縄人がサラリーマンからの独立を目指すブログ

はじめに

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

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

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

Xcodeの基本的な開発の流れ

UITableViewとは

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

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

CellとSectionについて

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

UITableViewを配置する

Table Viewを配置する

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

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

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

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

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

Table View Cellを配置する

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

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

Outletの設定を行う

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

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

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])")
        }
    }
}