UITableView Shadows top and bottom

Question

In one of my view I'm using a UIWebView and I like the default shadow effects on top and bottom of the background view, and also top and bottom of the scroll area.

There is the same in the Clock app, with a custom background (blue line with world map) so it is possible using a UITableView also I guess...

Here is what I have with my web view, and that I'd like to add to a table view. My web view:

So I added an custom background here (the light gray texture). Here is below the other view where I added the same background, but as you can see there is no shadow... It's not a built-in effect as a UIScrollView I guess. Is there a way to do the same with a table view?

My table view:

UPDATE 1:

I found this great articleUITableView Shadows but there is no shadow for the bottom of the view.

Answer 1

Here is my code in Swift I think it works well:

func shadowView (view : UIView , r : CGFloat, gr : CGFloat , b : CGFloat , header : Bool)
    {
        let bottomColor = UIColor (red: r/255 , green: gr/255 , blue: b/255 , alpha: 0)

        //var bottomColor = UIColor ( red: (r/255), green : (g/255), blue : (b/255), alpha : 0)
        //var topColor = UIColor ( red: (r/255), green : (g/255), blue : (b/255), alpha : 1)
        let topColor = UIColor (red: r/255, green: gr/255, blue: b/255, alpha: 1)
        var arrayColors: [CGColor] = [
            topColor.CGColor,
            bottomColor.CGColor
        ]

        if header
        {
            let headerShadow: CAGradientLayer = CAGradientLayer()

            headerShadow.frame = CGRect(x: 0, y: 0, width: UIScreen.mainScreen().bounds.width, height: view.frame.size.height)
            headerShadow.colors = arrayColors
            view.layer.insertSublayer(headerShadow, atIndex: 1)
        } else
        {
            let footerShadow: CAGradientLayer = CAGradientLayer()

            arrayColors  = [
                bottomColor.CGColor,
                topColor.CGColor
            ]
            footerShadow.frame = CGRect(x: 0, y: 0 , width: UIScreen.mainScreen().bounds.width, height: view.frame.size.height)
            footerShadow.colors = arrayColors
            view.layer.insertSublayer(footerShadow, atIndex: 1)
        }
    }

Answer 2

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

This works for both UITableViewController and UIViewController . In my viewDidLoad: I use the following code:

[self.view addSubview:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"shadow.png"]]];

This will add the shadow just under the navigation bar.

And this is my shadow I threw together in Photoshop:

shadow@2x.png:

Answer 4

My code. Eg for shadow in footer:

- (UIView*)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,tableView.bounds.size.width, 11)];

    UIImageView *shadow = [[UIImageView alloc] initWithImage:[UIImage 
                                                  imageNamed:@"tableHeaderBottom"]];
    [shadow sizeToFit];
    [footerView addSubview:shadow];

    return footerView;
}

- (void)viewDidLoad
{
    [self.tableView setContentInset:UIEdgeInsetsMake(0, 0, -11, 0)];
    [super viewDidLoad];
}

The images:

For the header: Use the same code but just flip the image vertically and use viewForHeaderInSection on the first section (0).