[Swift3]テーブルのセルにUI部品を表示する

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

UITableViewで表示する各々のセルに、テキスト・セルアクセサリー以外のUI部品を配置する方法を紹介。

ストーリーボードではなくコード上で配置するため、セルによって表示の有無を変えるなどきめ細かい設定が可能。

まずは普段通りテーブルを表示する

ひとまず、通常のテーブルを表示させるところから。ストーリーボードでUITableViewを配置し、以下のようなコードで5つのセルを表示する。

この時点で実行すると、このような感じ。タイトルはおまけで付けました。

通常のテーブルを表示させた画像

セルに自前のUI部品を追加する

セルにUI部品をaddSubViewする

セルの内容を作るcellForRowAtの部分で、表示させたいUI部品をリターンするセルにaddSubViewする。

今回はすべてのセルにUISwitchを追加してみる。

制約を設定して位置を調節する

このままだとセルに追加したUI部品がおかしな位置に表示されるため、制約の設定を行う。

今回は、セルの右側にUISwitchが表示されるようにする。設定する制約は以下の2つ。

  • UISwitchの右端は、セルの右端から10px左
  • UISwitchの上下方向の中心は、セルと等しくする

コーディングによる制約の設定は以下のサイトが参考になります。

[Swift 3.0]NSLayoutAnchorを用いたコードによるAuto Layout – Qiita

制約を手動で設定する場合は、17行目のようにtranslatesAutoresizingMaskIntoConstraintsプロパティをfalseに設定する必要がある模様。(デフォルトはtrue)

完成したソース

実行するとこの通り。

セルにUISwitchを追加した画像

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

SNSでもご購読できます。