1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UITableViewCellの一部の区切り線を消す際のTips

Last updated at Posted at 2019-06-09

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の場合は20iPhone 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設定画面の例 タップ時の挙動
IMG_5544.png IMG_5543.png

最後までご覧いただきありがとうございました 🙏

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?