在 iOS 里 100% 还原 Sketch 实现的阴影效果
程序员文章站
2022-08-09 16:38:59
还原不了设计师视觉稿的开发者不是一个合格的页面仔。 Sketch 是 APP 设计的神器,大部分设计师都选择它作为 APP 界面的设计工具。 在 Sketch 里设置一个阴影,效果图和参数如下: 开发实现 在 iOS 里实现阴影的方式是使用 UIView 的 layer 属性。 layer 里与阴影 ......
还原不了设计师视觉稿的开发者不是一个合格的页面仔。
sketch 是 app 设计的神器,大部分设计师都选择它作为 app 界面的设计工具。
在 sketch 里设置一个阴影,效果图和参数如下:
开发实现
在 ios 里实现阴影的方式是使用 uiview 的 layer 属性。
layer 里与阴影有关的设置是以下几个属性:
- shadowpath
- shadowcolor
- shadowopacity
- shadowoffset
- shadowradius
与 sketch 里阴影参数的对应关系是:
- shadowpath ~> 阴影的范围
- shadowcolor ~> 阴影的颜色
- shadowopacity ~> 阴影的透明度
- shadowoffset ~> x 和 y
- shadowradius ~> 阴影的模糊
根据上图的对应关系,在代码里实现就是(shadowview 的大小是 100x100):
以上代码运行的效果如下:
100% 还原了 sketch 的设计,完美了。
值得一提的是:layer 阴影和圆角是可以共存的,而且阴影路径也需要考虑圆角的值。
为了使用方便,为 calayer 添加一个设置阴影的扩展:
使用很简单,传入的值和 sketch 里的阴影参数一样就行: