【Swift】UITableViewCellをカスタマイズしてみた

UITableViewCellをカスタマイズする方法をご紹介します。

なお、このアプリや記事はこのサイトの記事を参考にして作っています。

セルの高さを変更する

まずデフォルトのセルの高さだと狭いので高さを広げる。

ドキュメントアウトラインで「TableView」(Cellではないので注意)を選択して物差しマークを選択。

Row HeightがAutomaticになっているので100と入力。

以下のようにセルの高さが広がったことを確認。

セルをカスタムにする

セルの高さは広がったが、このままではラベルや画像を配置することができない。

原因はCellのStyleが「Basic」だから。

ドキュメントアウトラインでCellを選択して、右上にあるアトリビュートインスペクタでStyleを「Custom」に変更する。

ラベルを配置する

これで自分の好きなようにラベルや画像を配置できるようになった。

試しにラベルを2つ設置する。

ラベルの色やサイズはアトリビュートインスペクタで変更できる。

 

AutoLayoutの設定

配置したラベルのレイアウトを調節する。

各ラベルを選択したまま、ストーリボードの下の方にある

「Resolve Auto Layout Issue」➡︎「Add Missing Constrains」

を押すとレイアウトが自動調節される。

ドキュメントアウトラインでConstrainsが追加されればOK。

カスタムクラスを作成する

UITableViewCellを継承してMyTableViewCellを作成する。

ドキュメントアウトラインでCellを選択し、アイデンティティインスペクタで作成したクラス名を選択する。

 

ラベルをコードと接続する

アシスタントエディタを開きラベルとコードを接続します。

 

ラベルの中身を挿入する。

セルに表示する中身を代入します。

cell変数をMyTableViewクラスとして扱っていることに注意して下さい。

完成

アプリを実行すると以下のように表示されます。