LoginSignup
3
2

More than 3 years have passed since last update.

UIViewに角丸と影をつける方法について

Last updated at Posted at 2020-02-18

はじめに(とばしても構いません😊)

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

完成画面

スクリーンショット 2020-02-19 1.36.58.png
この画面を生成していきたいと思います!
それではコードの方を見ていきましょう!!👊

実装コード

qiita.swift
import UIKit

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:

ストーリーボード

スクリーンショット 2020-02-19 1.42.15.png
ストーリーボード上でのUIViewの配置は画像のようになります!
sampleViewのしたにshadowViewを作成し影、角丸を表示させています:relaxed:


ちょっと待った!!

View1つに対して実装できないのか?!と思う方がいるかもしれません:frowning2:

僕も思いました。。。。
だからやって見たんですが。。。

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

これで完璧だ!!完全に理解した!!と思っていたのですが。。。

スクリーンショット 2020-02-19 2.07.08.png

なんでやねん!!なんでできへんのやて!!となりました。。。

同じViewに対しては角丸、影をつけることはできないらしいです(調べた記事に関してはQiita外の記事になりますので今回は記載するのはやめておきます:bow_tone1:
(検索ワード:How to implement rounded corner image view with shadowで検索してみてください!)

最後に

今回はUIViewに角丸、影をつける処理に関して記載していきました!
ただこれだとView1つ、1つに処理を書かなければいけないのでextensionなどを使うのがいいと思います。。。
この話題に関しては、今回の記事を更新して付け加えておきます。。。
遅かったら催促してください!!:muscle:
ここまで読んでいただいてありがとうございました!
少しでもお役に立てると幸いです!!!!!

3
2
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2