如何添加径向渐变到UIView？

我有一个UIView ，我想有一个径向渐变，我想知道如何去做这个？

Answer 1

要做到这一点，你需要下拉到核心graphics和使用CGContextDrawRadialGradient 。

类似的堆栈溢出问题

我如何绘制径向渐变（iphone）的一个部门

如何用Core Graphics / iPhone绘制渐变线（淡入/淡出）？

其他资源

有一个教程显示如何在iOS上使用渐变绘制图标：

http://redartisan.com/2011/05/13/porting-iconapp-core-graphics

他把代码放在Github上，用一个UIView子类来完成，它显示了使用Core Graphics制作渐变的（相当长的）方式：

https://github.com/crafterm/IconApp/blob/master/IconApp/IconView.m

Answer 2

第一个子类UIView：

 @implementation UIRadialView - (void)drawRect:(CGRect)rect { // Setup view CGFloat colorComponents[] = {0.0, 0.0, 0.0, 1.0, // First color: R, G, B, ALPHA (currently opaque black) 0.0, 0.0, 0.0, 0.0}; // Second color: R, G, B, ALPHA (currently transparent black) CGFloat locations[] = {0, 1}; // {0, 1) -> from center to outer edges, {1, 0} -> from outer edges to center CGFloat radius = MIN((self.bounds.size.height / 2), (self.bounds.size.width / 2)); CGPoint center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2); // Prepare a context and create a color space CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); // Create gradient object from our color space, color components and locations CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colorComponents, locations, 2); // Draw a gradient CGContextDrawRadialGradient(context, gradient, center, 0.0, center, radius, 0); CGContextRestoreGState(context); // Release objects CGColorSpaceRelease(colorSpace); CGGradientRelease(gradient); } @end 

然后将其添加到您的视图：

 UIRadialView *radialView = [[UIRadialView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)]; radialView.backgroundColor = [UIColor redColor]; [self.view addSubview:radialView]; 

结果：

Answer 3

Swift 3 – @IBDesignable

我解决了Karlis和Alexander的答案。 我的目的是尽可能地简化。 如删除色彩空间和位置（ nil ），所以渐变使用默认值。

如何使用

步骤1

创build文件并添加以下代码：import UIKit

 @IBDesignable class RadialGradientView: UIView { @IBInspectable var InsideColor: UIColor = UIColor.clear @IBInspectable var OutsideColor: UIColor = UIColor.clear override func draw(_ rect: CGRect) { let colors = [InsideColor.cgColor, OutsideColor.cgColor] as CFArray let endRadius = min(frame.width, frame.height) / 2 let center = CGPoint(x: bounds.size.width / 2, y: bounds.size.height / 2) let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil) UIGraphicsGetCurrentContext()!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: endRadius, options: CGGradientDrawingOptions.drawsBeforeStartLocation) } } 

第2步

在Storyboard上，在Identity Inspector中将UIView设置为上面的RadialGradientView ：

第3步

在“属性”检查器中为渐变设置“内部颜色”和“外部颜色”，然后在“故事板”上看到更改：

（注意：我把Storyboard上的UIView大到足以填满整个页面

Answer 4

这是卡尔斯在斯威夫特3的回答：

 override func draw(_ rect: CGRect) { // Setup view let colors = [UIColor.white.cgColor, UIColor.black.cgColor] as CFArray let locations = [ 0.0, 1.0 ] as [CGFloat] let radius = min((self.bounds.size.height / 2), (self.bounds.size.width / 2)) let center = CGPoint.init(x: self.bounds.size.width / 2, y: self.bounds.size.height / 2) // Prepare a context and create a color space let context = UIGraphicsGetCurrentContext() context!.saveGState() let colorSpace = CGColorSpaceCreateDeviceRGB() // Create gradient object from our color space, color components and locations let gradient = CGGradient.init(colorsSpace: colorSpace, colors: colors, locations: locations) // Draw a gradient context!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0)) context?.restoreGState() } 

Answer 5

这里是Karlis在C＃中对Xamarin.iOS的回答。 在这里，我直接指定颜色，但是您当然可以像Karlis那样执行。

 public class RadialView : UIView { public RadialView(CGRect rect) : base (rect) { this.BackgroundColor = UIColor.DarkGray; } public override void Draw(CGRect rect) { CGColor[] colorComponents = { UIColor.DarkGray.CGColor, UIColor.LightGray.CGColor }; var locations = new nfloat[]{ 1, 0 }; var radius = this.Bounds.Size.Height / 2; CGPoint center = new CGPoint(this.Bounds.Size.Width / 2, this.Bounds.Size.Height / 2); var context = UIGraphics.GetCurrentContext(); context.SaveState(); var colorSpace = CGColorSpace.CreateDeviceRGB(); CGGradient gradient = new CGGradient(colorSpace, colorComponents, locations); context.DrawRadialGradient(gradient, center, 0, center, radius, CGGradientDrawingOptions.None); context.RestoreState(); colorSpace.Dispose(); gradient.Dispose(); } }