Градиенты на UIView и UILabels на iPhone

Возможный дубликат:
Вручную рисовать градиент в приложениях iPhone?

Мое приложение должно отображать текст либо в UIView, либо UILabel, но на заднем плане должен быть градиент, а не истинный UIColor. Использование графической программы для создания желаемого внешнего вида не подходит, так как текст может меняться в зависимости от данных, возвращаемых с сервера.

Кто-нибудь знает самый быстрый способ справиться с этим? Ваши мысли приветствуются.

Ответ 1

Вы также можете использовать графическое изображение шириной в один пиксель в качестве градиента и установить свойство вида для расширения графика, чтобы заполнить представление (предполагая, что вы думаете о простом линейном градиенте, а не о какой-то радиальной графике).

Ответ 2

Я понимаю, что это более старый поток, но для справок в будущем:

Как и iPhone SDK 3.0, пользовательские градиенты могут быть реализованы очень легко, без подкласса или изображений, используя новый CAGradientLayer:

 UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

Взгляните на документы CAGradientLayer. Вы можете опционально указать начальную и конечную точки (если вам не нужен линейный градиент, идущий прямо сверху вниз) или даже конкретные местоположения, которые соответствуют каждому из цветов.

Ответ 3

Вы можете использовать Core Graphics для рисования градиента, как указано в ответе Майка. В качестве более подробного примера вы можете создать подкласс UIView для использования в качестве фона для вашего UILabel. В этом подклассе UIView переопределите метод drawRect: и введите код, похожий на следующий:

- (void)drawRect:(CGRect)rect 
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

В этом конкретном примере создается белый градиент с глянцевым стилем, который рисуется с вершины UIView до его вертикального центра. Вы можете установить UIView backgroundColor как угодно, и этот блеск будет нарисован поверх этого цвета. Вы также можете нарисовать радиальный градиент с помощью функции CGContextDrawRadialGradient.

Вам просто нужно соответствующим образом изменить размер UIView и добавить UILabel в качестве подзадачи для получения желаемого эффекта.

EDIT (4/23/2009): Per St3fan предложение, я заменил рамку представления своими границами в коде. Это исправляется для случая, когда начало координат не равно (0,0).

Ответ 4

При использовании CAGradientLayer, в отличие от CGGradient, градиент не является гладким, но имеет заметный шаг к нему. См. this example:

Чтобы получить более привлекательные результаты, лучше использовать CGGradient.

Ответ 5

Ответ Mirko Froehlich работал у меня, если только я не хотел использовать пользовательские цвета. Хитрость заключается в том, чтобы указать цвет пользовательского интерфейса с оттенком, насыщенностью и яркостью вместо RGB.

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myView.bounds;
UIColor *startColour = [UIColor colorWithHue:.580555 saturation:0.31 brightness:0.90 alpha:1.0];
UIColor *endColour = [UIColor colorWithHue:.58333 saturation:0.50 brightness:0.62 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor], (id)[endColour CGColor], nil];
[myView.layer insertSublayer:gradient atIndex:0];

Чтобы получить оттенок, насыщенность и яркость цвета, используйте встроенный блок выбора цвета xcode и перейдите на вкладку HSB. Оттенок измеряется в градусах в этом представлении, поэтому разделите значение на 360, чтобы получить значение, которое вы хотите ввести в код.

Ответ 6

Это то, что я получил, установил UIButton в xCode IB прозрачным/прозрачным и без изображения bg.

UIColor *pinkDarkOp = [UIColor colorWithRed:0.9f green:0.53f blue:0.69f alpha:1.0];
UIColor *pinkLightOp = [UIColor colorWithRed:0.79f green:0.45f blue:0.57f alpha:1.0];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = [[shareWordButton layer] bounds];
gradient.cornerRadius = 7;
gradient.colors = [NSArray arrayWithObjects:
                   (id)pinkDarkOp.CGColor,
                   (id)pinkLightOp.CGColor,
                   nil];
gradient.locations = [NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:0.0f],
                      [NSNumber numberWithFloat:0.7],
                      nil];

[[recordButton layer] insertSublayer:gradient atIndex:0];

Ответ 7

Я достигаю этого в представлении с подзоном, который является UIImageView. Изображение, на которое обращается ImageView, является градиентом. Затем я устанавливаю цвет фона в UIView, и у меня есть цветное представление градиента. Затем я использую представление так, как мне нужно, и все, что я рисую, будет находиться под этим видом градиента. Добавив второй вид поверх ImageView, вы можете иметь некоторые параметры, будет ли ваш рисунок ниже или выше градиента...