【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の情報が追加されます。

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

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

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

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

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

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

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

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

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

image8

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

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

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

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

コンソールの出力内容:

まとめ

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

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

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

Swiftカリキュラム無料公開中!

この記事はSwift入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

Swift学習に必要な情報を一つにまとめていますので効率よくSwiftを学ぶことが出来ます。この機会に是非活用していただければと思います。

Swift入門完全ガイド | 基礎学習から応用までのやり方まとめ
更新日 : 2019年6月22日

アプリ開発未経験でも安心サポート!まずは無料体験レッスン!

アプリ開発、興味あるけど未経験だし、、、」とお悩みの方、ご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「フルオーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。

Swiftならではの学習の進め方、仕事の獲得方法など、より具体的なアドバイスもさせていただいています。

詳しいサービス内容は、下記よりご参照ください。

cta_swift4

LINEで送る
Pocket

書いた人

ヤマシタ

フリーランスエンジニア。ITに関わるさまざまなコンテンツの企画・制作も行っています。
ITに関してはノウハウ系、ライフハック系、トレンド系など、今まで200本以上の執筆経験があります

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説