iOS给边境设置渐变色的案例

  介绍

这篇文章给大家分享的是有关iOS给边境设置渐变色的案例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

给视图设置渐变色

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

let  view =, UIView(框架:CGRect中(x): 100年,,,y,, 100,宽度:,100年,身高:,100))   let  gradientLayer =, CAGradientLayer ()   gradientLayer.frame =view.bounds//,@ [(__bridge  id) UIColor  redColor .CGColor,, (__bridge  id) [UIColor  yellowColor] .CGColor]   (UIColor.red.cgColor gradientLayer.colors =,,, UIColor.yellow.cgColor]   view.layer.addSublayer (gradientLayer)

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

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

默认情况下渐变会从上至下,可是通过设置曾经繁荣和端点来改变这个顺序:

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

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

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

gradientLayer.locations =, [0.2, 0.8]

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

给视图的边界设置渐变色

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

…,//,同上给视图设置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的边境宽度和视图的相同,可以根据设计图来设置。

<李>

cornerRadius UIBezierPath的圆角和视图的圆角相同,roundedRect和CAGradientLayer的大小相同。

<李>

fillColor是shapeLayer的填充色,默认是黑色,建议设置成零或者是透明色clearColor

<李>

strokeColor是边境的描边色,如果设置成clearColor的话就不会绘制出来边境了,这里随便一个颜色就是让其能够绘制出来,实际使用的是渐变色

<李>

面具用shapeLayer作为gradientLayer的面具,可以让gradientLayer内部挖空,只保留边缘边界的渐变颜色

<李>

最终把渐变色层添加到视图。层上,shapeLayer只是用来修饰gradientlayer的,目的是把gradientlayer的内部挖空,并且把边境和圆角做出来。

感谢各位的阅读!关于“iOS给边界设置渐变色的案例”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

iOS给边境设置渐变色的案例