iOS 开发实用技术导航
NSHipster 中文版
› http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
› http://www.cocos2d-iphone.org/
CocoaPods
› http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
› http://code.google.com/mobile/analytics/
WWDC
› https://developer.apple.com/wwdc/
Design Guides and Resources
› https://developer.apple.com/design/
Transcripts of WWDC sessions
› http://asciiwwdc.com
Cocoa with Love
› http://cocoawithlove.com/
Cocoa Dev Central
› http://cocoadevcentral.com/
NSHipster
› http://nshipster.com/
Style Guides
› Google Objective-C Style Guide
› NYTimes Objective-C Style Guide
Useful Tools and Services
› Charles Web Debugging Proxy
› Smore
实现卡片样式的 table cell 设置 shadow 时候显示异常
butterflydog · 2016-01-07 15:32:14 +08:00 · 2086 次点击这是一个创建于 3245 天前的主题，其中的信息可能已经有所发展或是发生改变。
实现卡片样式的 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
第 1 条附言 · 2016-01-08 14:30:45 +08:00
找到为什么阴影被裁切了，因为设置了 cell 的 backgroundColor ，当某个 index 的 cell 滑出屏幕后再次滑回来显示时候，显示层级变化，导致相邻的 cell 覆盖在其上面，因为 cell 的有背景色，看起来就好像被裁切掉了。
只需要把 cell 的 self.backgroundColor = UIColor.clearColor() 就 OK
只需要把 cell 的 self.backgroundColor = UIColor.clearColor() 就 OK
6 条回复 • 2016-01-08 13:43:08 +08:00
 |
1
zsk425 2016-01-07 23:41:39 +08:00  1
问题出在你使用 shadowPath 时获取到的的 bounds.size 都是不正确的。
如果仅仅是偏移，使用 shadowOffset 就可以了，这里没有必要用 shadowPath |
 |
2
butterflydog OP @zsk425 多谢，我试了下，这样设置可以， table 的滑动稍微有点卡顿，不过可以接受。
但还是会出现 cell 滑出显示区域，重新滑回来时，阴影被裁切的现象，可能是我的 auto layout 约束设置不正确吧，也不好调试。。。。 |
|
3
zsk425 2016-01-08 10:07:42 +08:00
@butterflydog 你可以更新一下你的示例代码，我帮你看看
|
|
4
butterflydog OP @zsk425 修改后发现，这个 Demo 一直都不会出现阴影下边被裁切的情况(看下图)，我在项目里再测试一下吧，谢谢了
https://github.com/neil-wu/TestCardShadow/blob/master/Screenshot/shadow_clip.png |
 |
5
xi_lin 2016-01-08 13:26:23 +08:00 1
@butterflydog 重写一下 cell 的 prepareForReuse 方法，在里面清空阴影设置
|
|
6
butterflydog OP @xi_lin 好嘞，我试试，谢啦
|
Select Language