如何为圆角添加阴影

作者: 移动开发_ziank | 来源:发表于2017-08-03 14:54 被阅读312次

在iOS中为UIView添加阴影还是比较简单的,只需要设置layershadow属性就可以了,但是问题在于设置阴影之后,必须设置masksToBoundsNO,而圆角图片则要求masksToBounds必须为YES,两者相互冲突,会导致无法正确的添加阴影。
正确的做法是先创建一个透明的UIView,并添加阴影,设置masksToBoundsNO
然后在透明的UIView上添加圆角图片,在subView上设置masksToBoundsYES
这样,就可以完美实现对应的阴影了。

        let baseView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        // add the shadow to the base view
        baseView.backgroundColor = UIColor.clear
        baseView.layer.shadowColor = UIColor.black.cgColor
        baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
        baseView.layer.shadowOpacity = 0.7
        baseView.layer.shadowRadius = 4.0
        self.view.addSubview(baseView)
        
        // add any other subcontent that you want clipped
        let otherSubContent = UIImageView()
        otherSubContent.image = UIImage(named: "lion")
        otherSubContent.frame = baseView.bounds
        otherSubContent.layer.masksToBounds = true
        otherSubContent.layer.cornerRadius = 50
        baseView.addSubview(otherSubContent)

效果如下图:


屏幕快照 2017-08-03 下午2.53.46.png

相关文章

  • 如何为圆角添加阴影

    在iOS中为UIView添加阴影还是比较简单的,只需要设置layer的shadow属性就可以了,但是问题在于设置阴...

  • iOS UI三板斧圆角加阴影

    想必在日常的开发中大家都能遇到UI各种圆角加阴影的设计添加圆角效果: 添加阴影效果: 需要圆角+阴影效果则不能满足...

  • flutter 控件添加阴影圆角边框

    快速添加阴影圆角边框代码

  • CSS3基础

    CSS3基础 -- 边框 圆角效果 向元素添加圆角边框 阴影 box-shadow 向盒子添加阴影。支持一个或者...

  • Flutter基础组建使用- Container

    1、添加圆角 2、添加阴影 3、添加渐变 4、形状(shape) 5、容器限定

  • iOS 阴影+圆角

    1.圆角 2.阴影 3.圆角加阴影(错误) 解决方法: 创建一个view,设置阴影效果,然后将所需视图添加到vie...

  • CALayer 添加圆角阴影

    使用pod pod 'UIShadow+UIView' iOS开发中给一张图片或者一个UIView 添加圆角的...

  • UIView圆角+阴影

    backView是要添加阴影的视图,思路是backView设置corner圆角,再添加一个带阴影的父视图,代码如下...

  • UIView添加阴影

    如果UIImageView、只添加阴影不设置圆角可使用:介绍下加阴影几个属性的概念imageView.layer....

  • 【iOS】UIVie 圆角+阴影

    1.添加 UIView,设置 backgroundColor = nil 2.圆角 3.阴影 Demo地址

网友评论

本文标题:如何为圆角添加阴影

本文链接:https://www.haomeiwen.com/subject/tljplxtx.html