Overview
Layer is visual attributes you can set background color,border & show etc.. Almost UI control have one layer CALayer by using that you can use to provide border , round corner etc..
There are many layers in iOS but we are looking for few important layers here.
Topic 1: CAGradientLayer
Generally, if we have UI with gradient effect for 2 colours, we use image in our project which increases our app bundle size bit, so we have gradient layer to do it easily.
Just few lines of code and it’s done, check below code:
let layer = CAGradientLayer()
layer.frame = CGRect(x: 64, y: 64, width: 160, height: 160)
layer.colors = [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor ,UIColor.black.cgColor]
layer.locations = [0,0.3,0.5,0.7,1]
layer.startPoint = CGPoint(x: 0, y: 0)
layer.endPoint = CGPoint(x: 1, y: 1)
view.layer.addSublayer(layer)Here First we will make instance of layer then set frame.
colours: It’s an array property to set multiple colours
locations: Locations property is used to define area of colour between 0 to 1 range.
startPoint,endPoint: We have to provide directions of gradient, start & end position Default value is 0.5,0.5
Topic 2: CAShapeLayer
CAShapeLayer is used to draw custom UI using BezierPath object.
Using UIBezierPath we draw custom shape like polygon, triangle etc..
Here we make rounded layer object.
let layer = CAShapeLayer() layer.path = UIBezierPath(roundedRect: CGRect(x: 64, y: 230, width: 160, height: 160), cornerRadius: 50).cgPath layer.fillColor = UIColor.red.cgColor view.layer.addSublayer(layer)
UIBezierPath
Let us create triangle path & apply to view.
First we create custom view & override draw method.
let myBezier = UIBezierPath() myBezier.move(to: CGPoint(x: 0, y: 0)) myBezier.addLine(to: CGPoint(x: 100, y: 0)) myBezier.addLine(to: CGPoint(x: 50, y: 100)) myBezier.close() UIColor.blue.setStroke() let color = UIColor(patternImage: image) color.setFill() myBezier.stroke() myBezier.fill()
Here we are using move & addLine function we draw the path.
- we will also fill pattern image in layer
- fill() – fill the color inside triangle
- strock() – Draw border on triangle
Topic 3: ReplicateLayer
Using RelicateLayer , We can create number of copies of sub-layers, each copy potentially having geometric, temporal, and color transformations applied to it.
Let’s create simple square relicatelayer see below code.
let replicatorLayer = CAReplicatorLayer() let redSquare = CALayer() redSquare.backgroundColor = UIColor.green.cgColor redSquare.frame = CGRect(x: 5, y: 250, width: 50, height: 50) let instanceCount = 5 replicatorLayer.instanceCount = instanceCount replicatorLayer.instanceTransform = CATransform3DMakeTranslation(55, 0, 0) let offsetStep = -1 / Float(instanceCount) replicatorLayer.instanceBlueOffset = offsetStep replicatorLayer.instanceGreenOffset = offsetStep replicatorLayer.addSublayer(redSquare) view.layer.addSublayer(replicatorLayer)
Here we first create instance of delicatelayer then create CALayer with green color & provide frame.
instanceCount
This property indicates number of copies you want to create.
instanceTransform
This property indicates the translation of each layer related to position
instanceGreenOffset,instanceGreenOffset
This is float value to create color (R,G,B) object
