UITableViewに影をつけたい

Question

UITbaleViewにボックスシャドウをつけたいです。
色々な記事を見て真似してみたのですが上手くいきません・・・

ボックスシャドウをつける方法は
①ボックスシャドウ用のUIViewを用意して重ねるのでしょうか・・・？
②.layerで影をつけることは出来るのでしょうか・・・？

『UITableView　swift shadow』などで検索したのですがUITableViewのshadowに関する記事が全然見当たりませんでした、、、
詳しい方よろしくお願いします

import UIKit
import RealmSwift

class ViewController: UIViewController, UITableViewDataSource {
    
    var todoItems: Results<Todo>!
    @IBOutlet weak var table: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 角丸
        table.layer.cornerRadius = 20
        // ボックスシャドウ
        table.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        table.layer.shadowColor = UIColor.black.cgColor
        table.layer.shadowOpacity = 0.6
        table.layer.shadowRadius = 4
        
        table.dataSource = self
        
        let realm = try! Realm()
        todoItems = realm.objects(Todo.self)
        
        table.reloadData()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        table.reloadData()
    }
    
    // セルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todoItems.count
    }
    
    // セルの中身
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        tableView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        tableView.layer.shadowColor = UIColor.black.cgColor
        tableView.layer.shadowOpacity = 0.6
        tableView.layer.shadowRadius = 4
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        let object = todoItems[indexPath.row]
        cell.textLabel?.text = object.title
        return cell
    }
    
    // セルの編集許可
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            deleteTodo(at:indexPath.row)
            table.reloadData()
        }
    }
    
    // セルの削除実行
    func deleteTodo(at index: Int) {
        let realm = try! Realm()
        try! realm.write {
            realm.delete(todoItems[index])
        }
    }
    
}

Answer 1

https://qiita.com/hiroteru_/items/15a554419d357d0de285
https://qiita.com/star__hoshi/items/0edbb8ee94b231dd1c79

storyboard派なのでちょっとなれないですが、念の為、書いときます。

// メンバ
let shadowView = UIView()
    
override func viewDidLoad() {
    super.viewDidLoad()
        
    // tableViewにcornerRadius&clip設定
    table.layer.cornerRadius = 10
    table.clipsToBounds = true
    
    // shadowはこっちに受け持たせる
    shadowView.layer.cornerRadius = 10
    shadowView.layer.shadowColor = UIColor.black.cgColor
    shadowView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
    shadowView.layer.shadowOpacity = 0.5
    shadowView.layer.shadowRadius = 4   
    shadowView.layer.masksToBounds = false
    
    // viewに追加
    self.view.addSubview(shadowView)
    self.view.bringSubviewToFront(table)
}
    
    
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // サイズ合わせる
    shadowView.frame = table.frame
}

---

追記

maskToBoundsをfalseにすると、一見うまく言っているように見えますが、
動かすとsubViewがはみ出しませんか？

---

追記
サンプル上げときます
https://github.com/tyobigoro/tableViewWithShadow

Comments

[sunglass]

両方の記事にはたどり着いたのですが実装で上手くいきません・・・

[sunglass]

let shadowView = UITableView()
shadowView.layer.cornerRadius = 10
shadowView.layer.shadowColor = UIColor.black.cgColor
shadowView.layer.shadowOffset = .zero
shadowView.layer.shadowOpacity = 0.3
shadowView.layer.shadowRadius = 4

↑このコード自体は合っていますでしょうか・・・？
記事を見て書いてみました。

[退会済みユーザー]

誰に対する連絡かわかりにくいのでこっちに書きます。
shadowView.backgroundColor = .black// <= 色をつけた上げればshadowがでるかな？

[退会済みユーザー]

サンプル上げときました、うまく行かない場合は、参考にしてください。

[sunglass]

出来ました！
（影の色抜けていることに気づきませんでした、、githubまでありがとうございます。。）
理解としては
1：UIViewを拡張して影部分を作る
2：TbaleViewに角丸を持たせる
3：（同じサイズにして）1と2を合わせる
の理解で大丈夫でしょうか・・・？
よろしくお願いします！

[退会済みユーザー]

できたならあってると思うよ。

[拡張]っていうとextensionのことだからその言葉を違う意味で使うと、意思の疎通ができなくなるよ。

[sunglass]

ありがとうございます！
（コメントアウト見たらちゃんと『メンバ』と記述がありました。大変失礼しました。。）

Answer 2

以下を入れてみてください。
table.masksToBounds = false //影を表示するためにマスク処理をOFFにする

    override func viewDidLoad() {
        super.viewDidLoad()

        // 角丸
        table.layer.cornerRadius = 20
        // ボックスシャドウ
        table.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        table.layer.shadowColor = UIColor.black.cgColor
        table.layer.shadowOpacity = 0.6
        table.layer.shadowRadius = 4
        table.masksToBounds = false //影を表示するためにマスク処理をOFFにする

        table.dataSource = self

        let realm = try! Realm()
        todoItems = realm.objects(Todo.self)

        table.reloadData()
    }

Comments

[sunglass]

回答ありがとうございます。
自分の環境だと `Value of type 'UITableView' has no member 'masksToBounds'`と出てきます。。

[Tetsukick]

layerが抜けていました。
table.layer.masksToBounds = false //影を表示するためにマスク処理をOFFにする

[sunglass]

出来ました・・・ありがとうございます！

[退会済みユーザー]

あれ？
table.layer.masksToBounds = falseだと、subViewにあたるセルがtableViewから突き抜けない？
subViewがある場合は、clipToBounds = trueにして、影は別viewでつけてたんだけど…
おかしいな。

[sunglass]

この場合はセクションのヘッダーか何かを入れるのでしょうか？？

[sunglass]

自己解決出来たっぽいです。
1:一番上のセルと下のセルのみ角丸を設定する（左上、右上、左下、右下）
https://qiita.com/hachinobu/items/dc2ff32fa2be6b78ea86
2:TbaleViewに影をつける
https://majintools.com/2018/11/08/shadow/
MyTable.layer.masksToBounds = false　// 角丸と影の場合はfalse

[退会済みユーザー]

変なことをしないで、
答えは私の回答の中に書いてあるので、試してみてください。
それでダメなら連絡ください。

[sunglass]

了解です。
いただいたコードで再現してみます！

[sunglass]

自分の環境だと↓のコードで『影』は表示されませんでした、、
流れとしてはUIViewを拡張→UITableViewに角丸を持たせて→UIViewを拡張して作ったshadowViewを合わせる、の理解大丈夫でしょうか・・・？
（だとすると何故影は出ないのでしょうか・・・）