V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
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
butterflydog
V2EX  ›  iDev

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

  •  
  •   butterflydog · 2016-01-07 15:32:14 +08:00 · 2087 次点击
    这是一个创建于 3246 天前的主题,其中的信息可能已经有所发展或是发生改变。

    实现卡片样式的 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
    6 条回复    2016-01-08 13:43:08 +08:00
    zsk425
        1
    zsk425  
       2016-01-07 23:41:39 +08:00   ❤️ 1
    问题出在你使用 shadowPath 时获取到的的 bounds.size 都是不正确的。
    如果仅仅是偏移,使用 shadowOffset 就可以了,这里没有必要用 shadowPath
    butterflydog
        2
    butterflydog  
    OP
       2016-01-08 09:42:11 +08:00
    @zsk425 多谢,我试了下,这样设置可以, table 的滑动稍微有点卡顿,不过可以接受。
    但还是会出现 cell 滑出显示区域,重新滑回来时,阴影被裁切的现象,可能是我的 auto layout 约束设置不正确吧,也不好调试。。。。
    zsk425
        3
    zsk425  
       2016-01-08 10:07:42 +08:00
    @butterflydog 你可以更新一下你的示例代码,我帮你看看
    butterflydog
        4
    butterflydog  
    OP
       2016-01-08 10:53:07 +08:00
    @zsk425 修改后发现,这个 Demo 一直都不会出现阴影下边被裁切的情况(看下图),我在项目里再测试一下吧,谢谢了

    https://github.com/neil-wu/TestCardShadow/blob/master/Screenshot/shadow_clip.png
    xi_lin
        5
    xi_lin  
       2016-01-08 13:26:23 +08:00   ❤️ 1
    @butterflydog 重写一下 cell 的 prepareForReuse 方法,在里面清空阴影设置
    butterflydog
        6
    butterflydog  
    OP
       2016-01-08 13:43:08 +08:00
    @xi_lin 好嘞,我试试,谢啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3129 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 00:36 · PVG 08:36 · LAX 16:36 · JFK 19:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.