这篇文章给大家分享的是有关iOS给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)
borderWidth shapeLayer的border宽度和view的相同,可以根据设计图来设置。
cornerRadius UIBezierPath的圆角和view的圆角相同;roundedRect和CAGradientLayer的大小相同。
fillColor 是shapeLayer的填充色,默认是黑色,建议设置成nil或者是透明色clearColor
strokeColor 是border的描边色,如果设置成clearColor的话就不会绘制出来border了,这里随便一个颜色就是让其能够绘制出来,实际使用的是渐变色
mask 用shapeLayer作为gradientLayer的mask,可以让gradientLayer内部挖空,只保留边缘border的渐变颜色
最终把渐变色layer添加到view.layer上,shapeLayer只是用来修饰gradientlayer的,目的是把gradientlayer的内部挖空,并且把border和圆角做出来。
感谢各位的阅读!关于“iOS给border设置渐变色的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。