【Swift4】UITableViewの基本のき。

UITableViewをよく使います。そんなとき、Master-DetailやNavigationControllerを使うとある程度最初から組んであるのですが、もうちょっと柔軟性が欲しい時や自分の後学のため、備忘録です。

参考サイトはこちら。
5分でUITableViewを作ってみる。 – Qiita

まず、Storyboardでテーブルビューの準備から。
利便性のためナビゲーションコントローラーを使います。(笑)
【Swift4】UITableViewの基本のき。

でも、ルートビューコントローラーがよくわからないので右側のビューを削除します。(笑)
【Swift4】UITableViewの基本のき。

で、普通のビューコントローラーを置いてroot view controllerでつなぎます。(笑)
Projectを作った最初のViewを使っても良いです。それなら.swiftふぁいるもついてるしね。
【Swift4】UITableViewの基本のき。
【Swift4】UITableViewの基本のき。
【Swift4】UITableViewの基本のき。

そうするとナビゲーションバー付きのビューになります。(笑)
【Swift4】UITableViewの基本のき。

ここにさらに使い勝手を良くするためにVertical stack Viewを追加し、上下左右のマージンを0にします。
【Swift4】UITableViewの基本のき。

更にその中にUITableViewを放り込むと上下左右ピタッとくっつき、ついでにTableViewCellをいれるととりあえずテーブルビューの完成。
【Swift4】UITableViewの基本のき。

こうしておくとナビゲーション付きの子ビューも作りやすいし、テーブルビューの上下に検索窓やボタン、広告類なども設置しやすくなります。
.isHiddenを使えば隙間をテーブルビューが埋めてくれます。

ついで、セルはidentifierにCellと設定。
【Swift4】UITableViewの基本のき。

セルの中に一つUILabelを入れて四方を0のConstraintで設定。その際、Tagを1に設定。
【Swift4】UITableViewの基本のき。

Storyboardの準備はこんな感じかな。

さて、やっとコードのキホンのキです。
まずはStoryboardのUITableviewをoutlet接続しておきます。
ついでに簡単な配列も作っておきます。

テーブルビューに必須のメソッドを書いていきます。
まずはセクションを返すもの。とりあえず1かな。

セルの数。テーブルビューに入れる配列の数だけ。

セル本体の設定をします。

最後にdelegateとdataSourceの設定をします。
クラスの宣言のところで、
, UITableViewDelegate, UITableViewDataSource
と、viewDidLoadで、
tableView.delegate = self
tableView.dataSource = self
を追加します。

これでテーブルビューが表示されます。
【Swift4】UITableViewの基本のき。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">