0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【原因と解決策】UITableViewの空セルに区切り線(separator)が表示されない

0
Posted at

はじめに

UITableViewでアコーディオン(開閉式リスト)を実装したとき、データが入っているセルの区切り線は表示されるのに、リストの最後(空セル部分)に区切り線が表示されないという現象に遭遇しました。デフォルトで横線が入る認識でいました。

本記事では、その原因の調査過程と、最終的にわかった「OSバージョンによる仕様変更」についてまとめます。


症状

以下のようなアコーディオンUIを実装したとき、上野より下の空白部分に区切り線が表示されない状態になりました。

  • 山手線 → 渋谷 / 新宿 / 池袋
  • 東横線 → 自由ヶ丘 / 日吉
  • 常磐線 → 上野
  • 上野より下の空白部分に区切り線が表示されない ← ここが問題

想定では、上野の下の空白エリアにも等間隔の横線(separator)が表示されるはずでした。

こんな感じ>
スクリーンショット 2026-03-30 19.23.31.png


そもそもUITableViewの背景や横線を変更できるところは?

Swiftを学習中ですが、まだ自分一人でコードをすべて書けるわけではないため、AIを活用して作成していました。その際、どのコードがUITableViewに該当するのか、なぜ一部だけ表示がうまくいっているのかをきちんと理解していなかった自分が悪いので、今後はきちんと理解していこうと肝に銘じました。

UITableViewのseparator(区切り線)や背景色は、主に viewDidLoad() 内で制御できます。

override func viewDidLoad() {
    super.viewDidLoad()

    stationtableView.register(UINib(nibName: "LineCell", bundle: nil), forCellReuseIdentifier: "LineCell")
    stationtableView.register(UINib(nibName: "StationCell", bundle: nil), forCellReuseIdentifier: "StationCell")

    // これを書かないと、TableViewは空っぽのまま動きません
    stationtableView.delegate = self
    stationtableView.dataSource = self

    // 横線を消すコード(今回はコメントアウト済み)
    // stationtableView.separatorStyle = .none
}

試した対処法(いずれも効果なし)

① separatorStyle を確認

既に線が表示されている部分で separatorStyle = .none を入力して、正常に線が消えることを確認。その後、コードにコメントアウト漏れがないかチェックしました。

コメントアウト済みだったため、これは原因ではありませんでした。

// stationtableView.separatorStyle = .none

② tableFooterView を確認

以下のコードが含まれていると、空セルの区切り線が非表示になります。コード内に存在するか確認しましたが、該当コードはありませんでした。

// 空セルの線を消してしまうコード(今回は存在しなかった)
tableView.tableFooterView = UIView()

// もし存在していた場合は削除するか、以下に変更
tableView.tableFooterView = nil

③ セルの背景色を確認

セルの背景がデフォルト(白)だと、区切り線が見えなくなっている場合があります。以下のコードで強制的に透明にして確認しました。

cell.backgroundColor = .clear
cell.contentView.backgroundColor = .clear

背景を変えても線が見えた → セルの背景が原因ではないことを確認。

④ TableViewのStyleとSeparatorをStoryboardで確認

TableViewのStyleが Grouped になっていないか、SeparatorがデフォルトのSingle Lineになっているかを確認しました。

スクリーンショット 2026-03-30 19.46.21.png

  • Style:Plain(Groupedではない)✅
  • Separator:Single Line

設定は問題なし → これも原因ではありませんでした。


結論:iOS 18以降のOS仕様変更が原因

確認項目 結果
separatorStyle = .none が残っている コメントアウト済み → 原因でない
tableFooterView = UIView() がある 該当コードなし → 原因でない
セルの背景色が線を隠している clearにしても変化なし → 原因でない
TableViewのStyleやSeparator設定 設定は正常 → 原因でない
iOS 18以降のOS仕様変更 これが原因

参考にしていたQiita記事のgif画像(古いOSで撮影)では空セルにも線が表示されていましたが、iOS 18以降では空セル部分の区切り線はデフォルトで表示されない仕様に変わっています。
実際に記事のサンプルアプリをiOS 18.5のシミュレーターで動かしたところ、同じ現象(空セルに線なし)を確認できました。

古い記事の画像を参考にする際は、OSバージョンの違いによって表示が変わる場合があることに注意が必要です。コードに問題がないのに表示が異なる場合は、OS差異を疑ってみるのも良いと思います。


参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?