はじめに(とばしても構いません😊)
初めましてりゅーちゃんです!!
今回はUIViewに角丸、影をつける際に困ったことについて共有していきます🙇♂️
参考に慣れば幸いです!!
業務で実装する際に詰まってしまったので自分の備蓄として書いていきます!!
もっといい方法があるよという方がいたらコメントしていただけると幸いです😊
完成画面

class ViewController: UIViewController {
@IBOutlet weak var sampleView: UIView!
@IBOutlet weak var shadowView: UIView!
override func viewDidLoad() {:helmet_with_cross:
super.viewDidLoad()
setUpsampleView()
}
private func setUpsampleView() {
let viewRadius: CGFloat = 20.0
shadowView.layer.cornerRadius = viewRadius
shadowView.layer.shadowColor = UIColor.red.cgColor
shadowView.layer.shadowOffset = CGSize(width: 0, height: 0)
shadowView.layer.shadowRadius = 7
shadowView.layer.shadowOpacity = 1
sampleView.layer.cornerRadius = viewRadius
sampleView.layer.masksToBounds = true
}
}
実装のためのコードはこちらになります:eyes:
### ストーリーボード
<img width="770" alt="スクリーンショット 2020-02-19 1.42.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463811/96b7d8d4-8eeb-96cd-471c-d838012b6ae8.png">
ストーリーボード上でのUIViewの配置は画像のようになります!
sampleViewのしたにshadowViewを作成し影、角丸を表示させています:relaxed:
---
#### **ちょっと待った!!**
View1つに対して実装できないのか?!と思う方がいるかもしれません:frowning2:
僕も思いました。。。。
だからやって見たんですが。。。
```swift:qiita.swift
mport UIKit
class ViewController: UIViewController {
@IBOutlet weak var sampleView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
setUpsampleView()
}
private func setUpsampleView() {
let viewRadius: CGFloat = 20.0
sampleView.layer.cornerRadius = viewRadius
sampleView.layer.shadowColor = UIColor.red.cgColor
sampleView.layer.shadowOffset = CGSize(width: 0, height: 0)
sampleView.layer.shadowRadius = 7
sampleView.layer.shadowOpacity = 1
sampleView.layer.cornerRadius = viewRadius
sampleView.layer.masksToBounds = true
}
}
**これで完璧だ!!完全に理解した!!**と思っていたのですが。。。

**なんでやねん!!なんでできへんのやて!!**となりました。。。
同じViewに対しては角丸、影をつけることはできないらしいです(調べた記事に関してはQiita外の記事になりますので今回は記載するのはやめておきます)
(検索ワード:How to implement rounded corner image view with shadowで検索してみてください!)
最後に
今回はUIViewに角丸、影をつける処理に関して記載していきました!
ただこれだとView1つ、1つに処理を書かなければいけないのでextensionなどを使うのがいいと思います。。。
この話題に関しては、今回の記事を更新して付け加えておきます。。。
遅かったら催促してください!!
ここまで読んでいただいてありがとうございました!
少しでもお役に立てると幸いです!!!!!