Help us understand the problem. What is going on with this article?

UITableViewControllerのStatic Cellsをカスタマイズしてアプリの設定画面を作る

More than 3 years have passed since last update.

はじめに

UITableViewControllerで利用できるStatic Cellsというセルがあり、
表示させる中身に変更が無いシーン(アプリの設定画面など)で便利なようです。
セクションのラベル背景色などはInspectorで設定できなくて、実装に少し困ったのでメモとして書いてみたいと思います。至らぬ点はコメントなど頂けたら幸いです。

サンプル

:ear_of_rice:Storyboardを利用してアプリのデザインに合わせて色を変えたり、比較的簡単に設定画面を作成できます。

setting_white.PNGsetting_black.PNGIMG_0931.png

UITableViewControllerの準備

StoryboardにUITableViewControllerを置き、TableViewのContentをStatic Cellsに変更します。
UITableViewCellStyleで既存のデザインを利用したり、StoryboardでセルのContent Viewに部品を追加してセルを作っていくことが基本になります。
また、世間に出ているアプリの設定画面は、UITableViewStyleGloupedで作成されているものが多い気がします。

sam.png

グローバルなHeaderとFooterにカスタムViewを設定

:ear_of_rice:UITableViewのプロパティで設定することができます。

Slice.png

MainTableViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    //グローバルなTableViewのheaderやfooterにカスタムViewを設定
    tableView.tableHeaderView = CustomGlobalHeaderView()
    tableView.tableFooterView = CustomGlobalFooterView()
}

セクションのカスタマイズ

「セルの数」と「Header Footerのラベル」の設定

:ear_of_rice:Storyboardで設定ができます。

Group.png

名前 説明
Rows そのセクションの中のセルの数
Header ヘッダーのラベル
入力するとStoryboardでヘッダーが作成される
Footer フッターのラベル
入力するとStoryboardでヘッダーが作成される

「ラベル」や「背景色」の設定

:ear_of_rice:Storyboardで設定ができないのでUITableViewDelegateのメソッドを利用します。

MainTableViewController.swift
//Headerが表示される時の処理
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? UITableViewHeaderFooterView else { return }
    //Headerのラベルの文字色を設定
    header.textLabel?.textColor = UIColor.white
    //Headerの背景色を設定
    header.contentView.backgroundColor = UIColor(hex: 0x282828)
}
//Footerが表示される時の処理
override func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int) {
    guard let footer = view as? UITableViewHeaderFooterView else { return }
    //Footerのラベルの文字色を設定
    footer.textLabel?.textColor = UIColor.white
    //Footerの背景色を設定
    footer.contentView.backgroundColor = UIColor(hex: 0x282828)
}

HeaderとFooterの高さの設定

:ear_of_rice:UITableViewのスタイルをStyle Groupedに設定している場合、
Storyboardでのセクションの高さ設定は効かないようです

Group 3.png

:ear_of_rice:Style Groupedに設定した時のデフォルトの高さは以下になっています。変更する場合はUITableViewDelegateメソッドを利用します。

Header高さ Footerの高さ
1行目 55 30
2行目 38 30
... ... ...
MainTableViewController.swift
//Headerの高さ
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}
//Footerの高さ
override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 50
}

HeaderとFooterにカスタムViewを設定する

:ear_of_rice:より詳細なレイアウトを行いたい場合は、独自のViewを設定してしまうのも1つの方法です。UITableViewDelegateメソッドを利用します。

MainTableViewController.swift
//HeaderViewを返却
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    return CustomHeaderView()
}
//FooterViewを返却
override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    return CustomFooterView()
}

参考にさせていただいた記事

見て頂いてありがとうございます。

KikurageChan
見て頂いてありがとうございます。
https://kikuragechan.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした