Требования к операционной системе: iOS 5.0 и выше.
Мобильное устройство: iPad.
В данном примере описывается использование градиента для заливки фона ячеек таблицы. После его запуска выполняются следующие операции:
создаётся радиальный градиент с центром, совпадающим с центром ячейки;
создаётся линейный градиент, охватывающий практически всю область ячейки;
для градиентов задаются три точки с цветами, соответствующими минимальному, среднему и максимальному значениям ячеек;
радиальный градиент устанавливается для стиля заголовков таблицы;
линейный градиент устанавливается для стиля остальных ячеек.
Для выполнения примера необходимо разместить в теле метода executeExample класса ViewController (см. раздел «Создание простой электронной таблицы») следующий код:
// Определяем цвета для градиента 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]; // Получаем стиль заголовков таблицы NuGridCellStyle *headerStyle = [proxyDatasource gridView:[contr gridView] getStyleForHeaderForColumn:1]; // Создаём радиальный градиент NuGridRadialGradientBrush *radialGradientBrush = [[NuGridRadialGradientBrush new] autorelease]; // Определяем центр радиального градиента [radialGradientBrush setCenter:CGPointMake(0.5, 0.5)]; [radialGradientBrush setOpacity:0.5]; // Прозрачность // Получаем стиль остальных ячеек таблицы NuGridCellStyle *cellStyle = [proxyDatasource gridView:[contr gridView] getStyleForColumn:1]; // Создаём кисть NuGridLinearGradientBrush *linearGradientBrush = [[[NuGridLinearGradientBrush alloc] init] autorelease]; // Определяем начальную точку кисти [linearGradientBrush setStartPoint:CGPointMake(0.1, 0.1)]; // Определяем конечную точку кисти [linearGradientBrush setEndPoint:CGPointMake(0.9, 0.9)]; [linearGradientBrush setOpacity:0.5]; // Прозрачность // Определяем первую точку градиента NuGridGradientStop *gradientStop1 = [NuGridGradientStop gradientStopWithColor:redColor offset:0]; // Определяем вторую точку градиента NuGridGradientStop *gradientStop2 = [[NuGridGradientStop new] autorelease]; [gradientStop2 setColor:yellowColor]; [gradientStop2 setOffset:0.6]; // Определяем третью точку градиента NuGridGradientStop *gradientStop3 = [[NuGridGradientStop new] autorelease]; [gradientStop3 initWithColor:greenColor offset:1]; NSMutableArray *gradientStops = [NSMutableArray arrayWithArray:@[gradientStop1, gradientStop2, gradientStop3]]; // Указываем для кисти параметры градиентной заливки [radialGradientBrush setGradientStops:gradientStops]; [linearGradientBrush setGradientStops:gradientStops]; // Устанавливаем параметры кисти [headerStyle setBackgroundBrush:radialGradientBrush]; [cellStyle setBackgroundBrush:linearGradientBrush];
В результате выполнения примера для ячеек, являющихся заголовками таблицы, установлен радиальный градиент, для остальных - линейный:
Аналогичный результат получим, используя классы GradientBrush, GradientStop, LinearGradientBrush, RadialGradientBrush:
// Определяем цвета для градиента 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]; // Получаем стиль заголовков таблицы NuGridCellStyle *headerStyle = [proxyDatasource gridView:[contr gridView] getStyleForHeaderForColumn:1]; // Создаём радиальный градиент RadialGradientBrush *radialGradientBrush = [[RadialGradientBrush new] autorelease]; // Определяем центр радиального градиента [radialGradientBrush setCenter:CGPointMake(0.5, 0.5)]; [radialGradientBrush setOpacity:0.5]; // Прозрачность // Получаем стиль остальных ячеек таблицы NuGridCellStyle *cellStyle = [proxyDatasource gridView:[contr gridView] getStyleForColumn:1]; // Создаём кисть LinearGradientBrush *linearGradientBrush = [[LinearGradientBrush new] autorelease]; // Определяем начальную точку кисти [linearGradientBrush setStartPoint:CGPointMake(0.1, 0.1)]; // Определяем конечную точку кисти [linearGradientBrush setEndPoint:CGPointMake(0.9, 0.9)]; [linearGradientBrush setOpacity:0.5]; // Прозрачность // Определяем первую точку градиента GradientStop *gradientStop1 = [GradientStop gradientStopWithColor:redColor offset:0]; // Определяем вторую точку градиента GradientStop *gradientStop2 = [[GradientStop new] autorelease]; [gradientStop2 setColor:yellowColor]; [gradientStop2 setOffset:0.6]; // Определяем третью точку градиента GradientStop *gradientStop3 = [[GradientStop new] autorelease]; [gradientStop3 initWithColor:greenColor offset:1]; NSMutableArray *gradientStops = [NSMutableArray arrayWithArray:@[gradientStop1, gradientStop2, gradientStop3]]; // Указываем для кисти параметры градиентной заливки [radialGradientBrush setGradientStops:gradientStops]; [linearGradientBrush setGradientStops:gradientStops]; // Устанавливаем параметры кисти [headerStyle setBackgroundBrush:(NuGridRadialGradientBrush *)radialGradientBrush]; [cellStyle setBackgroundBrush:(NuGridLinearGradientBrush *)linearGradientBrush];
Теперь создадим собственную реализацию линейного и радиального градиента для заливки фона ячейки таблицы. Для этого заменим метод drawRect: в классе CustomCell следующим фрагментом кода:
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
if([self brush] != nil) {
CGRect bounds = rect;
CGContextRef context = UIGraphicsGetCurrentContext();
// Получаем экземпляр градиента
struct CGGradient *gradient = [(NuGridGradientBrush*)[self brush] gradient];
if ([[self brush] isKindOfClass:[NuGridRadialGradientBrush class]]) {
NuGridRadialGradientBrush *brush = (NuGridRadialGradientBrush*)[self brush];
// Определяем центральную точку градиента
CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);
// Получаем максимальное расстояние от левой верхней точки области ячейки до её границ
double distance = [(NuGridGradientBrush *)brush calcMaxDistance:center toEdges:bounds];
// Нарисуем радиальный градиент
CGContextDrawRadialGradient(context, gradient, center, 0, center, distance, 0);
} else {
// Определяем точку начала области градиента
CGPoint firstPoint = CGPointMake(bounds.origin.x + bounds.size.width * 0.1,
bounds.origin.y + bounds.size.height * 0.1);
// Определяем точку завершения области градиента
CGPoint secondPoint = CGPointMake(bounds.origin.x + bounds.size.width * 0.9,
bounds.origin.y + bounds.size.height * 0.9);
// Нарисуем линейный градиент в указанной области
CGContextDrawLinearGradient(context, gradient, firstPoint, secondPoint, 0);
}
CGGradientRelease(gradient);
}
}
Результат выполнения примера останется тем же. Не изменится он, если снова воспользуемся классами GradientBrush, GradientStop, LinearGradientBrush, RadialGradientBrush:
// Отрисовывает всплывающее окно
- (void) drawInContext: (CGContextRef) context boundsRect: (CGRect) boundsRect
{
MapPlaced *placed = [self placed];
// Создаём всплывающее окно
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);
// Устанавливаем заливку
[[placed background] applyToContext:context path:path rect:boundsRect];
CGContextSetAlpha(context, 1.0);
CGContextSetStrokeColorWithColor(context, [[self borderColor] CGColor]);
CGContextAddPath(context, path);
// Устанавливает толщину границы всплывающего окна
CGContextSetLineWidth(context, [placed borderThickness]);
CGContextStrokePath(context);
// Определяем расположение подписи в данном окне
CGPoint centerPoint = boundsRect.origin;
centerPoint.x += boundsRect.size.width / 2 - 10;
centerPoint.y += boundsRect.size.height / 4;
// Задаём цвет подписи
[[self tintColor] set];
// Отрисовываем подпись
[[placed ID] drawAtPoint:centerPoint withFont:[UIFont fontWithName:@"Arial" size:14]];
CGPathRelease(path);
}
См. также: