iOS中利用CAGradientLayer绘制渐变色的方法实例

前言

以前不用自己切图,现在要自己切图,看到设计稿有好多不同规格的渐变色的背景,一个一个切的话好麻烦,没有想到iOS本来就可以实现渐变色。也就是今天的主角CAGradientLayer。

渐变色使用的类是CAGradientLayer,有两个要素,渐变颜色的起点和终点、渐变的颜色集合

简单示例:

//设置渐变颜色
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = view.bounds;
[gradientLayer setColors:[NSArray arrayWithObjects:(id)[RGB(139, 48, 164) CGColor],(id)[RGB(61, 189, 255) CGColor],(id)[RGB(37, 182, 82) CGColor], nil nil]];
[view.layer addSublayer:gradientLayer]; 

效果如下图左:

原理详解

1、CAGradientLayer是CALayer图层类的子类,用于处理渐变色的层结构。

2、CAGradientLayer的坐标系统是从坐标(0,0)到(1,1)绘制的矩形。

3、CAGradientLayer的frame值的size不为正方形的话,坐标系统会被拉伸。

4、CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向。

5、CAGradientLayer的颜色分割点是以0~1的比例来计算的,颜色分割点为渐变色开始或终止的地方。

CAGradientLayer属性介绍

  • colors:渐变颜色数组
  • locations:渐变颜色的区间分布(分割点),locations的数组长度和colors一致。这个属性可不设,默认是nil,系统会平均分布颜色如果有特定需要可设置,数组设置为0 ~ 1之间单调递增。
  • startPoint:映射locations中起始位置,用单位向量表示。比如(0, 0)表示从左上角开始变化。默认值是:(0.5, 0.0)。
  • endPoint:映射locations中结束位置,用单位向量表示。比如(1, 1)表示到右下角变化结束。默认值是:(0.5, 1.0)。
  • type:默认值是kCAGradientLayerAxial,表示按像素均匀变化。

CAGradientLayer例子

最简单的三原色渐变例子

效果展示

代码示例

 UIView * myView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
 [self.view addSubview:myView];

 CAGradientLayer * gradientLayer = [CAGradientLayer layer];
 gradientLayer.frame = myView.bounds;
// 设置渐变颜色数组
 gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor];
// 渐变颜色的区间分布
 gradientLayer.locations = @[@0.25,@0.5,@0.75];
// 起始位置
 gradientLayer.startPoint = CGPointMake(0, 0);
// 结束位置
 gradientLayer.endPoint = CGPointMake(0, 1);
 [myView.layer addSublayer:gradientLayer];

当然,实际使用的肯定比这个颜值高很多的,效果展示:

代码如下:

#define FHCColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

 UIView * myView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
 [self.view addSubview:myView];

 CAGradientLayer * gradientLayer = [CAGradientLayer layer];
 gradientLayer.frame = myView.bounds;
 gradientLayer = [CAGradientLayer layer];
 gradientLayer.colors = @[(__bridge id)FHCColorFromRGB(0x01b6ff).CGColor, (__bridge id)FHCColorFromRGB(0x4392f6).CGColor];
 gradientLayer.locations = @[@0.1, @1.0];
 gradientLayer.startPoint = CGPointMake(0, 0);
 gradientLayer.endPoint = CGPointMake(1.0, 0);
 [myView.layer addSublayer:gradientLayer];

是不是美美哒?当然你可以把它封装成一个类别,以便下次使用.

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer

    iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer shape.gif demo.png - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. CALayer *layer = [CALayer layer]; layer.backgroundColor = [UIColor redColor

  • iOS Label实现文字渐变色效果

    前言 前一段时间公司有需求做文字的的渐变色,自己当时也是网上看了一些,自己写了两个方法,实现了需求,写了很久了,只是现在才想起来,就当继续学习了.分享出来供大家参考学习,下面来看看详细的介绍: 先看看简单的: - (void)addGradientRampWithColors:(NSArray *)colors text:(NSString *)text { //label在父视图上的(x,y)的值不是中心点 CGPoint point = CGPointMake(30, 500); UILab

  • iOS文字渐变色效果的实现方法

    照例先上文字渐变的效果图 实现思路如下 一.创建一个颜色渐变层,渐变图层跟文字控件一样大. 二.用文字图层裁剪渐变层,只保留文字部分,就会让渐变层只保留有文字的部分,相当于间接让渐变层显示文字,我们看到的其实是被裁剪过后,渐变层的部分内容. 注意:如果用文字图层裁剪渐变层,文字图层就不在拥有显示功能,这个图层就被弄来裁剪了,不会显示,在下面代码中也会有说明. 2.1 创建一个带有文字的label,label能显示文字. 2.2 设置渐变图层的mask为label图层,就能用文字裁剪渐变图层了.

  • iOS中Navbar设置渐变色效果的方法示例

    本文主要给大家介绍了关于iOS中Navbar设置渐变色效果的相关内容,分享出来供大家参考学习,下面来看看详细的介绍吧. 设置渐变色 #import "NavigationViewController.h" #define LBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0] @interface NavigationViewController () @end

  • iOS中利用CAGradientLayer绘制渐变色的方法实例

    前言 以前不用自己切图,现在要自己切图,看到设计稿有好多不同规格的渐变色的背景,一个一个切的话好麻烦,没有想到iOS本来就可以实现渐变色.也就是今天的主角CAGradientLayer. 渐变色使用的类是CAGradientLayer,有两个要素,渐变颜色的起点和终点.渐变的颜色集合 简单示例: //设置渐变颜色 CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = view.bounds;

  • iOS中读写锁的简单实现方法实例

    目录 废话开篇 思考一.对于锁的类型的理解 思考二.读写锁的实现逻辑 思考三.简单封装读写锁,满足读写逻辑 总结 废话开篇 iOS 下的多线程的技术的应用衍生出了锁的机制,试想,如果 iOS 下没有多线程的概念,所有的代码都会在同步环境下执行,那么,也就不会产生争夺资源情况的发生,当然,也就没有办法利用多核的优势.所以,多线程的应用是广布的,而锁的应用是局部的,所以,二者应相辅相成,来达到提高运行效率的同时提高程序运行的稳定性. 思考一.对于锁的类型的理解 基本的三种锁的类型:互斥锁.自旋锁.读

  • iOS中利用CoreAnimation实现一个时间的进度条效果

    在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha

  • iOS中利用inputView 弹出 picker

    推荐一个Button 弹起PickerView的源码,也可以作为工具类使用. 利用inputView 做键盘弹起动画.该如何做呢? 1.继承UIView 2.重写属性&方法 @property (readwrite) UIView *inputView; @property (readwrite) UIView *inputAccessoryView; - (BOOL)isUserInteractionEnabled { return YES; } - (BOOL)canBecomeFirstR

  • Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

  • iOS中常见的几种加密方法总结

    前言 在我们日常开发中,加密是必不可少的一部分,而普通加密方法是讲密码进行加密后保存到用户偏好设置中,钥匙串是以明文形式保存,但是不知道存放的具体位置,下面本文将详细给大家介绍iOS中常见的几种加密方法,下面话不多说了,来一起看看详细的介绍吧. 一. base64加密 base64 编码是现代密码学的基础 基本原理: 原本是 8个bit 一组表示数据,改为 6个bit一组表示数据,不足的部分补零,每 两个0 用 一个 = 表示 用base64 编码之后,数据长度会变大,增加了大约 1/3 左右.

  • SQL Server中利用正则表达式替换字符串的方法

    建立正则替换函数,利用了OLE对象,以下是函数代码: --如果存在则删除原有函数 IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL DROP FUNCTION dbo.RegexReplace GO --开始创建正则替换函数 CREATE FUNCTION dbo.RegexReplace ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 @replacestr VARCHAR

  • 移动端页面在ios中不显示图片的解决方法

    在移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是在浏览器中和android中都显示正常,可是一到ios中图片就不显示了,这个时候就需要注意了,可能是图片的格式问题导致ios中不认识,比如我从网上下载的图片保存到电脑中不能预览的图片就是这种. 在计算机中打开预览图片显示如下: 这样的图片在ios中就不显示,解决办法很简单,就是在下载的时候去掉后面的类型就可以了, 以上这篇移动端页面在ios中不显示图片的解决方法就是小编分享给大家的全部内容了,希望能给

  • Python实现在tkinter中使用matplotlib绘制图形的方法示例

    本文实例讲述了Python实现在tkinter中使用matplotlib绘制图形的方法.分享给大家供大家参考,具体如下: 一. 代码: # coding=utf-8 import sys import Tkinter as Tk import matplotlib from numpy import arange, sin, pi from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg,NavigationToolbar2T

  • 在iOS中给视频添加滤镜的方法示例

    「众所周知,视频可以 P」,今天我们来学习怎么给视频添加滤镜. 在 iOS 中,对视频进行图像处理一般有两种方式: GPUImage 和 AVFoundation . 一.GPUImage 在之前的文章中,我们对 GPUImage 已经有了一定的了解.之前一般使用它对摄像头采集的图像数据进行处理,然而,它对本地视频的处理也一样方便. 直接看代码: // movie NSString *path = [[NSBundle mainBundle] pathForResource:@"sample&q

随机推荐