【Swift4】StoryboardでUITableViewのカスタムセルを実装する方法【iOS11】

StoryboardでUITableViewのカスタムセルを実装する方法をご紹介します。

UITableViewの実装方法はこちらです
【Swift4】StoryboardでUITableViewを3分で実装する方法【iOS11】

1.UITableViewを実装

まずはTableViewを実装しましょう。
UITableViewを実装したいStoryboardにTableView、TableViewCellを配置し、TableViewのOutletsのdataSourceとdelegateを、TableViewを実装させるViewControllerにセットします。

UITableViewの主なコードはこちらです

 

カスタムセル用のクラスを作成

メニューバーからFile -> New -> File…の順に選択し新しいファイルを作成します。
出てきた画面から「Cocoa Touch Class」を選択しNEXTボタンを押します。

クラス名を指定する画面で「Subclass of:」の右側を「UITableViewCell」に変更し、
「Class:」の右側を任意の名前を入力し、NEXTボタンを押します。

今回は「CustomTableViewCell」と言う名前にしました。

 

CustomTableViewCellができたらTableViewCellのCustom ClassのClassを「CustomTableViewCell」に設定します。

 

次にTableViewCellのIdentifierを設定します。
Identifierを設定することでCellの再利用が可能になりメモリに優しい設計となるので忘れずに行なってください。

今回はIndetifierを「CustomCell」という名前に設定しました。

 

Label

TableViewCellをカスタムしていきます。今回はTableViewCellに数字を表示するnumberLabelと、タイトルを表示するtitleLabelの2つのLabelを用意したいと思います。

StoryboardのLabelをCustomTableViewCellに紐づけ、コードを書いていきます。

以上で実装は完了となります。

実際にビルドするとこんな感じのTableViewが表示されます。

セクションや高さなども追加したコード部分のまとめは以下のようになります。

 

ViewController.swift

 

CustomTableViewCell.swift