[Swift3]猫でもわかるUITableViewの表示の仕方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Swift

初心者なので、いつも忘れるTableViewの表示の仕方。自分用のメモの意味も込めて、本当に最初の最初から、1手順も漏らさずまとめておこうと思う。

これを見れば手順通り作業することさえできれば、誰でも絶対にテーブルの表示ができる。

Xcodeの起動からエディタが立ち上がるまで

Xcodeを起動し、プロジェクトを作成する

Xcodeの起動画面から「Create a new Xcode project」をクリック。

Xcodeの起動画面

プロジェクトを作成する

プロジェクトの種類は「Single View Application」を選択し、次へ。

プロジェクトの種類を選択する画面

「Project Name」に自分がわかる名前を入れて、他はいじらず次へ。

プロジェクト名を入れる画面

保存する場所はどこでもいい。これも自分がわかる場所で。

プロジェクトを保存する場所

ストーリーボードで部品を配置する

ストーリーボードを開く

無事プロジェクトが作成されたら、画面左の「Main.storyboard」をポチッと押してストーリーボードを表示する。

ストーリーボードを選ぶ画面

ストーリーボードが表示された画面

「Table View」を配置する

画面右下の部品が色々並んでいるところから「Table View」を探す。「Table View Controller」や「Table View Cell」を間違って選ばないように。

Table Viewが見つかったら、クリック&ドラッグで枠の中に配置。場所はとりあえずどこでも良い。

Table Viewを配置する画面

Table Viewが配置された画面

制約を設定して、Table Viewを画面いっぱいに広げる

配置したTable Viewをクリックして選択状態にしてから、画面右下辺りの「┣□┫」ボタンを押す。

制約設定ボタンを押す画面

すると下図のような画面が現れる。上の囲いにある4箇所の入力欄に「0」を入力後、「Add 4 Constraints」をクリックする。

制約を設定する画面

すると、配置したTable Viewが画面いっぱいに広がる。

画面いっぱいにTable Viewが広がった画面

Table Viewをアウトレット接続する

ストーリーボード画面で、画面右上の丸が2つ重なったボタンを押す。

丸が2つ重なったボタンを押す画面

すると、ストーリーボードとコードが並んで表示される。

ストーリーボードとコードが並んだ画面

この状態で、ストーリーボード上のTable Viewから「controlを押しながらドラッグ」か、「2本指で押してドラッグ」をして、コードの「viewDidLoad」の上の行で指を離す。複雑な操作ゆえスクリーンショットがないのは勘弁願いたい。

すると、小さな画面が現れる。ここで「Name」にtableと入力し、他はいじらず「Connect」をクリックする。

テーブルビューの名前を決める画面

このような画面になれば成功。これでアウトレット接続は完了だ。

アウトレット接続された画面

ViewController.swiftを編集する

ViewController.swiftを表示させる

先ほどの画面の状態で、画面右上の横線がたくさん引かれたボタンを押す。

元の画面に戻す画面

すると、ストーリーボードだけが表示される画面に戻る。

ストーリーボードの画面に戻った画面

この状態で、画面左上の「ViewController.swift」をクリックする。

ViewController.swiftを選択する画面

すると、コードが表示される。

コードが表示された画面

表示するデータを配列で用意する

テーブルビューに表示するデータは、配列として用意する。「class ViewController〜」の直下で、表示したいデータを並べた配列を定義する。

「class ViewController〜」の行を編集する

テーブルビューを表示するためには、UITableViewDelegate・UITableViewDataSourceというものが必要だ。これらを、class ViewController〜の行に追加する。

なお、この時点ではエラーが出るが気にしなくて良い。

viewDidLoadを修正する

もともとViewController.swiftにある「viewDidLoad()」の中に、2行追記する。ざっくり説明すると「テーブルの表示に関することは自分(ViewControllerクラス)がやるよ」という宣言だ。

テーブルに表示する行数を指定する

ViewController.swiftに、新しいメソッドを2つ追加する。そのうち、まずはテーブルに表示する行数を指定する「func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int」を作る。

挿入する場所は、とりあえず「didReceiveMemoryWarning()」の下にしておく。
入れたい場所にカーソルを合わせ、「tablenum」と打てば予測変換で入れたいメソッドが出てくる。

tablenumと入力する画像

目当てのメソッドが入力された画像

このメソッドは、テーブルに表示する行数をInt型で返すものだ。今回は先の「表示するデータを配列で用意する」で用意した配列の内容を表示するため、返す値は配列の要素数とすれば良い。

表示するセルの内容を指定する

テーブルを表示するために追加する2つのメソッドのうち、もう一つの「tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell」を追加する。

先のメソッドと同じ要領で、「tablecell」と打ってメソッドを挿入する。

tablecellと入力する画像

目当てのメソッドが出てきた画像

詳しい話をすると流れが見えなくなってしまうので、とりあえず以下のソースをメソッドの中に打ち込む。簡単に言えば、セルの内容を配列から持ってきてそれを表示するというものだ。

完成、動かしてみる

以上で全ての手順が完了した。試しにシミュレータを起動してみよう。

シミュレータの起動結果

ここまで1手順漏らさず作業をしたのであれば、ちゃんとこのような結果になったはずだ。

今回は必要最低限な手順しか実行しておらず、またテーブルを表示する手順はこのほかにも存在する。あくまでも、チュートリアル的なものとして捉えてほしい。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。