Transparent view is black?

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?

`self.opaque = false;` Add that to the `TransparentView` constructor. Then you can do whatever you want in the `draw` method. — Brandon, Aug 20 '17 at 20:29

score 7 · Accepted Answer · answered Aug 20 '17 at 20:32

7

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)
    }
}

answered Aug 20 '17 at 20:32

Brandon

22,723
11
93
186

Ah, I wasn't aware of that property, perhaps this is a little cleaner than my solution. – Kevin DiTraglia Aug 20 '17 at 20:42
Actually setting that property doesn't change the behavior – Kevin DiTraglia Aug 20 '17 at 20:43
Nevermind I'm an idiot I set isOpaque to true, this does work – Kevin DiTraglia Aug 20 '17 at 20:45

score 0 · Answer 2 · answered Aug 20 '17 at 20:17

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")
}

score 0 · Answer 3 · answered Aug 20 '17 at 21:46

"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.

@Kven DiTraglia Did you end with my solution? Plus my answer if better then the chosen one. What about a +1 ? — alegelos, Aug 22 '17 at 12:29
If you re-read the question I specifically say I realize it's too simple to use drawRect, but my actual code is much more complicated and needs to draw, yet your answer removed it anyway. — Kevin DiTraglia, Aug 23 '17 at 17:15

Transparent view is black?

3 Answers3