UITableViewのcellにpadding, radius, shadowを入れたい

Question

上下に余白（padding）と影をいれることは出来たのですが左右余白を入れる方法ががわかりません。。

（↑実際）

（↑希望）

// cellの中身
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       
// radius & shadow
        cell.layer.cornerRadius = 10
        let shadowPath2 = UIBezierPath(rect: cell.bounds)
        cell.layer.masksToBounds = false
        cell.layer.shadowColor = UIColor.black.cgColor
        cell.layer.shadowOffset = CGSize(width: CGFloat(1.0), height: CGFloat(3.0))
        cell.layer.shadowOpacity = 0.5
        cell.layer.shadowPath = shadowPath2.cgPath

}

// Padding for cell
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 8  
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let marginView = UIView()
        marginView.backgroundColor = .clear  
        return marginView
    }
    
    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        return .leastNonzeroMagnitude  
    }
    

【追加】
セルはカスタムセルでxibファイルで作成しています。
※InnerViewは質問投稿後に追加しています。
※constrainsは質問投稿後左から8（以前は0）に変更しています。

Comments

[TsukubaDepot]

Cellの生成（StoryBoard、カスタムクラス、xib など）はどのようにして行なっているのでしょうか。
その方法によっても実現方法が異なってくるように思えますので、ご質問に追記していただければと思います。

[sunglass]

セルはカスタムセル（xibファイル）になります。後ほど追加します。

[sunglass]

追加しました。。
よろしくお願いします。。

Answer 1

StackOverflow の下記の質疑

• UITableViewCell: rounded corners and shadow

そのままですが、こんな感じでいけるかと思います。

原理の説明については原文に詳しく記述してありますし、xib ではなくてカスタムセルを使うのであれば二番目の方法もありますので、そちらも併せて参考にしていただければと思います。

1.　Cell の中に UIView を配置します。ここでは mainBackground とします。制約は Superview に対して上下左右12で付けました（制約については調節してみてもらえますでしょうか）。

2.　別の UIVew を 1. の上に全く同じ制約で配置します。名前は shadowLayer とします。この UIVew は後ほどカスタムクラスに変更するのですが、とりあえずは UIVew のままにしておきます。

3.　セルの生成については次のような感じにします。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell
        cell.titleLabel.text = "Cell"

        cell.mainBackground.layer.cornerRadius = 8
        cell.mainBackground.layer.masksToBounds = true
        cell.backgroundColor = .systemGray6

        return cell
    }

4.　適切なファイルで、UIView のサブクラスを作ります。

class ShadowView: UIView {
    override var bounds: CGRect {
        didSet {
            setupShadow()
        }
    }

    private func setupShadow() {
        self.layer.cornerRadius = 8
        self.layer.shadowOffset = CGSize(width: 0, height: 0)
        self.layer.shadowRadius = 3
        self.layer.shadowOpacity = 0.3
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale
    }
}

5.　xib ファイルを編集し、shadowLayer のカスタムクラスを ShadowView に変更します。

基本的に上記の作業を行えば、下記のような角丸・影付きのセルを作ることができるようです。

参考までに ViewController.swift を載せておきます。カスタムセルについては、Outlet を設定したこと以外コードには一切手を加えていませんのでここでは省略したいと思います。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var table: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        table.delegate = self
        table.dataSource = self
        table.separatorStyle = .none
        
        table.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "Cell")
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell
        cell.titleLabel.text = "Cell"

        cell.mainBackground.layer.cornerRadius = 8
        cell.mainBackground.layer.masksToBounds = true
        cell.backgroundColor = .systemGray6

        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}

class ShadowView: UIView {
    override var bounds: CGRect {
        didSet {
            setupShadow()
        }
    }

    private func setupShadow() {
        self.layer.cornerRadius = 8
        self.layer.shadowOffset = CGSize(width: 0, height: 0)
        self.layer.shadowRadius = 3
        self.layer.shadowOpacity = 0.3
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale
    }
}

Comments

[sunglass]

めちゃくちゃ丁寧な解説ありがとうございます。。
無事実装出来ました。。
（イメージしていたよりも１つViewが多くてびっくりしました。。）回答ありがとうございます！