我们经常会在UIView添加渐变的背景色。虽然找一张渐变颜色的背景图很方便,但是图片是要占用资源的,同时文件也会变大。所以,我们完全可以使用代码来实现效果。

下面是使用代码来写渐变色的方法。

1.使用CAGradientLayer实现渐变

CAGradientLayer是CALayer的一个特殊子类,用于生成颜色渐变的图层,使用较为方便,不过这里的颜色是添加到子图层的,再次添加渐变,会在图层上面添加,非替换。

下面介绍下它的相关属性:

1.colors 渐变的颜色

2.locations 渐变颜色的分割点

3.startPoint&endPoint 颜色渐变的方向,范围在(0,0)与(1.0,1.0)之间,如(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];//这里颜色渐变

gradientLayer.locations = @[@0.3, @0.5, @1.0];//颜色位置

gradientLayer.startPoint = CGPointMake(0, 0);

gradientLayer.endPoint = CGPointMake(1.0, 0);

gradientLayer.frame = CGRectMake(0, 100, 300, 100);渐变区域的大小,一般同view

[self.view.layer addSublayer:gradientLayer];

2.绘制UIimage渐变图实现渐变,这种方法的好处在于可以直接更换背景,而不是在子图层再添加一个。

const CGFloat location[] ={0,1};

const CGFloat components[] ={

0.0,0.0,0.0,0.6,

0.0,0.0,0.0,0.0

};

UIImage *backgroundImage = [self getGradientImageWithSize:self.nBarView.frame.size locations:location components:components count:2];

_view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];

//渐变

- (UIImage *)getGradientImageWithSize:(CGSize)size

locations:(const CGFloat[])locations

components:(const CGFloat[])components

count:(NSInteger)count

{

UIGraphicsBeginImageContextWithOptions(size, NO, 0);

CGContextRef context = UIGraphicsGetCurrentContext();

//创建色彩空间

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

/*指定渐变色

space:颜色空间

components:颜色数组,注意由于指定了RGB颜色空间,那么四个数组元素表示一个颜色(red、green、blue、alpha),

如果有三个颜色则这个数组有4*3个元素

locations:颜色所在位置(范围0~1),这个数组的个数不小于components中存放颜色的个数

count:渐变个数,等于locations的个数

*/

CGGradientRef colorGradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, count);

//释放颜色空间

CGColorSpaceRelease(colorSpace);

//这里调节渐变方向,此时的渐变是上到下

CGPoint startPoint = (CGPoint){size.width,0};

CGPoint endPoint = (CGPoint){size.width,size.height};

/*绘制线性渐变

context:图形上下文

gradient:渐变色

startPoint:起始位置

endPoint:终止位置

options:绘制方式,kCGGradientDrawsBeforeStartLocation 开始位置之前就进行绘制,到结束位置之后不再绘制,

kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制,到结束点之后继续填充

*/

CGContextDrawLinearGradient(context, colorGradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation);

CGGradientRelease(colorGradient);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return image;

}

border渐变 ios_iOS实现颜色渐变相关推荐

  1. css颜色渐变 移动,CSS颜色渐变

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  2. 在html中怎么写背景色渐变,CSS 实现背景色渐变和文字颜色渐变(示例代码)

    1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法: = linear-gradient([ [  | to  ] ,]? [, ]+) 下述值用来表示渐变的方向,可 ...

  3. html背景线性渐变,CSS3背景颜色渐变 - 线性/放射性/循环

    渐变就是多种颜色混合而成的效果,css3要实现渐变,就必须使用渐变函数来设置background或则background-imge属性.同时为了兼容各个浏览器(IE,safari,chrome,Fir ...

  4. html5 border边框颜色渐变,css边框颜色渐变

    在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 border渐变 button{ background:transparent; ...

  5. CSS3j背景渐变,字体颜色渐变,以及兼容IE写法

    一.背景渐变 #grad { background: linear-gradient(red, blue); } 渐变路径默认是从上到下,也可以指定路径: 从左到右 #grad { backgroun ...

  6. 设置边框颜色渐变及背景颜色渐变

    <div class="a">//边框由a实现 <div class="b">渐变背景</div> </div> ...

  7. php如何在添加div的背景颜色_css3颜色渐变:css3如何实现背景颜色渐变?

    为了开发网页的美观,css3背景颜色渐变是经常会用到的,那么,css3背景颜色渐变如何设置呢?本篇文章我们就来介绍关于css颜色渐变背景的设置方法. 我们要知道的是css3渐变有两种类型:css3线性 ...

  8. 计算机图形学——多边形填色(多边形颜色渐变填充)

    1.问题描述与算法思想 问题描述 多边形颜色渐变填充,设计实现多边形的填充类,设置顶点序列,调用填充函数.通过建立多边形的桶表和边表的数据,按照算法步骤依次扫描填充.调用设计实现的多边形填充类,对所绘 ...

  9. 【css 边线实现颜色渐变】

    边线实现颜色渐变 实现垂直颜色渐变 border-top:2px solid #ddd;border-image: -webkit-linear-gradient(#d2f50f, #f05108) ...

最新文章

  1. VTK:Filtering之VertexGlyphFilter
  2. .NET Core微服务之基于Ocelot实现API网关服务
  3. matlab中如何将视频保存成图像
  4. STM32工作笔记0032---编写跑马灯实验---寄存器版本
  5. Python程序设计学习笔记-概述
  6. 中兴恢复产能还需数周;前苹果工程师已获保释;iPhone再现爆炸门 | 极客头条...
  7. 在一切都是虚的世界里,你能做的是什么?
  8. 大数据在企业中起到什么作用
  9. JavaScript生成树形菜单(递归算法)
  10. 采用dlopen、dlsym、dlclose加载动态链接库【转】
  11. 好用的 edge 插件有哪些?
  12. 敏捷转型中的敏态与稳态
  13. Proxifier全局代理软件,其提供了跨平台的端口转发和代理功能
  14. 浅谈激光导航对机器人自主行走的重要性
  15. python3输入列表_[Python3] 列表的基本用法[TZZ]
  16. 华为电脑安装双系统linux,华为MateBook笔记本安装Win10与Ubuntu双系统
  17. 无言以队Alpha阶段项目复审
  18. MYSQL不能远程连接
  19. 动词ing基本用法_动词ing形式的用法
  20. 沟通管理--关于信息的有效传递和维护

热门文章

  1. Python 基于sicpy求解定积分 ,不定积分以及多重积分
  2. rk3288 MINILOADERALL生成
  3. cortex M7 MPU 总结
  4. 报表解决方案Telerik Reporting发布R2 2019 SP1|支持MS Access
  5. chapter3 动态分析基础技术-01在线沙箱 微步云沙箱
  6. 基于SmartThreadPool线程池技术实现多任务批量处理
  7. 坑爹大冒险html5游戏在线玩,《史上最坑爹的大冒险》 图文全通关攻略
  8. Auto-Rooting Script(全自动提权脚本)
  9. 大数据系列(一)之hadoop介绍及集群搭建
  10. 网易_在数组中查找前K个元素