实现卡片样式的 table cell 设置 shadow 时候显示异常

2016-01-07 15:32:14 +08:00
 butterflydog

实现卡片样式的 table cell 设置 shadow 时候显示异常

写了个 Demo ,放在 https://github.com/neil-wu/TestCardShadow

问题:初始化显示后, shadow 的位置并不正确,如下图,需要再次 reload 一下就正常了。

错误截图

有遇到过类似问题的朋友,求指导。

大家都是怎么实现类似的阴影效果呢?

这个 Demo 没有出现的另外一个问题是:滑动 table 后, cell 重新出现时它的阴影看不到了。

设置 shadow 的代码如下:

let shadowLayer = self.cardBgView.layer
    shadowLayer.shadowOffset = CGSizeMake(1, 1)
    shadowLayer.shadowRadius = 3.0
    shadowLayer.shadowColor = UIColor.grayColor().CGColor
    shadowLayer.shadowOpacity = 0.5

    let shadowSize = self.cardBgView.bounds.size
    shadowLayer.shadowPath = UIBezierPath(rect: CGRectMake(2, 2, shadowSize.width,  shadowSize.height)).CGPath
2006 次点击
所在节点    iDev
6 条回复
zsk425
2016-01-07 23:41:39 +08:00
问题出在你使用 shadowPath 时获取到的的 bounds.size 都是不正确的。
如果仅仅是偏移,使用 shadowOffset 就可以了,这里没有必要用 shadowPath
butterflydog
2016-01-08 09:42:11 +08:00
@zsk425 多谢,我试了下,这样设置可以, table 的滑动稍微有点卡顿,不过可以接受。
但还是会出现 cell 滑出显示区域,重新滑回来时,阴影被裁切的现象,可能是我的 auto layout 约束设置不正确吧,也不好调试。。。。
zsk425
2016-01-08 10:07:42 +08:00
@butterflydog 你可以更新一下你的示例代码,我帮你看看
butterflydog
2016-01-08 10:53:07 +08:00
@zsk425 修改后发现,这个 Demo 一直都不会出现阴影下边被裁切的情况(看下图),我在项目里再测试一下吧,谢谢了

https://github.com/neil-wu/TestCardShadow/blob/master/Screenshot/shadow_clip.png
xi_lin
2016-01-08 13:26:23 +08:00
@butterflydog 重写一下 cell 的 prepareForReuse 方法,在里面清空阴影设置
butterflydog
2016-01-08 13:43:08 +08:00
@xi_lin 好嘞,我试试,谢啦

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/249051

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX