How to create shadow effect in uitableviewcell?

Question

i am developing one application in which i want to create shadow effect similar to shown in below image at bottom uitableviewcell.

How can i do that?any tutorial or sample code? I have checked http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html, http://www.touchthatfruit.com/?tag=uitableview and some other ones.but they have shadow at bottom of uitableview with same height.and how to add shadow at side borders of each section containing the date(not the entire tableview).I can create the dropdown shadow at bottom.but what about side borders of last uitableview cell of each section.and one way is creating the image and setting it as background of tableviewcell.But how to resize the image and will it look proper because each section has dynamic number of entries.one section only have 1 entry and other may contain 15 or more entries.(here image is for entire section which contains date).i can have seperate image for only last tableviewcell of each section.This is i know.but is there any better approach or do it programatically?

Answer 1

Take a look at my answer to a similar question, this one may be a possible solution to your problem! By altering the shadow path you should be able to achieve the desired shadow effect!

Answer 2

You can refer the following link for shadow effect in uitableview that will help you

try this

A fundamental piece of a view is it's layer which is a CALayer. You can access it through the layer property of a view:

myView.layer

In the documentation CALayers have several properties that control the shadow. You should be able to tell the navigation bar's layer to cast a shadow. Along with the layers of any other content that you want to cast a shadow.

myView.layer.shadowOffset

myView.layer.shadowRadius

You will need to be sure to add the QuartzCore framework to your project to access this property

Answer 3

Will each section always be the same size? If so why don't you subclass the UITableViewCell to draw the notebook like item with the drop shadow included?

You can also add a transparent UIImageView over the UITableView to get the darkened corners.

EDIT:

This effect is a bit tricky, you're going to want to look into how to use UIBezierPaths (http://developer.apple.com/library/IOS/#documentation/UIKit/Reference/UIBezierPath_class/Reference/Reference.html).

The top portion can be an image (the rings and tab effect). You can then draw the rest of the cell in the drawRect function. (This more efficient than using the shadow properties in layer which is important in a UITableViewCell).

You'll want to override your UITableViewCell class and implement a custom drawRect: function.

Here's some code to get you started:

    // 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];
    }

The code isn't quite drag and drop, You still need to add the white lines, fix some sizes, and tweak the last cell and shadow to be just right. But it should be enough to get you started.

Cheers!

Answer 4

This can be achieved using the bezierpath:Check the URL for getting various shadow effects:http://nachbaur.com/blog/fun-shadow-effects-using-custom-calayer-shadowpaths