1. takashings

    Posted

    takashings
Changes in title
+UITableViewCellの区切り線(Separator)を消す方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,88 @@
+UITableViewの区切り線・UITableViewCell Separatorを消したい、ありますよね。
+今回の記事の目次は以下の通りです。
+
+- 全てのセルの区切り線を消す
+- 一部のセルの区切り線を消す
+- "全て"と"一部"では何が違うのか?
+- 空のセルの区切り線を消す
+
+## 全てのセルの区切り線を消す
+まずは全てのセルの区切り線を消す方法から。
+Storyboardで設定する場合はTableViewのSeparatorの箇所を**None**へ変更します。
+
+|設定前|設定後|
+|:--:|:--:|
+|<img width="256" src="https://qiita-image-store.s3.amazonaws.com/0/40009/1dfecd1d-feae-206a-926e-a1e67e3c3c68.jpeg">|<img width="256" src="https://qiita-image-store.s3.amazonaws.com/0/40009/d428b84c-23b9-e511-d5b0-7056be6cc613.jpeg">|
+
+設定を反映させると以下のようになります。
+
+|設定反映前|設定反映後|
+|:--:|:--:|
+|<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/289697c0-35b9-0077-8984-957fa4f90a04.png">|<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/0582fb41-3f06-0f29-a323-6d0475f42568.png">|
+
+ちなみに、コードで書く場合は、以下のコードを追加すれば同じように区切り線を消すことができます。
+
+```swift:Swift
+tableView.separatorStyle = .none
+```
+
+## 一部のセルの区切り線を消す
+では、一部のセルの区切り線を消したい場合はどうすればいいのでしょうか。
+
+例としては、1つのUITableView内にAというセルクラスとBというセルクラスがあるとします。Aのセルでは区切り線を表示するけど、Bのセルでは消したい。こういう場合です。
+
+一部のセルの区切り線を消す場合はStoryboardでの設定はできず、コードで設定していきます。
+
+```swift:Swift
+cell.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: .greatestFiniteMagnitude)
+```
+
+このコードを``tableView(_:cellForRowAt:)``で追加します。
+
+```swift:Swift
+func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+ let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
+ cell.textLabel?.text = "\(indexPath.section) - \(indexPath.row)"
+
+ // 2で割り切れない数だけ区切り線を表示
+ if indexPath.row % 2 == 0 {
+ cell.separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: .greatestFiniteMagnitude)
+ }
+ return cell
+}
+```
+
+上記のコードでの実装の場合は以下のようになります。
+
+|設定反映前|設定反映後|
+|:--:|:--:|
+|<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/289697c0-35b9-0077-8984-957fa4f90a04.png">|<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/5359f23d-b0bf-466e-3e58-372ca9483ef7.png">|
+
+## "全て"と"一部"では何が違うのか?
+ここからは余談の話です。
+上記の「全てのセルの区切り線を消す」と「一部のセルの区切り線を消す」では何が違うのでしょうか。
+結論から言うと以下の通りになります。
+
+- 全ての区切り線を消す:**UITableView全体**に設定が反映される
+- 一部のセルの区切り線を消す:**UITableViewCell**に設定が反映される
+
+上記のような違いがあります。
+例えば、一部のセルの区切り線を消す方法では、UITableViewの表示された空のセルには設定が反映されません。
+<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/b6a265e8-f787-840a-0393-0e3b84cc1511.jpeg">
+全てのセルの区切り線はUITableView全体に設定が反映されるため、空のセルにも区切り線が消す設定が反映されます。
+<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/40009/b694e46e-9472-e0a6-f393-e1372423e182.jpeg">
+
+### 空のセルの区切り線を消す
+では、一部のセルの区切り線を消しつつ、空のセルの区切り線を消したい!という場合はどうしたらいいか。
+以下のコードを追加するだけで空のセルの区切り線は消えます。
+
+```swift:Swift
+tableView.tableFooterView = UIView()
+```
+
+|全てのセルの区切り線を表示|一部のセルと空のセルの区切り線を消す|
+|:-------------------:|:-------------------:|
+|<img width="375" src="https://qiita-image-store.s3.amazonaws.com/0/40009/3868dcf3-e68e-70ac-2e9d-9bd32f5aa25d.png">|<img width="375" src="https://qiita-image-store.s3.amazonaws.com/0/40009/35886d47-0486-eb47-e0cf-9ba1230985de.png">|
+
+> ちなみに、UITableViewCellの区切り線は``UITableViewSeparatorView``というものらしいです。外部からアクセスできたら便利だなと思う時もあるのですが、、、
+> <img width="80%" src="https://qiita-image-store.s3.amazonaws.com/0/40009/99721cd5-51be-21e1-9145-b6510119fb69.jpeg">