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

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

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

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

Swift

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

Q&A

解決済

1回答

9949閲覧

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

sunglass

総合スコア303

Xcode

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

Swift

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

0グッド

1クリップ

投稿2020/08/06 08:22

編集2020/08/06 11:26

上下に余白(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)に変更しています。

イメージ説明

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

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

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

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

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

TsukubaDepot

2020/08/06 11:09

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

2020/08/06 11:23

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

2020/08/06 11:37

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

回答1

0

ベストアンサー

StackOverflow の下記の質疑

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

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

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

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

イメージ説明

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

Swift

1 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 2 let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell 3 cell.titleLabel.text = "Cell" 4 5 cell.mainBackground.layer.cornerRadius = 8 6 cell.mainBackground.layer.masksToBounds = true 7 cell.backgroundColor = .systemGray6 8 9 return cell 10 }

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

Swift

1class ShadowView: UIView { 2 override var bounds: CGRect { 3 didSet { 4 setupShadow() 5 } 6 } 7 8 private func setupShadow() { 9 self.layer.cornerRadius = 8 10 self.layer.shadowOffset = CGSize(width: 0, height: 0) 11 self.layer.shadowRadius = 3 12 self.layer.shadowOpacity = 0.3 13 self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath 14 self.layer.shouldRasterize = true 15 self.layer.rasterizationScale = UIScreen.main.scale 16 } 17}

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

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

イメージ説明

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

Swift

1import UIKit 2 3class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 4 5 @IBOutlet weak var table: UITableView! 6 7 override func viewDidLoad() { 8 super.viewDidLoad() 9 // Do any additional setup after loading the view. 10 table.delegate = self 11 table.dataSource = self 12 table.separatorStyle = .none 13 14 table.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "Cell") 15 } 16 17 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 18 return 10 19 } 20 21 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 22 let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! TableViewCell 23 cell.titleLabel.text = "Cell" 24 25 cell.mainBackground.layer.cornerRadius = 8 26 cell.mainBackground.layer.masksToBounds = true 27 cell.backgroundColor = .systemGray6 28 29 return cell 30 } 31 32 func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 33 return 100 34 } 35} 36 37class ShadowView: UIView { 38 override var bounds: CGRect { 39 didSet { 40 setupShadow() 41 } 42 } 43 44 private func setupShadow() { 45 self.layer.cornerRadius = 8 46 self.layer.shadowOffset = CGSize(width: 0, height: 0) 47 self.layer.shadowRadius = 3 48 self.layer.shadowOpacity = 0.3 49 self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath 50 self.layer.shouldRasterize = true 51 self.layer.rasterizationScale = UIScreen.main.scale 52 } 53}

投稿2020/08/06 12:13

TsukubaDepot

総合スコア5086

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

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

sunglass

2020/08/07 03:08

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問