IOS SDK имеет полезный способ создания линейного градиента с помощью CAGradientLayer , но он не обеспечивает быстрый и простой способ создания радиального градиента, чего мы и хотим. Для этого нам нужно немного покопаться и начать работать с платформой Core Graphics.

На самом деле мы собираемся определить метод, который возвращает объект UIImage, объект, который мы собираемся создать с нуля — используя код! Код отличный.

Код выглядит немного волосатым, поэтому просмотрите комментарии, чтобы иметь смысл. Или просто скопируйте, вставьте его и забудьте об этом.

 - (UIImage *)addBackground{
	// Create an image context (think of this as a canvas for our masterpiece) the same size as the view
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, 1);
    
	// Our gradient only has two locations - start and finish. More complex gradients might have more colours
    size_t num_locations = 2;

	// The location of the colors is at the start and end
    CGFloat locations[2] = { 0.0, 1.0 };

	// These are the colors! That's two RBGA values
    CGFloat components[8] = {
        0.4,0.4,0.4, 0.8,
        0.1,0.1,0.1, 0.5 };    
    
	// Create a color space
    CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();

	// Create a gradient with the values we've set up
    CGGradientRef myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations);
    
	// Set the radius to a nice size, 80% of the width. You can adjust this
    float myRadius = (self.bounds.size.width*.8)/2;
    
	// Now we draw the gradient into the context. Think painting onto the canvas
    CGContextDrawRadialGradient (UIGraphicsGetCurrentContext(), myGradient, self.center, 0, self.center, myRadius, kCGGradientDrawsAfterEndLocation);
    
	// Rip the 'canvas' into a UIImage object
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
	// And release memory
    CGColorSpaceRelease(myColorspace);
    CGGradientRelease(myGradient);
    UIGraphicsEndImageContext();

	// … obvious.
    return image;
}

Все еще со мной? Нет? Черт.

Следует отметить основные компоненты CGFloat, которые определяют цвета для градиента, и поплавок myRadius, который позволяет изменить размер градиента.

Если вы добавите этот метод и его соответствующее определение метода в заголовок, мы теперь готовы вызывать его из метода loadSpinnerIntoView и вставлять его в фон вместо простого черного фона.

Удалите линию, которая делает фон черным

 spinnerView.backgroundColor = [UIColor blackColor];

И добавьте это перед кодом индикатора активности (иначе он будет выше индикатора активности. Не хорошо.

 // Create a new image view, from the image made by our gradient method
    UIImageView *background = [[UIImageView alloc] initWithImage:[spinnerView addBackground]];

	// Make a little bit of the superView show through
    background.alpha = 0.7;
    
    [spinnerView addSubview:background];

Теперь, если вы создадите свое приложение, вы увидите чертовски привлекательный спиннер!

Вот и вся тяжелая работа. Осталось только добавить вишню сверху; затухание вращающегося взгляда внутрь и наружу. Это удивительно просто — за исключением того, что вы должны добавить в платформу QuartzCore.

Для тех из вас, кто забыл шаги по добавлению фреймворка: перейдите в настройки своих проектов, выберите цель (в моем случае «Spinner View») -> Фазы сборки -> Связать двоичные файлы с библиотеками, нажмите символ плюса и найдите QuartzCore.framework.

Убедитесь, что вы импортируете, а затем добавьте это непосредственно перед возвратом из метода loadSpinnerIntoView.

 // Create a new animation
    CATransition *animation = [CATransition animation];

	// Set the type to a nice wee fade
	[animation setType:kCATransitionFade];

	// Add it to the superView
	[[superView layer] addAnimation:animation forKey:@"layerAnimation"];

В функции removeSpinner код практически идентичен.

 // Add this in at the top of the method. If you place it after you've remove the view from the superView it won't work!
    CATransition *animation = [CATransition animation];
	[animation setType:kCATransitionFade];
	[[[self superview] layer] addAnimation:animation forKey:@"layerAnimation"];

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

Mint.