Swift-视图阴影篇

作者: 阿丶伦 | 来源:发表于2018-10-09 14:47 被阅读417次

最近接了一个需求,需要给视图添加阴影,发现其中还是有些门门道道的。写一篇文记录下。
Swift中已经提供了很便捷的设置阴影的方法,layer层的shadow。下面是代码

func setShadow(view:UIView,sColor:UIColor,offset:CGSize,
                   opacity:Float,radius:CGFloat) {
        //设置阴影颜色
        view.layer.shadowColor = sColor.cgColor
        //设置透明度
        view.layer.shadowOpacity = opacity
        //设置阴影半径
        view.layer.shadowRadius = radius
        //设置阴影偏移量
        view.layer.shadowOffset = offset
    }

其中offset为阴影的偏移量,让我们用一系列例子来看看offset是怎么影响阴影偏移

var color = [UIColor.red,
                     UIColor.orange,
                     UIColor.cyan,
                     UIColor.green,
                     UIColor.purple,
                     UIColor.yellow]
        var size = [CGSize.init(width: 5, height: 5),
                    CGSize.init(width: -5, height: 5),
                    CGSize.init(width: 5, height: -5),
                    CGSize.init(width: -5, height: -5),
                    CGSize.init(width: 5, height: 0),
                    CGSize.init(width: 0, height: -5)]
image.png
参考图片,可以得出结论
offset中的width和height
width为正数时,向右偏移,为负数时,向左偏移
height为正数时,向下偏移,为负数时,向上偏移
基本的阴影已经完成了,为了美观,我们给视图加上边框跟圆角
func setShadow(view:UIView,width:CGFloat,bColor:UIColor,
                   sColor:UIColor,offset:CGSize,opacity:Float,radius:CGFloat) {
        //设置视图边框宽度
        view.layer.borderWidth = width
        //设置边框颜色
        view.layer.borderColor = bColor.cgColor
        //设置边框圆角
        view.layer.cornerRadius = radius
        //设置阴影颜色
        view.layer.shadowColor = sColor.cgColor
        //设置透明度
        view.layer.shadowOpacity = opacity
        //设置阴影半径
        view.layer.shadowRadius = radius
        //设置阴影偏移量
        view.layer.shadowOffset = offset
    }
image.png

完成。然而当我运用到自定义的UIView中时,又出现了一点小问题


image.png

问题如上,视图没有加上阴影,子视图加上了阴影。后来发现是因为如果不给视图添加背景颜色,阴影就会显示到子视图上,为视图添加背景颜色后,问题解决。


image.png
先写到这里,后续离屏渲染造成的性能损耗的问题,了解透彻后会慢慢补充。

相关文章

  • Swift-视图阴影篇

    最近接了一个需求,需要给视图添加阴影,发现其中还是有些门门道道的。写一篇文记录下。Swift中已经提供了很便捷的设...

  • ios开发中遇到过的问题

    1.SDWebImage篇 2.控件阴影篇 再加一句话:如果把其他控件加到设置阴影的视图上,子控件也会有阴影。所以...

  • 定义阴影与裁剪视图

    定义阴影与裁剪视图 本课程将向您展示如何 指定视图高度 自定义视图阴影与轮廓 裁剪视图 您也应该阅读 Materi...

  • iOS 如何切圆形的阴影效果

    // 如何切圆形的阴影效果 // 先创建一个父视图,给父视图加阴影,在再给原先的视图切圆角. //1.透明的...

  • 视图和阴影

    定义View的阴影 android 5.0增加了Z属性,用来控制View的高度,从而产生阴影效果 阴影是由Z属性控...

  • UIView圆角+阴影

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

  • iOS-Core Animation

    1、视图效果 1.1 圆角 1.2 图层边框 1.3 阴影 简单的阴影 裁剪 + 阴影 1.4 图层蒙版 1.5...

  • Swift-圆角与阴影

    iOS中圆角实现非常容易,对比而言,设置阴影则需要设置颜色,偏移位置,阴影透明度,阴影半径: ` /* T...

  • 底部弹出视图封装

    先看效果: 点击更换头像按钮,动画弹出底部视图,背景视图阴影效果,视图里的控件的touch响应事件通过block传...

  • iOS中给view设置阴影效果

    iOS开发中我们经常会遇到给指定视图设置其阴影效果 今天就来简单整理一下这里只是简单的给视图添加上阴影的效果 简单...

网友评论

    本文标题:Swift-视图阴影篇

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