本文将从4行代码出发给一个view设置渐变色,分别会谈到几个重要的渐变色相关属性,在使用过程中有几个需要特别关注的点。
给一个view的border设置渐变色是比较高阶的用法,希望本文可以在这个方面帮助到你。
通过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是纯黄色。
使用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)
通过这篇文章我们了解了怎么给一个view设置渐变色,并详细阐述了渐变色的几个重要属性。关于给border设置渐变色是一个进阶的知识点。
到此这篇关于iOS给border设置渐变色的文章就介绍到这了,更多相关iOS border渐变色内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。