iOS之view的背景绘制渐变色、文字渐变

最新推荐文章于 2024-07-03 17:27:53 发布
最新推荐文章于 2024-07-03 17:27:53 发布
阅读量5k 收藏 2
点赞数
分类专栏： iOS/oc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011146511/article/details/78048749
版权

参考：http://www.jianshu.com/p/3e0e25fd9b85

CAGradientLayer类

CAGradientLayer类在苹果API文档中其说明为:CAGradientLayer类对其绘制渐变背景颜色、填充层的形状(包括圆角).
其继承关系图如下:


DEB0F788-271F-40BB-9D67-43CD63876376.png

CAGradientLayer继承CAlayer,设置其属性都会有GPU绘制运算

用到的属性有:

  1. colors 渐变的颜色
  2. locations 颜色变化位置的取值范围
  3. startPoint 颜色渐变的起始位置:取值范围在(0,0)~(1,1)之间
  4. endPoint 颜色渐变的终点位置,取值范围也是在(0,0)~(1,1)之间
    补充下:startPoint & endPoint设置为(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变

-(void)graint{

    CAGradientLayer *layer=[CAGradientLayerlayer];

    layer.frame=self.creditCardNolabl.frame;

    [layer setColors:@[(id)[UIColorredColor].CGColor, (id)[UIColorblueColor].CGColor]];

    [self.creditCardNolabl.layeraddSublayer:layer];

    //颜色上下渐变

    [layer setStartPoint:CGPointMake(0, 0)];

    [layer setEndPoint:CGPointMake(0, 1)];


}



 //为透明度设置渐变效果

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];

    UIColor *colorOne = [UIColor colorWithRed:(216/255.0)  green:(0/255.0)  blue:(18/255.0)  alpha:1.0];

    UIColor *colorTwo = [UIColor colorWithRed:(216/255.0)  green:(0/255.0)  blue:(18/255.0)  alpha:0.0];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];

    CAGradientLayer *gradient = [CAGradientLayer layer];

    view.layer.masksToBounds = YES;

    //设置开始和结束位置(设置渐变的方向)

    gradient.startPoint = CGPointMake(0, 0);

    gradient.endPoint = CGPointMake(1, 0);

    gradient.colors = colors;

    gradient.frame = CGRectMake(0, 0, 40, 40);

    [view.layerinsertSublayer:gradientatIndex:0];

    [self.view addSubview:view];


=====

-(UIImage *)drawcont{

    UIGraphicsBeginImageContext(self.creditCardNolabl.frame.size);

 CGContextRef context =UIGraphicsGetCurrentContext();

    

    CGContextClip(context);

    CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();

    CGFloat colors[] =

    {

        204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,

        29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00,

        0.0 / 255.0,  50.0 / 255.0, 126.0 / 255.0, 1.00,

    };

    CGGradientRef gradient =CGGradientCreateWithColorComponents

    (rgb, colors, NULL,sizeof(colors)/(sizeof(colors[0])*4));

    CGColorSpaceRelease(rgb);

    CGContextDrawLinearGradient(context, gradient,CGPointMake

                                (0.0,0.0) ,CGPointMake(0.0,self.frame.size.height),

                                kCGGradientDrawsBeforeStartLocation);

    UIImage *theImage =UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return theImage;

}
===========

1-> 线性渐变


- (void)drawLinearGradient:(CGContextRef)context

path:(CGPathRef)path

startColor:(CGColorRef)startColor

                  endColor:(CGColorRef)endColor View:(UIView *)v

    {

        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

        CGFloat locations[] = { 0.0,1.0 };//这个是两种颜色的位置

        //        CGFloat locations[] = { 0.0, 0.5,1.0 };//这个是三种颜色的位置

        

        //      NSArray *colors = @[(__bridge id)startColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)endColor];//渐变颜色的种类，要和上边的locations对应；


         NSArray *colors = @[(__bridge id)startColor,(__bridge id)endColor];

        

        CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);

        

        

//        CGRect pathRect = CGPathGetBoundingBox(path);

        

        //具体方向可根据需求修改

//        CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMinY(pathRect));

//        CGPoint endPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMaxY(pathRect));

        CGPoint startPoint = CGPointMake(20,v.frame.size.height);

        CGPoint endPoint = CGPointMake(20,0);

        CGContextSaveGState(context);

        CGContextAddPath(context, path);

        CGContextClip(context);

        CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

        CGContextRestoreGState(context);

        

        CGGradientRelease(gradient);

        CGColorSpaceRelease(colorSpace);

    }

    

   


-(UIImage *)getImageWithView:(UIView *)v{


    //创建CGContextRef

    UIGraphicsBeginImageContext(self.bounds.size);

    CGContextRef gc = UIGraphicsGetCurrentContext();

    

    //创建CGMutablePathRef

    CGMutablePathRef path = CGPathCreateMutable();

    

    //绘制Path

    CGPathMoveToPoint(path, NULL, 0,0);

    CGPathAddLineToPoint(path, NULL, v.bounds.size.width,0);

    CGPathAddLineToPoint(path, NULL, v.bounds.size.width,v.bounds.size.height);

    CGPathAddLineToPoint(path, NULL, 0,v.bounds.size.height);

    CGPathCloseSubpath(path);

    

    //绘制渐变

    UIColor *starColor=[UIColor colorWithRed:127.0/255 green:175.0/255 blue:174.0/255 alpha:1.0];

    UIColor *endColor=[UIColor colorWithRed:204.0/255 green:233.0/255 blue:233.0/255 alpha:1.0];

    [self drawLinearGradient:gc path:path startColor:starColor.CGColor endColor:endColor.CGColor View:v];

    

    //注意释放CGMutablePathRef

    CGPathRelease(path);

    

    //从Context中获取图像，并显示在界面上

    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return img;

}


2-> 圆半径方向渐变


- (void)drawRadialGradient:(CGContextRef)context

path:(CGPathRef)path

startColor:(CGColorRef)startColor

endColor:(CGColorRef)endColor

{

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    CGFloat locations[] = { 0.0, 1.0 };

    

    NSArray *colors = @[(__bridgeid) startColor, (__bridgeid) endColor];

    

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);

    

    

    CGRect pathRect = CGPathGetBoundingBox(path);

    CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));

    CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);

    

    CGContextSaveGState(context);

    CGContextAddPath(context, path);

    CGContextEOClip(context);

    

    CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, 0);

    

    CGContextRestoreGState(context);

    

    CGGradientRelease(gradient);

    CGColorSpaceRelease(colorSpace);

}


- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view.

    

    //创建CGContextRef

    UIGraphicsBeginImageContext(self.view.bounds.size);

    CGContextRef gc = UIGraphicsGetCurrentContext();

    

    //创建CGMutablePathRef

    CGMutablePathRef path = CGPathCreateMutable();

    

    //绘制Path

    CGRect rect = CGRectMake(0, 100, 300, 200);

    CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));

    CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));

    CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMinY(rect));

    CGPathCloseSubpath(path);

    

    //绘制渐变

    [self drawRadialGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];

    

    //注意释放CGMutablePathRef

    CGPathRelease(path);

    

    //从Context中获取图像，并显示在界面上

    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    

    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];

    [self.view addSubview:imgView];

}


3. 以CAShapeLayer作为layer的mask属性


CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)的部分；CAShapeLayer为CALayer的子类，通过path属性可以生成不同的形状，将CAShapeLayer对象用作layer的mask属性的话，就可以生成不同形状的图层。故生成颜色渐变有以下几个步骤：


生成一个imageView(也可以为layer)，image的属性为颜色渐变的图片

生成一个CAShapeLayer对象，根据path属性指定所需的形状

将CAShapeLayer对象赋值给imageView的mask属性

- (void)viewDidLoad

{

    [super viewDidLoad];

    

    [self.view addSubview:self.firstCircle];

    _firstCircle.frame = CGRectMake(0, 0, 200, 200);

    _firstCircle.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);

    CGFloat firsCircleWidth = 5;

    self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth:firsCircleWidth];

    _firstCircleShapeLayer.path = [self generateBezierPathWithCenter:CGPointMake(100, 100) radius:100].CGPath;

    _firstCircle.layer.mask = _firstCircleShapeLayer;

}


- (CAShapeLayer *)generateShapeLayerWithLineWidth:(CGFloat)lineWidth

{

    CAShapeLayer *waveline = [CAShapeLayer layer];

    waveline.lineCap = kCALineCapButt;

    waveline.lineJoin = kCALineJoinRound;

    waveline.strokeColor = [UIColor redColor].CGColor;

    waveline.fillColor = [[UIColor clearColor] CGColor];

    waveline.lineWidth = lineWidth;

    waveline.backgroundColor = [UIColor clearColor].CGColor;

    

    return waveline;

}


- (UIBezierPath *)generateBezierPathWithCenter:(CGPoint)center radius:(CGFloat)radius

{

    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];

    

    return circlePath;

}


- (UIImageView *)firstCircle

{

    if (!_firstCircle) {

        self.firstCircle = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];

        _firstCircle.layer.masksToBounds = YES;

        _firstCircle.alpha = 1.0;

    }

    

    return _firstCircle;

}



=========CGPATH===

//创建CGContextRef
    UIGraphicsBeginImageContext(self.view.bounds.size);
    CGContextRef gc = UIGraphicsGetCurrentContext();
    
    //=== 绘画逻辑 ===
    //创建用于转移坐标的Transform，这样我们不用按照实际显示做坐标计算
    CGAffineTransform transform = CGAffineTransformMakeTranslation(50, 50);
    //创建CGMutablePathRef
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, &transform, 50, 50, 50, 0, 1.5 * M_PI, NO);
    CGPathMoveToPoint(path, &transform, 50, 0);
    CGPathAddLineToPoint(path, &transform, 50, 50);
    CGPathAddLineToPoint(path, &transform, 100, 50);
    
    //将CGMutablePathRef添加到当前Context内
    CGContextAddPath(gc, path);
    [[UIColor grayColor] setFill];
    [[UIColor blueColor] setStroke];
    CGContextSetLineWidth(gc, 2);
    //执行绘画
    CGContextDrawPath(gc, kCGPathFillStroke);
    
    //从Context中获取图像，并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
    [self.view addSubview:imgView];

======文字渐变

方法一：设置一张带有渐变的图片，

  UIColor *color=[UIColorcolorWithPatternImage:[UIImageimageNamed:@"带渐变色的图片"]];

方法二：


liyubao160
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS小技能： 创建渐变色背景（提供渐变色无法覆盖整个视图的解决方案）
iOS逆向与安全
02-17 1万+
前言 效果 code 创建渐变色背景图片 //#define QCT_DetailOrder_start_COLOR rgb(236,90,85) //#define QCT_DetailOrder_end_COLOR rgb(214,50,44) + (UIImage*)getDetailOrderStateMaingradientColorImage{ CGSize size = ...
iOS 实现背景颜色渐变的方式
奋斗吧，少年！
01-05 8748
iOS里面的背景颜色实现渐变的方式有两种，第一种就是给一个渐变的图片做背景，当然这样有很大的局限性，比如我现在就需要根据项目需求要动态的改变渐变背景色。 这样首先想到quartz 2D 这里的知识进行绘图，我根据需要在自定义视图里面的drawRect方法进行绘制。 - (void)drawRect:(CGRect)rect { /** * 1.通过CAGr
iOS实现UIView渐变的几种方法以及实现渐变透明功能
大飞哥的专栏
11-04 1万+
我们经常需要把UIView的背景色设置为渐变色，虽然找一张渐变的背景图很方便，但是图片是要占用资源的，所以我们最好使用代码来实现效果。 1. CAGradientLayer实现渐变 CAGradientLayer是CALayer的一个特殊子类，用于生成颜色渐变的图层，使用较为方便，下面介绍下它的相关属性： colors    渐变的颜色 locati
iOS学习-实现view的渐变色
qq_43441647的博客
02-21 609
iOS学习-实现view的渐变色
iOS UIView设置背景渐变色
vkooy的博客
11-10 828
drawRect函数主要负责iOS的绘图操作，程序会自动调用此方法进行绘图。我在这个函数中绘制渐变背景色。方法定义：重写此方法，执行重绘任务标记为需要重绘，异步调用drawRect标记为需要局部重绘调用机制：系统自动调用，在Controller->viewDidLoad之后。但是如果在UIView初始化时没有设置rect大小，将直接导致drawRect不被自动调用。
ios绘制渐变色图片
BianHuanShiZhe的专栏
05-17 575
@param gradientType 渐变的方式：0:水平渐变 1:竖直渐变 2:向下对角线渐变 3:向上对角线渐变。* @param bounds UIImage的bounds。* @param colors 渐变色数组，可以设置两种颜色。* @return 渐变色的UIImage。* 绘制渐变色的矩形UIImage。
iOS 渐变色的圆绘制
jiabinzhang4310的专栏
01-12 3005
我们会经常看到渐变色的圆形加载条，类似于下面这种，这种效果是怎么实现的呢？下面我带大家一步一步实现这种效果。![渐变色圆形加载效果图](http://img.blog.csdn.net/20160112181710780) 提到渐变色，我们脑海中首先想到的就是利用CAGradientLayer来实现，可是CAGradientLayer只能实现线性渐变，指定一个startPoint和endPoint，
iOS中利用CAGradientLayer绘制渐变色的方法实例
08-28
本文将详细介绍如何使用CAGradientLayer来绘制渐变色，并提供详细的实例代码。 CAGradientLayer是Core Animation框架中的一个类，它是CALayer的子类，专门用于创建和管理颜色渐变效果。在iOS中，我们可以使用...
iOS Label实现文字渐变色效果
08-30
在自定义的`UILabel`子类中，我们可以使用`CGContext`绘制渐变色背景，然后在上面绘制文字： ```swift // 自定义UILabel子类 @interface CFGradientLabel : UILabel @end @implementation CFGradientLabel - ...
iOS文字渐变色效果的实现方法
09-01
在iOS应用开发中，有时我们需要实现一些特殊效果来提升用户体验，比如文字渐变色效果。本文将详细介绍如何在iOS中实现这一效果，主要涉及到Core Animation框架中的CAGradientLayer和UILabel的结合使用。 首先，我们...
iOS实现UIView渐变效果
01-03
已封装好的实现渐变的UIView，只需传入渐变开始值和结束值就可直接使用。有四种渐变方向可选
iOS 渐变色 CAGrantLayer
05-08
在本篇中，我们将深入探讨如何使用`CAGradientLayer`来实现渐变色效果。 首先，我们来理解一下什么是`CAGradientLayer`。`CAGradientLayer`是`CALayer`的一个子类，专门用于绘制渐变颜色。与常规的`UIView`不同，`...
Android背景渐变色(shape,gradient)
菜鸟
08-23 1630
Android设置背景色可以通过在res/drawable里定义一个xml,如下： [代码]xml代码： 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> ...
iOS实现渐变背景色的三种方法
热门推荐
子虚
08-03 3万+
In some particular circumstances, we want to use a gradient background view. As far as my knowledge can reach, there are three different ways to implement a gradient background: CAGradientLayer, CGGra
iOS一个方法搞定view渐变色
<sdffdsfsdfdfs>sfsfsfsdfsdffds</sdfsDS>Fsd
08-28 417
点击上方“程序员大咖”，选择“置顶公众号”关键时刻，第一时间送达！作者：水暮竹妖链接：https://www.jianshu.com/p/e7c9e94e165b程序员大...
IOS 实现View背景渐变
HiroGuo 的博客
03-12 2500
在某些特定情况下，我们希望使用渐变背景视图。这里总结，实现渐变背景有三种不同的方法:CAGradientLayer、CGGradient和CoreImage。 要定义渐变颜色，我们至少有四个属性: @property (nonatomic) CGPoint inputPoint0; @property (nonatomic) CGPoint inputPoint1; @p...
IOS 类似直播的tableView 顶部透明度渐变效果
一名开发者
07-07 1992
IOS 类似直播的tableView 顶部透明度渐变效果
iOS 视图实现渐变色背景
最新发布
我的的博客
07-03 874
在 iOS 中，如果设置视图单一的背景色，是很简单的。注意这里的坐标：[0, 0] 代表的是图层的左上角，[1, 1] 代表的算是右下角。苹果的代码文档中说的是错误的，注释中的是 macOS 的坐标系统，stackoverflow 上的相关问题。locations 中的每一个值，指定的是在渐变方向上每一个渐变停止的位置。绿色是从左上角 (0, 0) 开始渐变，红色是截止到 (0.5, 0.5) 不再渐变，右下部分的红色都是纯红色的。目的是要实现视图的自定义的渐变背景色，实现一个能够随时使用的工具。
swift 实现聊天列表消息渐变消失
weixin_43883776的博客
11-12 2495
先上效果图 通常情况下 聊天列表是 tableview 的实现， 利用 gradienLayer 实现渐变效果。但是我们通常不直接把 gradienLayer 加在tableView ,因为那样，gradienLayer 会直接加在tableview 上且会随着滚动，而不是吸顶的。 代码 func generateTextMaskForChat() { var gradienLayer = CAGradientLayer.init() gradienLayer.st
ios按钮背景渐变色OC代码实现
08-19
可以使用以下代码来实现 iOS 按钮的背景渐变色：CAGradientLayer *gradient = [CAGradientLayer layer]; gradient.frame = self.btn.bounds; gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值