2011-09-08 57 views
5

我正在开发一个应用程序,其中我想创建类似于下图中所示的阴影效果在底部uitableviewcell。如何在uitableviewcell中创建阴影效果?

enter image description here

我该怎么做?任何教程或示例代码?我已经选择了http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html, http://www.touchthatfruit.com/?tag=uitableview 和其他一些ones.but但他们在uitableview的底部有相同高度的阴影。以及如何在包含日期(而不是整个tableview)的每个部分的边框处添加阴影。我可以创建底部的下拉阴影。但是每个部分的最后一个uitableview单元的边框怎么样?一种方法是创建图像并将其设置为tableviewcell的背景。但是如何调整图像的大小并使其看起来合适,因为每个部分都具有动态一个部分只有1个条目,其他部分可能包含15个或更多的条目(这里的图像是包含日期的整个部分).i只能为每个部分的最后一个tableviewcell提供单独的图像。这是我知道的但是有没有更好的方法或以编程方式进行?

回答

0

您可以参考在UITableView中的以下链接阴影效果,这将有助于你

try this

视图的一个基本部分是它的层,它是一个的CALayer。您可以通过视图的layer属性访问:

myView.layer

在文档CALayers有控制的影子几个属性。你应该能够告诉导航栏的图层投下阴影。随着你想要投下阴影的任何其他内容层。

myView.layer.shadowOffset 

myView.layer.shadowRadius 

您将需要确保到QuartzCore框架添加到项目中访问该属性

+0

因为我有问题,这不是帮助我 – Bhoomi

+0

检查我的更新代码 –

+0

我知道这一切的事情已经提到。但我所说的是,我无法按照所显示的图像来制作影子。 – Bhoomi

0

将每个部分始终是相同的大小?如果是这样,为什么不用UITableViewCell子类来绘制包含阴影的项目?

你也可以在UITableView上添加一个透明的UIImageView来获得黑暗的角落。

编辑:

这种效果是有点棘手,你会想看看如何使用UIBezierPaths(http://developer.apple.com/library/IOS/#documentation/UIKit/参考/ UIBezierPath_class /参考/的reference.html)。

顶部可以是一个图像(环和标签效果)。然后可以在drawRect函数中绘制其余的单元格。 (这比在UITableViewCell中重要的层中使用阴影属性更有效)。

你会想覆盖你的UITableViewCell类并实现一个自定义的drawRect:函数。

下面是一些代码,让你开始:

// Only override drawRect: if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    - (void)drawRect:(CGRect)rect 
    { 

     /* Draw top image here */ 

     //now draw the background of the cell. 
     UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 320, 50)]; 
     [[UIColor grayColor] set]; 
     [path1 fill]; 

     UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 52, 320, 50)]; 
     [[UIColor whiteColor] set]; 
     [path2 fill]; 

     UIBezierPath *path3 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 104, 320, 50)]; 
     [[UIColor grayColor] set]; 
     [path3 fill]; 

     UIBezierPath *path4 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 156, 320, 50)]; 
     [[UIColor whiteColor] set]; 
     [path4 fill]; 

     //and so on... 

     //Let's draw the shadow behind the last portion of the cell. 
     UIBezierPath *shadow = [UIBezierPath bezierPathWithRect:CGRectMake(0, 208, 320, 52)]; 
     [[UIColor darkGrayColor] set]; 
     [shadow fill]; 

     //Finally, here's the last cell with a curved bottom 
     UIBezierPath *path5 = [UIBezierPath bezierPath]; 
     [path5 moveToPoint:CGPointMake(0, 208)]; 
     [path5 addLineToPoint:CGPointMake(320, 208)]; 
     [path5 addLineToPoint:CGPointMake(320, 258)]; 
     [path5 addCurveToPoint:CGPointMake(0, 258) controlPoint1:CGPointMake(160, 254) controlPoint2:CGPointMake(160, 254)]; 
     [[UIColor grayColor] set]; 
     [path5 fill]; 
    } 

的代码是不是很拖放,您仍然需要添加的白线,修正了一些尺寸,并调整最后一个单元格和阴影恰到好处。但它应该足以让你开始。

干杯!

+0

这里每个部分的大小都不一样,它也是不同的和动态的。 – Bhoomi

+0

查看更新的问题 – Bhoomi

0

看看我的answer到类似的问题,这可能是一个可能的解决方案,您的问题!通过改变阴影路径,您应该能够实现所需的阴影效果!