質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

2回答

2053閲覧

UITableViewに影をつけたい

sunglass

総合スコア303

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

1クリップ

投稿2020/04/24 09:22

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]) } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

swift

1// メンバ 2let shadowView = UIView() 3 4override func viewDidLoad() { 5 super.viewDidLoad() 6 7 // tableViewにcornerRadius&clip設定 8 table.layer.cornerRadius = 10 9 table.clipsToBounds = true 10 11 // shadowはこっちに受け持たせる 12 shadowView.layer.cornerRadius = 10 13 shadowView.layer.shadowColor = UIColor.black.cgColor 14 shadowView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0) 15 shadowView.layer.shadowOpacity = 0.5 16 shadowView.layer.shadowRadius = 4 17 shadowView.layer.masksToBounds = false 18 19 // viewに追加 20 self.view.addSubview(shadowView) 21 self.view.bringSubviewToFront(table) 22} 23 24 25override func viewDidLayoutSubviews() { 26 super.viewDidLayoutSubviews() 27 // サイズ合わせる 28 shadowView.frame = table.frame 29}

追記

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

イメージ説明


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

投稿2020/04/24 09:26

編集2020/04/27 10:05
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sunglass

2020/04/24 09:45

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

2020/04/24 09:49

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 ↑このコード自体は合っていますでしょうか・・・? 記事を見て書いてみました。
退会済みユーザー

退会済みユーザー

2020/04/27 10:00

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

退会済みユーザー

2020/04/27 10:06

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

2020/04/27 10:10

出来ました! (影の色抜けていることに気づきませんでした、、githubまでありがとうございます。。) 理解としては 1:UIViewを拡張して影部分を作る 2:TbaleViewに角丸を持たせる 3:(同じサイズにして)1と2を合わせる の理解で大丈夫でしょうか・・・? よろしくお願いします!
退会済みユーザー

退会済みユーザー

2020/04/27 10:14

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

2020/04/27 10:32

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

0

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

Swift

1 override func viewDidLoad() { 2 super.viewDidLoad() 3 4 // 角丸 5 table.layer.cornerRadius = 20 6 // ボックスシャドウ 7 table.layer.shadowOffset = CGSize(width: 0.0, height: 2.0) 8 table.layer.shadowColor = UIColor.black.cgColor 9 table.layer.shadowOpacity = 0.6 10 table.layer.shadowRadius = 4 11 table.masksToBounds = false //影を表示するためにマスク処理をOFFにする 12 13 table.dataSource = self 14 15 let realm = try! Realm() 16 todoItems = realm.objects(Todo.self) 17 18 table.reloadData() 19 }

投稿2020/04/24 09:56

Tetsukick

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sunglass

2020/04/24 10:01

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

2020/04/24 10:04

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

2020/04/24 10:06

出来ました・・・ありがとうございます!
退会済みユーザー

退会済みユーザー

2020/04/24 15:58

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

2020/04/25 04:53

この場合はセクションのヘッダーか何かを入れるのでしょうか??
退会済みユーザー

退会済みユーザー

2020/04/27 07:57

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

2020/04/27 09:08

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

2020/04/27 09:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問