In this article, we will set gradients for a view in four lines of code, covering several important gradient-related properties, and a few special concerns in use.

Setting gradients to the border of a view is a more advanced use. Hopefully this article will help you in this area.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

Set the gradient for the View

You can set gradients to a view with four lines of code:

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)
Copy the code

After creating the CAGradientLayer, you need to set the frame to display, otherwise its size will be 0 by default.

Gradients are shown in the colors array, which is of type CGColorRef, so a.cgcolor cast is required; If the OC syntax is used, (__bridge ID) must be added, otherwise the gradient will not show.

By default the gradient is from top to bottom, but change the order by setting startPoint and endPoint:

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

The range of these two points is 0 to 1, so the left and top are 0, and the bottom and right are 1. In this case the gradient will go from the top left to the bottom right.

Another important attribute for gradients is locations, which is used to specify the destination of each color set in colors.

gradientLayer.locations = [0.2.0.8]
Copy the code

Locations has elements that go from zero to one. Here, the first element 0.2 in the array specifies that the red end of the first element in the Colors array is 0.2, which means that the entire gradient is divided into 10 parts, with solid red from the beginning to 2/10, solid red to solid yellow from 2/10 to 8/10, and solid yellow from 8/10 to 10/10.

Set gradient to the view border

To set a view border to gradient, use UIBezierPath to create a CAShapeLayer with rounded corners and set its rounded corners to the view’s rounded corners.

. // Set gradientLayer for view as above
        
let shapeLayer = CAShapeLayer()
shapeLayer.borderWidth = 1
shapeLayer.path = UIBezierPath(roundedRect: gradientLayer.bounds, cornerRadius: 10).cgPath
shapeLayer.fillColor = UIColor.clear.cgColor // Must be set to clearColor or nil. The default is black
shapeLayer.strokeColor = UIColor.white.cgColor // Set a random color that is not clearColor
        
gradientLayer.mask = shapeLayer

view.layer.addSublayer(gradientLayer)
Copy the code
  1. borderWidthThe border width of the shapeLayer is the same as that of the View and can be set according to the design.
  2. cornerRadiusUIBezierPath has the same rounded corners as view;roundedRectandCAGradientLayerOf the same size.
  3. fillColorIs the fill color of shapeLayer. The default is black. It is recommended to set it to nil or transparentclearColor
  4. strokeColorBorder is the stroke color of the border. If it is set to clearColor, the border will not be drawn. Here, a random color is used to draw the border
  5. maskUsing a shapeLayer as a mask for the gradientLayer lets the gradientLayer be hollowed out inside, leaving only the gradient color of the border
  6. Finally add the gradientlayer to the view.layer, and the shapeLayer is just a modifier for the gradientlayer. The purpose is to hollow out the gradientlayer and make the border and rounded corners.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

conclusion

In this article we learned how to set gradients for a view and explained several important properties of gradients in detail. Setting gradients for the border is an advanced tutorial.

I hope this article has been helpful to you, and you are welcome to share it on wechat or Weibo.

If you have any questions, please send me a message on the official account.

This article first in my blog, reprint please indicate the source.