TableViewCellの一部の区切り線を消す際の Tipsメモ

上記のようなTableViewがあったとき、
例えば「設定B」と「設定C」の間の線(Separator)を消したい場合があります。
区切り線を消す
こちら の記事が詳しく説明されているため、参考にさせていただきます。
該当部分にコードで反映。
cell.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: .greatestFiniteMagnitude)
結果

なぜか、区切り線を消した部分のセルがずれてしまいました。
これは、その他のdefaultのセルには、defaultのマージンサイズが設定されているから
と考えられます。
defaultのマージンサイズに揃える
storyboardからdefaultのマージンサイズを確認してみると
iPhone XS MAXの場合は20、iPhone 8の場合15に設定されていました。
直接数値を入れてしまうと、デバイスによって値が異なってしまうため、
separatorInset.left
の値を取得してから、反映させるように書き換えます。
let insetLeft = cell.separatorInset.left
cell.separatorInset = UIEdgeInsets(top: 0, left: insetLeft, bottom: 0, right: .greatestFiniteMagnitude)
結果

無事正しく反映することができました!
余談
Twitterアプリの設定画面を見てみると、cellのタイトル, accessoryを1つのセルとし、
項目の説明文を違うセルとして管理しているのかもと考えられます。
(セルをタップした際、説明文の部分は選択されていなかった。)
このようなtablevieをつくりたいときに、
一部の区切り線を消す 実装を活用することができますね
Twitter設定画面の例 | タップ時の挙動 |
---|---|
![]() |
![]() |
最後までご覧いただきありがとうございました 🙏