Operating system requirements: iOS 5.0 or later.
Mobile device: iPad.
This example describes the use of gradient for table cell background fill. After starting the example the following operations are executed:
Radial gradient is created with the center that matches the cell center.
Linear gradient is created that covers almost the whole cell area.
Three points are set for the gradients that correspond to minimum, medium and maximum cell values.
The radial gradient is set for table header style.
The linear gradient is set for other cell style.
Executing the example requires to place the following code in the body of the executeExample method of the ViewController class (see the Creating a Simple Data Grid section):
// Determine gradient color UIColor *redColor = [UIColor colorWithRed:0.94 green:0.43 blue:0.46 alpha:1]; UIColor *yellowColor = [UIColor colorWithRed:0.96 green:0.91 blue:0.46 alpha:1]; UIColor *greenColor = [UIColor colorWithRed:0.62 green:0.86 blue:0.29 alpha:1]; // Get table header style NuGridCellStyle *headerStyle = [proxyDatasource gridView:[contr gridView] getStyleForHeaderForColumn:1]; // Create radial gradient NuGridRadialGradientBrush *radialGradientBrush = [[NuGridRadialGradientBrush new] autorelease]; // Determine radial gradient center [radialGradientBrush setCenter:CGPointMake(0.5, 0.5)]; [radialGradientBrush setOpacity:0.5]; // Transparency // Get other table cell style NuGridCellStyle *cellStyle = [proxyDatasource gridView:[contr gridView] getStyleForColumn:1]; // Create a brush NuGridLinearGradientBrush *linearGradientBrush = [[[NuGridLinearGradientBrush alloc] init] autorelease]; // Determine brush start point [linearGradientBrush setStartPoint:CGPointMake(0.1, 0.1)]; // Determine brush end point [linearGradientBrush setEndPoint:CGPointMake(0.9, 0.9)]; [linearGradientBrush setOpacity:0.5]; // Transparency // Determine gradient first point NuGridGradientStop *gradientStop1 = [NuGridGradientStop gradientStopWithColor:redColor offset:0]; // Determine gradient second point NuGridGradientStop *gradientStop2 = [[NuGridGradientStop new] autorelease]; [gradientStop2 setColor:yellowColor]; [gradientStop2 setOffset:0.6]; // Determine gradient third point NuGridGradientStop *gradientStop3 = [[NuGridGradientStop new] autorelease]; [gradientStop3 initWithColor:greenColor offset:1]; NSMutableArray *gradientStops = [NSMutableArray arrayWithArray:@[gradientStop1, gradientStop2, gradientStop3]]; // Specify gradient fill parameters for brush [radialGradientBrush setGradientStops:gradientStops]; [linearGradientBrush setGradientStops:gradientStops]; // Set brush parameters [headerStyle setBackgroundBrush:radialGradientBrush]; [cellStyle setBackgroundBrush:linearGradientBrush];
After executing the example the radial gradient is set for table header cells, and the linear gradient is set for other cells:
The identical result is obtained by using the GradientBrush, GradientStop, LinearGradientBrush, RadialGradientBrush classes:
// Determine gradient colors UIColor *redColor = [UIColor colorWithRed:0.94 green:0.43 blue:0.46 alpha:1]; UIColor *yellowColor = [UIColor colorWithRed:0.96 green:0.91 blue:0.46 alpha:1]; UIColor *greenColor = [UIColor colorWithRed:0.62 green:0.86 blue:0.29 alpha:1]; // Get table header style NuGridCellStyle *headerStyle = [proxyDatasource gridView:[contr gridView] getStyleForHeaderForColumn:1]; // Create radial gradient RadialGradientBrush *radialGradientBrush = [[RadialGradientBrush new] autorelease]; // Determine radial gradient center [radialGradientBrush setCenter:CGPointMake(0.5, 0.5)]; [radialGradientBrush setOpacity:0.5]; // Transparency // Get other table cell style NuGridCellStyle *cellStyle = [proxyDatasource gridView:[contr gridView] getStyleForColumn:1]; // Create a brush LinearGradientBrush *linearGradientBrush = [[LinearGradientBrush new] autorelease]; // Determine brush start point [linearGradientBrush setStartPoint:CGPointMake(0.1, 0.1)]; // Determine brush end point [linearGradientBrush setEndPoint:CGPointMake(0.9, 0.9)]; [linearGradientBrush setOpacity:0.5]; // Transparency // Determine gradient first point GradientStop *gradientStop1 = [GradientStop gradientStopWithColor:redColor offset:0]; // Determine gradient second point GradientStop *gradientStop2 = [[GradientStop new] autorelease]; [gradientStop2 setColor:yellowColor]; [gradientStop2 setOffset:0.6]; // Determine gradient third point GradientStop *gradientStop3 = [[GradientStop new] autorelease]; [gradientStop3 initWithColor:greenColor offset:1]; NSMutableArray *gradientStops = [NSMutableArray arrayWithArray:@[gradientStop1, gradientStop2, gradientStop3]]; // Specify gradient fill parameters for brush [radialGradientBrush setGradientStops:gradientStops]; [linearGradientBrush setGradientStops:gradientStops]; // Set brush parameters [headerStyle setBackgroundBrush:(NuGridRadialGradientBrush *)radialGradientBrush]; [cellStyle setBackgroundBrush:(NuGridLinearGradientBrush *)linearGradientBrush];
Then create a custom implementation of linear and radial gradients for table cell background fill. To do this, replace the drawRect: method in the CustomCell class with the following code fragment:
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
if([self brush] != nil) {
CGRect bounds = rect;
CGContextRef context = UIGraphicsGetCurrentContext();
// Get gradient instance
struct CGGradient *gradient = [(NuGridGradientBrush*)[self brush] gradient];
if ([[self brush] isKindOfClass:[NuGridRadialGradientBrush class]]) {
NuGridRadialGradientBrush *brush = (NuGridRadialGradientBrush*)[self brush];
// Determine gradient central point
CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);
// Get maximum distance between left top point of cell area and its borders
double distance = [(NuGridGradientBrush *)brush calcMaxDistance:center toEdges:bounds];
// Draw radial gradient
CGContextDrawRadialGradient(context, gradient, center, 0, center, distance, 0);
} else {
// Determine gradient area start point
CGPoint firstPoint = CGPointMake(bounds.origin.x + bounds.size.width * 0.1,
bounds.origin.y + bounds.size.height * 0.1);
// Determine gradient area end point
CGPoint secondPoint = CGPointMake(bounds.origin.x + bounds.size.width * 0.9,
bounds.origin.y + bounds.size.height * 0.9);
// Draw linear gradient in the specified area
CGContextDrawLinearGradient(context, gradient, firstPoint, secondPoint, 0);
}
CGGradientRelease(gradient);
}
}
The example execution result is not changed. It is not changed if we use the GradientBrush, GradientStop, LinearGradientBrush, RadialGradientBrush classes:
// Draws popup window
- (void) drawInContext: (CGContextRef) context boundsRect: (CGRect) boundsRect
{
MapPlaced *placed = [self placed];
// Create a popup window
CGPathRef path = createBubble(
CGRectMake(0.5,0.5, boundsRect.size.width-1,
boundsRect.size.height-1),
[placed borderRadius],
0.5,
14, 11,
[self arrowOrientation]);
CGContextSetAlpha(context, 1.0);
// Set fill
[[placed background] applyToContext:context path:path rect:boundsRect];
CGContextSetAlpha(context, 1.0);
CGContextSetStrokeColorWithColor(context, [[self borderColor] CGColor]);
CGContextAddPath(context, path);
// Sets popup window border thickness
CGContextSetLineWidth(context, [placed borderThickness]);
CGContextStrokePath(context);
// Determine text position in this window
CGPoint centerPoint = boundsRect.origin;
centerPoint.x += boundsRect.size.width / 2 - 10;
centerPoint.y += boundsRect.size.height / 4;
// Set text color
[[self tintColor] set];
// Draw text
[[placed ID] drawAtPoint:centerPoint withFont:[UIFont fontWithName:@"Arial" size:14]];
CGPathRelease(path);
}
See also: