In this post I will describe how to add custom UIView objects with transparent bacgground to your project.
In the Things Speak app I have a custom UIView where the different charts are presented. It is a really simple one, two subviews are being added with the charts to a standard UI element. The topmost subview is expected to have transparent bacground to not hide the other one, while the lower one has extra contents like chart guide lines, scales, etc. I nearly spent 3 hours to find what the problem is, based on the forums it seemed no one had the same problem before. Now, that I know what is the solution, it is pretty logic.
To demonstrate it, I created a small example. Full source code can be downloaded from here.
First, let’s see the custom view. It has a draw() function where a circle or a rectangle will be drawn. On a custom background color with custom drawing color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class DrawView: UIView { var drawCircle : Bool = false var drawRectangle : Bool = false var bgColor = UIColor.white var drawColor = UIColor.black override func draw(_ rect: CGRect) { self.bgColor.setFill() UIRectFill(rect) if drawCircle { let path = UIBezierPath(arcCenter: CGPoint(x: rect.width / 2, y: rect.height / 2), radius: min(rect.width / 2, rect.height / 2), startAngle: 0, endAngle: CGFloat(2 * Double.pi), clockwise: true) self.drawColor.set() path.fill() path.stroke() } if drawRectangle { let path = UIBezierPath(rect: CGRect(x: rect.width / 4, y: rect.height / 4, width: rect.width / 2, height: rect.height / 2)) self.drawColor.set() path.fill() path.stroke() } } } |
Let’s create an instance of this view with a red circle on a white background.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class ViewController: UIViewController { let v1 = DrawView() let v2 = DrawView() override func viewDidLoad() { super.viewDidLoad() v1.drawCircle = true v1.bgColor = UIColor.white v1.drawColor = UIColor.red self.view.addSubview(v1) v1.translatesAutoresizingMaskIntoConstraints = false let v1constX = NSLayoutConstraint(item: v1, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0) self.view.addConstraint(v1constX) let v1constY = NSLayoutConstraint(item: v1, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0) self.view.addConstraint(v1constY) let v1constW = NSLayoutConstraint(item: v1, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: 0) self.view.addConstraint(v1constW) let v1constH = NSLayoutConstraint(item: v1, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.height, multiplier: 1, constant: 0) self.view.addConstraint(v1constH) v1.setNeedsDisplay() } |
The result will be the same as we expected:
Adding the second view with 50% transparency black background and a blue rectangle:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
let v2 = DrawView() v2.drawRectangle = true v2.bgColor = UIColor.black.withAlphaComponent(0.5) v2.drawColor = UIColor.blue self.view.addSubview(v2) v2.translatesAutoresizingMaskIntoConstraints = false let v2constX = NSLayoutConstraint(item: v2, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0) self.view.addConstraint(v2constX) let v2constY = NSLayoutConstraint(item: v2, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0) self.view.addConstraint(v2constY) let v2constW = NSLayoutConstraint(item: v2, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: 0) self.view.addConstraint(v2constW) let v2constH = NSLayoutConstraint(item: v2, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.height, multiplier: 1, constant: 0) self.view.addConstraint(v2constH) v2.setNeedsDisplay() |
The result will be this:
Pretty good, but we would like to see the circle and the expected result would be a grey-ish background through a semi-transparent view. This black is definitely not what we want.
The key is to set the isOpaque parameter of the window. According to Apple if the opaque parameter is true, for the best user experience and for better performance anything covered by the view will be fully skipped from rendering, even if the background was set to transparent. Actually the set backround will be used instead of anything under it. If we set white transparent background, the result will be gray, but the circle is not visible.
|
1 |
v2.bgColor = UIColor.white.withAlphaComponent(0.5) |
So change back the background to black and set the isOpaque to false right before we are attaching the second view to the main view:
|
1 2 3 4 5 6 7 |
v2.bgColor = UIColor.black.withAlphaComponent(0.5) v2.drawColor = UIColor.blue v2.isOpaque = false self.view.addSubview(v2) |
After the isOpaque has been set, the output is now ok:
Finally, to support rotation, add this function to your main view:
|
1 2 3 4 |
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { self.v1.setNeedsDisplay() self.v2.setNeedsDisplay() } |