In this tutorial, you'll learn what a CALayer is, and see 10 examples of using CALayers for cool effects, like shapes, gradients, and even particle systems.
Thank you for very practical sharing!
Thank you for this. FYI. In going through the CATileLayer tutorial I got a backtrace:
LayerPlayer[1522:262128] [reports] Main Thread Checker: UI API called on a background thread: -[UIView bounds]
It appears in TilingView.swift, you are accessing bounds from draw(). XCode 9 reports “UIView.bounds must be used from main thread only” on line 59.
Hi,
I have the same issue. the problem is that it crash there randomly, when you are using the app compiled for production.
so it is more bad than a simple warning…
Would anyone know if CATextLayer inherit the transform of the parent layer? I am trying it out, and have set the root layer transform to be flipped, CGAffineTransform(a: 1.0, b: 0, c: 0, d: -1.0, tx: 0, ty: 0).
But when I add a CATextLayer to it, layer.addSublayer(labelLayer), it is rendered incorrectly, ignoring the transform that is set for the parent. The other layers, CAShapeLayers, do inherit the transform and therefore are rendered correctly.
Am I missing something?
@michalciurus Can you please help with this when you get a chance? Thank you - much appreciated! :]
CATextLayer should inherit the transform from the parent layer.
Here’s a snippet I used to do just that - it did apply transform to CATextLayer sublayer.
let textLayer = CATextLayer()
textLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
let string = String(repeating: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor arcu quis velit" ,count: 20)
textLayer.string = string
textLayer.font = CTFontCreateWithName("Helvetica" as CFString, 4, nil)
textLayer.foregroundColor = UIColor.darkGray.cgColor
textLayer.isWrapped = true
textLayer.alignmentMode = kCAAlignmentLeft
textLayer.contentsScale = UIScreen.main.scale
let transform = CGAffineTransform(a: 1.0, b: 0, c: 0, d: -1.0, tx: 0, ty: 0)
self.layer.setAffineTransform(transform)
self.layer.addSublayer(textLayer)
Let me know if it helps! Please share your code, maybe I can be of assistance.
Hi @michalciurus,
My excerpted code is below (hope it makes sense; otherwise let me know):
final class Graph: UIView
{
private var flippedTransform = CGAffineTransform(a: 1.0, b: 0, c: 0, d: -1.0, tx: 0, ty: 0)
...
override func draw(_ rect: CGRect)
{
layer.setAffineTransform(flippedTransform)
drawDataPoints(points: points,
animation: configuration.dataPointAnimation,
pointShape: configuration.pointShape)
}
private func drawDataPoints(points: [CGPoint])
{
for point in points
{
let circlePath = UIBezierPath()
let radius : CGFloat = 2.0
let lineWidth: CGFloat = 1.0
let color = UIColor.blue
circlePath.addArc(withCenter: point,
radius: radius,
startAngle: 0,
endAngle: CGFloat(Double.pi * 2),
clockwise: true)
let circleShapeLayer = CAShapeLayer()
circleShapeLayer.fillColor = color.cgColor
circleShapeLayer.lineWidth = lineWidth
circleShapeLayer.strokeColor = color.cgColor
circleShapeLayer.frame = bounds
circleShapeLayer.path = circlePath.cgPath
circleShapeLayer.opacity = 1.0
layer.addSublayer(circleShapeLayer)
let textLayer = CATextLayer()
textLayer.string = "Value Label"
textLayer.alignmentMode = kCAAlignmentCenter
textLayer.font = configuration.fonts.valueLabel
textLayer.fontSize = configuration.fonts.valueLabel.pointSize
textLayer.foregroundColor = color.cgColor
textLayer.frame = CGRect(x: point.x, y: point.y, width: 100, height: 20)
layer.addSublayer(textLayer)
}
}
}
configuration in the above is just a struct with a fonts property.
This results in the points being plotted correctly based on the flipped coordinates, but the text layer is drawn incorrectly (see below).
Thank you for your reply and offer of assistance; I really appreciate your time and effort.
Everything is drawn correctly according to the view hierarchy you’ve set up 
There are two problems:
kCAAlignmentLeft.CATextLayer gets flipped as expected, but that means it’s unreadable. You have to flip it back locally to make it readable.The second one is tricky. You basically hit a math problem. Please read this and use a piece of paper and try to draw everything out.
You need to put CATextLayer in a wrapper view:
wrapperView.frame = CGRect(x: point.x, y: point.y, width: 100, height: 20)
textLayer.frame = CGRect(x: 0, y: 0, width: wrapperView.width, height: wrapperView.height)
wrapperView.addSublayer(textLayer)
layer.addSublayer(wrapperView)
textLayer.setAffineTransform(flippedTransform) //Flip back the text but without moving it in space
If what you are saying is correct, does that mean that the CATextLayer ignores the parent layer transform when drawing the text, not necessarily the layer, but the text string that is drawn in it?
Also, I picked 100 as width somewhat arbitrarily, the behavior is the same with a width of 20. The width and alignment are not the main problem I am trying to solve.
CATextLayer should inherit the transform from the parent layer.
You’re right, my mistake. That’s actually incorrect, sorry. What I meant and what is happening is that the CATextLayer is affected by the transform, but does not “inherit” the value. CATextLayer transform is identity, it does not inherit the value from the parent. It’s true for every layer. In fact that’s the standard in any 2d/3d drawing framework - children do not “inherit” transforms, their transforms are identity by default.
Imagine the transforms being applied from back to front. That means that everything is drawn normally including text and in the end the whole view gets flipped.
This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!