Add gradient background for only last 2 section on UITableView - ios

Question

I'm creating a UITableView have 3 sections with custom cells. At 1st section I set it to white background color. Now I wanna set a gradient background like image below for only section 2nd and 3rd (this background will start from section 2 and end at last row of section 3):
How can I do that? Can someone give me a solution? Thanks.

Answer 1

This is actually pretty easy.
First, make sure each cell has a transparent background color. The default is opaque white. You can set this in your storyboard, or you can do it in your tableView:cellForRowAtIndexPath: method like this:
cell.backgroundColor = [UIColor clearColor];
Next, make a subclass of UITableView and override layoutSubviews. Be sure to call [super layoutSubviews].
In your override of layoutSubviews, the first time it's called, make a CAGradientLayer with your chosen gradient and add it as a sublayer of the table view's layer at index 0 (so it's behind all of the table view's other sublayers). On every call, update the frame of the gradient layer to be the union of [self rectForSection:1] and [self rectForSection:2].
Also, remember to set the custom class of the table view in your storyboard.
Here's the table view subclass I used to make the demo.
GradientTableView.h
#import <UIKit/UIKit.h>
#interface GradientTableView : UITableView
#end
GradientTableView.m
#import "GradientTableView.h"
#implementation GradientTableView {
CAGradientLayer *gradientLayer;
}
- (void)layoutSubviews {
[super layoutSubviews];
[self layoutGradient];
}
- (void)layoutGradient {
[self createGradientLayerIfNeeded];
[self updateGradientLayerFrame];
}
- (void)createGradientLayerIfNeeded {
if (gradientLayer != nil) {
return;
}
gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = #[
(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor orangeColor].CGColor
];
gradientLayer.locations = #[ #0, #1 ];
gradientLayer.startPoint = CGPointZero;
gradientLayer.endPoint = CGPointMake(0, 1);
gradientLayer.type = kCAGradientLayerAxial;
[self.layer insertSublayer:gradientLayer atIndex:0];
}
- (void)updateGradientLayerFrame {
CGRect frame = [self rectForSection:1];
frame = CGRectUnion(frame, [self rectForSection:2]);
gradientLayer.frame = frame;
}
#end

Answer 2

Edit:
This answer contains some general information on table views and an easy solution to your question if a coarse gradient as shown in the screenshot below suffices. If you need a more fine-grained solution please refer to Rob's answer.
Apart from the fact that it's really hard to recognize that your background image has a gradient at all (it looks like a plain red image to me and you should consider just using a red background color instead) there is no way to just set an image as the background of a whole section using the standard UIKit API. And there's a reason for that:
A UITableView doesn't load all its cells when it appears on screen. Instead it only loads those cells that are visible at the moment plus a couple of buffer cells below (and above) in order to enable smooth scrolling. A table view section is rather an abstract concept that's intended to help you present your data in a structured fashion as it gives you headers and footers for each section and the ability to give your cells a different format (e.g. a different background color) depending on the section index. However, a table view section is not a view that is placed behind your cells. And thus you cannot apply a background image or a color to it.
You can see that when you look at an arbitrary table view in Xcode's view debugger:
The selected light blue view is the table view's wrapper view. The upper next view layer is already the table view cells. So there's no "section view" or something in between.
As you can see from the screenshot it's possible and quite easy to get a rough gradient effect by simply setting the cell's background color depending on its index path. I achieved this effect with the following two lines of code in the cellForRowAtIndexPath method:
Swift:
let redColorValue = CGFloat(indexPath.row)/CGFloat(tableView.numberOfRowsInSection(indexPath.section))
cell.backgroundColor = UIColor.init(red: redColorValue, green: 0.5, blue: 0.8, alpha: 1)
Objective-C:
CGFloat redColorValue = (CGFloat)(indexPath.row) / aSection;
cell.backgroundColor = [UIColor colorWithRed:redColorValue green:0.5 blue:0.8 alpha:1];
This way the first and the last cell in the section will always have the same color so the gradient will dynamically change its height depending on the number of cells in your section.

Answer 3

I think you need to set the background to the cell, so it moves with scrolling. You need to know where your sections begins (0, 5, 10):
if (indexPath.row < 5)
{
[cell setBackgroundColor:[UIColor whiteColor]];
}
if (indexPath.row > 5 && < 10)
{
[cell setBackgroundColor:[UIColor gradientColor]];
}
if (indexPath.row > 10)
{
[cell setBackgroundColor:[UIColor gradientColor2]];
}