iOS 渐变色

最新推荐文章于 2024-09-27 08:31:54 发布

xxdzyyh

最新推荐文章于 2024-09-27 08:31:54 发布

阅读量2.7k

点赞数

分类专栏： ios 文章标签： ios 渐变色

本文链接：https://blog.youkuaiyun.com/u011367651/article/details/46970715

版权

ios 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在iOS中如何利用CAGradientLayer创建渐变色效果，探讨了不能直接在imageView上用CAGradientLayer作为图片背景的问题，并提出通过colorWithPatternImage方法结合渐变色实现背景的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以直接使用CAGradientLayer来实现渐变色。（android有各种drawable，iOS有各种layer。）

CAGradientLayer * layer = [CAGradientLayer layer];
layer.frame = self.bounds;
UIColor * startColor = [UIColor clearColor];
UIColor * endColor = [UIColor redColor];
layer.colors = [NSArray arrayWithObjects:(id)startColor.CGColor, (id)endColor.CGColor,nil];
[self.layer addSublayer:layer];

不过，对于系统已定义的控件，如UIImageView,image是画在imageView.layer，而新的layer必定是加在原layer的上面。

所以，想在imageView上面直接使用CAGradientLayer作为图片背景，是不可能实现的。

系统为UIColor提供了一个方法，colorWithPatternImage。结合这个方法，我们可以玩出一些花样。下面的代码直接从Chameleon这个类库中复制的。

+ (UIColor *)colorWithGradientStyle:(UIGradientStyle)gradientStyle withFrame:(CGRect)frame andColors:(NSArray *)colors; {
    
    //Create our background gradient layer
    CAGradientLayer *backgroundGradientLayer = [CAGradientLayer layer];
    
    //Set the frame to our object's bounds
    backgroundGradientLayer.frame = frame;
    
    //To simplfy formatting, we'll iterate through our colors array and create a mutable array with their CG counterparts
    NSMutableArray *cgColors = [[NSMutableArray alloc] init];
    for (UIColor *color in colors) {
        [cgColors addObject:(id)[color CGColor]];
    }
    
    switch (gradientStyle) {
        case UIGradientStyleLeftToRight: {
            
            //Set out gradient's colors
            backgroundGradientLayer.colors = cgColors;
            
            //Specify the direction our gradient will take
            [backgroundGradientLayer setStartPoint:CGPointMake(0.0, 0.5)];
            [backgroundGradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
            
            //Convert our CALayer to a UIImage object
            UIGraphicsBeginImageContextWithOptions(backgroundGradientLayer.bounds.size,NO, [UIScreen mainScreen].scale);
            [backgroundGradientLayer renderInContext:UIGraphicsGetCurrentContext()];
            UIImage *backgroundColorImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
        
            [self setGradientImage:backgroundColorImage];
            return [UIColor colorWithPatternImage:backgroundColorImage];
        }
            
        case UIGradientStyleRadial: {
            UIGraphicsBeginImageContextWithOptions(frame.size,NO, [UIScreen mainScreen].scale);
            
            //Specific the spread of the gradient (For now this gradient only takes 2 locations)
            CGFloat locations[2] = {0.0, 1.0};

            //Default to the RGB Colorspace
            CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
            CFArrayRef arrayRef = (__bridge CFArrayRef)cgColors;
            
            //Create our Fradient
            CGGradientRef myGradient = CGGradientCreateWithColors(myColorspace, arrayRef, locations);
            
 
            // Normalise the 0-1 ranged inputs to the width of the image
            CGPoint myCentrePoint = CGPointMake(0.5 * frame.size.width, 0.5 * frame.size.height);
            float myRadius = MIN(frame.size.width, frame.size.height) * 1.0;
            
            // Draw our Gradient
            CGContextDrawRadialGradient (UIGraphicsGetCurrentContext(), myGradient, myCentrePoint,
                                         0, myCentrePoint, myRadius,
                                         kCGGradientDrawsAfterEndLocation);
            
            // Grab it as an Image
            UIImage *backgroundColorImage = UIGraphicsGetImageFromCurrentImageContext();
            
            // Clean up
            CGColorSpaceRelease(myColorspace); // Necessary?
            CGGradientRelease(myGradient); // Necessary?
            UIGraphicsEndImageContext();
            
            [self setGradientImage:backgroundColorImage];
            return [UIColor colorWithPatternImage:backgroundColorImage];
        }
            
        case UIGradientStyleTopToBottom:
        default: {
            
            //Set out gradient's colors
            backgroundGradientLayer.colors = cgColors;
            
            //Convert our CALayer to a UIImage object
            UIGraphicsBeginImageContextWithOptions(backgroundGradientLayer.bounds.size,NO, [UIScreen mainScreen].scale);
            [backgroundGradientLayer renderInContext:UIGraphicsGetCurrentContext()];
            UIImage *backgroundColorImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
            
            [self setGradientImage:backgroundColorImage];
            return [UIColor colorWithPatternImage:backgroundColorImage];
        }
            
    }
}

非常好用的一个UIColor的库。

有了以上的方法，我们可以很方便的为任何的view设置一个渐变色作为背景颜色。