Transparent view is black? - ios

Question

I'm trying to create a view that is transparent in certain spots to see an image behind. However, for some reason in the transparent part of the view, I'm seeing black, instead of what's behind the view. I've trimmed it down to very little code and don't understand why my transparent view shows black instead of red (the color of the view behind). Here's my code:
class ViewController: UIViewController {
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
let redView = UIView(frame: view.frame)
redView.backgroundColor = UIColor.red
let transparentView = TransparentView(frame: view.frame)
view.addSubview(redView)
view.addSubview(transparentView)
}
}
class TransparentView: UIView {
override func draw(_ rect: CGRect) {
UIColor.clear.setFill()
UIRectFill(rect)
}
I would expect the screen to be full red, but instead it shows full black. Before someone says it's a lot easier to make a clear view, I'm actually trying to do more complex things in drawRect, just dropped down to the most basic thing to try to debug my problem. What am I missing here?

Answer 1

Use self.isOpaque = false; to make the view/layer transparent even when drawRect is overriden.
class TransparentView: UIView {
override init(frame: CGRect) {
super.init(frame: frame);
self.isOpaque = false; //Use this..
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
UIColor.clear.setFill()
UIRectFill(rect)
}
}

Answer 2

I figured it out. Apparently even if you override draw, backgroundColor seems to still be considered, and defaults to black. I added the following to my transparent view class:
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}

Answer 3

"drawRect: Implement this method if your view draws custom content. If your view does not do any custom drawing, avoid overriding this method." Link
That been said would be better as you said just set background color on Init.
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
Personally i wont subclass a view for so little customization. Just set it while creating it. Also view setup is better on viewDidLoad, not in viewWillAppear. Since it will execute every time your view will go foreground and u will end with two transparent views added.
Also keeping those line in a extension with a private function helps to keep your code clear.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
}
}
//MARK: - Private Methods
extension ViewController{
fileprivate func setupViews(){
let redView = UIView(frame: view.frame)
redView.backgroundColor = UIColor.red
view.addSubview(redView)
let transparentView = UIView(frame: view.frame)
transparentView.backgroundColor = UIColor.clear
view.addSubview(transparentView)
}
}
Please notice that a more clear approach would be to create those Views in the Storyboard (not by code). Keep code clear and its easier to understand and see whats going on.