【Swift入門】UITableViewの使い方をわかりやすく解説!

iPhoneやiPadなどの画面でリストを表示するには、UITableViewを使用します。

この記事では、

・XcodeでUITableViewを配置する方法
・UITableViewの詳細な実装方法

というUITableViewの基本的な解説から、

・UITableViewで選択したセルをコンソールに出力する方法

などの応用的な使い方に関しても解説していきます。

今回はそんなUITableViewの使い方についてわかりやすく解説します!

※この記事ではSwift4.0を使用しています。

UITableViewとは

UITableViewは、配列などで格納されたデータをリストとして画面に表示したい場合に使います。

iPhoneやiPadのアプリ開発では使用頻度が高いUIで、iPhoneでは設定画面などのリスト表示で使われています。

UITableViewは1つの表示する項目をセルと言います。

セルを使用するには、UITableViewCellを使用します。

また、TableViewを使用するためには「delegate」「datasource」という機能を使用する必要があります。

では、次項より実際にUITableViewの使い方を見ていきましょう!

UITableViewの使い方

UITableViewを画面に配置する

ここでは実際にXCodeを使用して、UITableViewを配置していきます。
※本記事ではSwift4、XCodeのバージョン9を使用しています。

XCodeのプロジェクトを立ち上げたら、Main.storyboardから「Table View」を配置します↓
table_image1

TableViewを追加すると、画面左のView Controller→Viewの配下に Table Viewが追加されます。

次に、配置したTable Viewを画面いっぱいに広げていきます↓

table_image2

次に、「Table View Cell」を画面に配置します↓

table_image3

Table View Cellを配置すると、画面左のTable Viewの配下にTable View Cellが追加されます。

情報を取得するための設定

前項でTable ViewとTable View Cellを配置したら、storyboardからdataSource、delegateの設定を行います。

dataSource(データソース)とは、テーブルビューのデータソースとして機能するオブジェクトです。

また、delegate(デリゲート)はTable VIewを使用する上で、リストの行数を返す、セクション数を返すなどのデリゲートメソッドをViewControllerにデリゲートする必要があります。

storyboardより「Table View」を選択し、画面の上にある「View Controller」「First Responder」「Exit」の各ボタンの内、「View Controller」のボタンまでcontrolボタンを押しながらドラッグします↓

table_image4

すると、以下のように黒いポップアップが表示されますので、「dataSource」と「delegate」を選択します↓

table_image5

次に、Table View Cellを選択してideatifierという項目からセルの名称を指定します↓

table_image6
名称は「SampleCell」としていますが、好きな名称を付けていただいても大丈夫です。

情報を表示するための設定

ここでは、TableViewに情報を表示するためにViewController.swiftを編集していきます。

まずはTableViewをViewController.swiftに追加します。

追加するにはTableViewをcontrolを押しながらTable Viewを選択し、ViewController.swiftへドラッグします↓

table_image7

ポップアップ画面が表示されますのでNameの項目に「TableView」を入力してConnectボタンを押します。

すると、ViewController.swiftに以下のようにTable Viewの情報が追加されます。

@IBOutlet weak var TableView: UITableView!

TableViewのDatasourceとDelegateを使用するため、ViewController.swiftclassの箇所を以下のように編集してください。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource

この記述をするだけではエラーが発生しますので、DelegateとUITableViewDataSourceメソッドを追加します。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 0
}
    
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    return UITableViewCell()
}

TableViewにデータを表示するため、以下のような配列を作成します。

//配列fruitsを設定
let fruits = ["apple", "orange", "melon", "banana", "pineapple"]

ここまでで、ViewController.swiftは以下のようになります。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
    
    
    @IBOutlet weak var TableView: UITableView!
    
    //配列fruitsを設定
    let fruits = ["apple", "orange", "melon", "banana", "pineapple"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruits.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "SampleCell", for: indexPath)
        
        // セルに表示する値を設定する
        cell.textLabel!.text = fruits[indexPath.row]
        
        return cell
    }
    

}

追加した2つのメソッドの内、1番上のメソッドは返り値に表示するセルの個数を指定する必要がありますので、表示するために作成した配列fruitsの個数を指定しています。

2番目のメソッドでは、tableView.dequeueReusableCellで、先ほどstoryboard上でTable View CellのIdentifierに設定した「SampleCell」を指定する必要があります。

TableViewの動作を確認してみよう

ここまでできたら、あとはビルドして動作を確認してみましょう。

以下のように表示されたら成功です!

image8

UITableViewで選択した情報を取得する

ここでは、Table Viewで選択したセルを取得してコンソールで出力する方法を紹介します。

コンソールに出力するには、セルが選択されたときに呼ばれるDelegateメソッドを、ViewController.swiftに追加します。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    print("cell:(indexPath.row) fruits:\(fruits[indexPath.row])")
}

再度ビルドしてセルを選択すると、コンソールに以下のように選択したセルの情報を取得することができます。

コンソールの出力内容:

cell:3 fruits:banana
cell:2 fruits:melon

まとめ

ここではUITableViewの使い方について、XCodeを使用して配置する方法やソースコードの実装方法、選択したセルの内容をコンソールに出力する方法などについて解説しました。

Table Viewは実際のアプリ開発でもよく使われますので、仕組みはよく理解しておきましょう。

もし、Table Viewの使い方を忘れてしまったら、この記事を思い出してくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

ヤマシタ

システムエンジニアとして10年勤務→フリーランスへ。現在は侍ブログ編集部としてこれまでに200記事以上の記事を執筆。
大規模システム開発からWebアプリ開発まで経験あり。最近ではPythonの機械学習に挑戦中。