iOS给border设置渐变色的方法实例

前言

本文将从4行代码出发给一个view设置渐变色,分别会谈到几个重要的渐变色相关属性,在使用过程中有几个需要特别关注的点。

给一个view的border设置渐变色是比较高阶的用法,希望本文可以在这个方面帮助到你。

给view设置渐变色

通过4行代码就可以给一个view设置渐变色:

let view = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
// @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor]
gradientLayer.colors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
view.layer.addSublayer(gradientLayer)

在创建CAGradientLayer以后需要设置frame才能展示出来,否则它的大小会使用默认的0。

渐变色会根据colors数组来展示,这个数组的类型是CGColorRef,所以需要用.cgColor强制转换;如果使用的OC语法,必须加上(__bridge id),否则渐变色会显示不出来。

默认情况下渐变会从上至下,可是通过设置startPoint和endPoint来改变这个顺序:

gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

这两个点的范围是从0到1,也就是说最左边和最上边是0,最下和最右是1。这个例子中渐变会变成从左上角到右下角。

渐变色还有一个重要的属性是locations,这个属性是用来指定colors中设置的每个颜色的终点的。

gradientLayer.locations = [0.2, 0.8]

locations中元素的范围是从0到1。在这里,数组中的第一个元素0.2指定了colors数组中第一个元素红色的终点是0.2,也就是说把整个渐变色范围分成10份,从开始到2/10处都是纯红色,从2/10到8/10处是纯红色到纯黄色的渐变,而从8/10到10/10是纯黄色。

给view的border设置渐变色

使用UIBezierPath来创建一个带圆角的CAShapeLayer,并且把它的圆角设置成view的圆角,就可以把一个view的border设置为渐变色。

... // 同上给view设置gradientLayer

let shapeLayer = CAShapeLayer()
shapeLayer.borderWidth = 1
shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor // 必须要设置成clearColor或者nil,默认是黑色
shapeLayer.strokeColor = UIColor.white.cgColor // 随便设置一个非clearColor的颜色

gradientLayer.mask = shapeLayer

view.layer.addSublayer(gradientLayer)
  1. borderWidth shapeLayer的border宽度和view的相同,可以根据设计图来设置。
  2. cornerRadius UIBezierPath的圆角和view的圆角相同;roundedRect和CAGradientLayer的大小相同。
  3. fillColor 是shapeLayer的填充色,默认是黑色,建议设置成nil或者是透明色clearColor
  4. strokeColor 是border的描边色,如果设置成clearColor的话就不会绘制出来border了,这里随便一个颜色就是让其能够绘制出来,实际使用的是渐变色
  5. mask 用shapeLayer作为gradientLayer的mask,可以让gradientLayer内部挖空,只保留边缘border的渐变颜色
  6. 最终把渐变色layer添加到view.layer上,shapeLayer只是用来修饰gradientlayer的,目的是把gradientlayer的内部挖空,并且把border和圆角做出来。

总结

通过这篇文章我们了解了怎么给一个view设置渐变色,并详细阐述了渐变色的几个重要属性。关于给border设置渐变色是一个进阶的知识点。

到此这篇关于iOS给border设置渐变色的文章就介绍到这了,更多相关iOS border渐变色内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-06

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

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

iOS Label实现文字渐变色效果

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

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

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

iOS tableView实现头部拉伸并改变导航条渐变色

本文实例为大家分享了iOS tableView实现头部拉伸改变,导航条渐变色的具体代码,供大家参考,具体内容如下 #import "TableViewController.h" static NSString *ident = @"cell"; #define RGBA(r,g,b,a) [UIColor colorWithRed:r/255.0f green:g/255.0f blue:b/255.0f alpha:a] #define RGB(r,g,b) RG

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中给视频添加滤镜的方法示例

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

iOS中输入框设置指定字符输入的方法

前言 对于开发者来说,在很多情况下,一般的输入框需要按照要求进行输入,输入内容由开发人员来指定.例如:密码输入框只能输入纯数字或者是拼音与数字结合的文本等,那么我们在开发的时候就需要做一些输入文本的限时.下面话不多说了,来一起看看详细的介绍吧. 一.只能输入纯数字 在这里以UITextField为例:其实现代码如下: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range re

iOS中精确计算WebView高度的方法示例

前言 在开发app的过程中难免会遇到将webView加载到tableView的cell上的需求,一般遇到这种问题,通常想到的思路就是在webView的回调方法webViewDidFinishLoad中获取到webView的高度,刷新tableView,将高度赋值给tableView的回调方法heightForRow.看似没有任何问题,但是在实际操作的时候却发现得到的高度并不是webView的实际高度,显然这种方法是行不通的.其实并不是方法不行,而是webViewDidFinishLoad代理方法

iOS中金额字符串格式化显示的方法示例

前言 由于项目中很多地方展现统计金额, 比如在一些金融类的 App 中,对于表示金额类的字符串,通常需要进行格式化后再显示出来.例如: 0 –> 0.00 123 –> 123.00 123.456 –> 123.46 102000 –> 102,000.00 10204500 –> 10,204,500.00 它的规则如下: 个位数起每隔三位数字添加一个逗号,同时保留两位小数,也称为"千分位格式". 我们一开始采取了一种比较笨拙的处理方式如下: 首先根据

Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果(2)

做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

iOS中UILabel设置居上对齐、居中对齐、居下对齐及文字置顶显示

iOS中UILabel设置居上对齐.居中对齐.居下对齐 在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐. 具体如下: // // myUILabel.h // // // Created by yexiaozi_007 on 3/4/13. // Copyright (c) 2013 yexiaozi_007. All rights reserved. // #import <UIKit/UIK

jQuery实现侧浮窗与中浮窗切换效果的方法

本文实例讲述了jQuery实现侧浮窗与中浮窗切换效果的方法.分享给大家供大家参考,具体如下: html部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

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

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

iOS中常用设置返回按钮

//添加返回按钮 -(void)backBtn{ UIButton *backBtn=[[UIButton alloc]initWithFrame:CGRectMake(0, 10, 60, 20)]; [backBtn setTitle:@"返回" forState:UIControlStateNormal]; backBtn.titleLabel.font=[UIFont systemFontOfSize:12]; backBtn.imageEdgeInsets=UIEdgeIns