Quantcast
Channel: 初心者タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 21077

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

$
0
0

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

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

完成画面

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

実装コード

qiita.swift
importUIKitclassViewController:UIViewController{@IBOutletweakvarsampleView:UIView!@IBOutletweakvarshadowView:UIView!overridefuncviewDidLoad(){:helmet_with_cross:super.viewDidLoad()setUpsampleView()}privatefuncsetUpsampleView(){letviewRadius:CGFloat=20.0shadowView.layer.cornerRadius=viewRadiusshadowView.layer.shadowColor=UIColor.red.cgColorshadowView.layer.shadowOffset=CGSize(width:0,height:0)shadowView.layer.shadowRadius=7shadowView.layer.shadowOpacity=1sampleView.layer.cornerRadius=viewRadiussampleView.layer.masksToBounds=true}}

実装のためのコードはこちらになります:eyes:

ストーリーボード

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


ちょっと待った!!

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

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

qiita.swift
mportUIKitclassViewController:UIViewController{@IBOutletweakvarsampleView:UIView!overridefuncviewDidLoad(){super.viewDidLoad()setUpsampleView()}privatefuncsetUpsampleView(){letviewRadius:CGFloat=20.0sampleView.layer.cornerRadius=viewRadiussampleView.layer.shadowColor=UIColor.red.cgColorsampleView.layer.shadowOffset=CGSize(width:0,height:0)sampleView.layer.shadowRadius=7sampleView.layer.shadowOpacity=1sampleView.layer.cornerRadius=viewRadiussampleView.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:
ここまで読んでいただいてありがとうございました!
少しでもお役に立てると幸いです!!!!!


Viewing all articles
Browse latest Browse all 21077

Trending Articles