iOS - Custom UIView doesn't show up on device

Question

I have a custom UIView subclass, that I want to add as a subview on my UIViewController. The problem is, that the view doesn't show up, when I run the app, even though everything is set correctly (in viewDidLoad the view has a correct frame and is not hidden) and it shows up in Interface Builder (picture). On the device I only get a red screen, no triangle in the middle.

Here's the view subclass:

@IBDesignable
class TriangleView: UIView {

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        let path = UIBezierPath()
        let width = rect.size.width
        let height = rect.size.height
        let startingPoint = CGPoint(x: center.x, y: center.y - height / 2)

        path.moveToPoint(startingPoint)
        path.addLineToPoint(CGPoint(x: center.x + width / 2, y: center.y - height / 2))
        path.addLineToPoint(CGPoint(x: center.x, y: center.y + height / 2))
        path.addLineToPoint(CGPoint(x: center.x - width / 2, y: center.y - height / 2))
        path.closePath()

        let shapeLayer = CAShapeLayer()
        shapeLayer.frame = rect
        shapeLayer.position = center
        shapeLayer.path = path.CGPath
        shapeLayer.fillColor = UIColor.whiteColor().CGColor

        layer.mask = shapeLayer

        layer.backgroundColor = UIColor.redColor().CGColor
    }
}

I don't have any other code to show, I just add the view to the ViewController and set its constraints and class to TriangleView.

if you set a breakpoint to drawRect of your custom view, will the debugger stop on it? — heximal, Mar 31 '16 at 08:51
Yes, everything works as it should, it just doesn't show up. Forgot to mention, that adding the view in code doesn't work also. — smeshko, Mar 31 '16 at 08:52
Did you try Debug View Hierarchy feature in Xcode to examine the views being in runtime? — heximal, Mar 31 '16 at 08:55
Yes, it is there, but for some reason it's invisible. The frame is correct, though. — smeshko, Mar 31 '16 at 09:03
try to change your TriangleView for a UIView to verify that it is adding correctly in your UIViewcontroller — Oswaldo Leon, Oct 04 '16 at 22:02

score 4 · Accepted Answer · answered Dec 07 '16 at 05:38

Swift 3

I worked on simplifying what you have. I know this is old but here is something that works which I believe achieves what you were trying to do:

@IBDesignable
class TriangleView: UIView {

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        let width = rect.size.width
        let height = rect.size.height

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: width, y: 0))
        path.addLine(to: CGPoint(x: width/2, y: height))
        path.close()
        path.stroke()

        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.white.cgColor
        shapeLayer.path = path.cgPath

        layer.addSublayer(shapeLayer)
        layer.backgroundColor = UIColor.red.cgColor
    }
}

A few differences:

I only use 3 points instead of 4 for the triangle then close it.
The first 2 points are in the corner of the UIView.
I added layer.addSublayer(shapeLayer). I believe this is why it wasn't showing up when running the app.
Removed some code that I don't think was needed but you can add it back if you believe so.

Simulator

score 0 · Answer 2 · edited Oct 04 '16 at 21:52

0

Have you tried,

[self.view bringSubviewToFront:TriangleView]

Put this after adding your TriangleView as a subview of your view controller.

edited Oct 04 '16 at 21:52

Daniel Que

1,734
4
20
31

answered Mar 31 '16 at 09:02

Avinash Sharma

665
1
7
23

Try setting the self.view.backgroundColor = [UIColor clearColor]; in viewDidLoad – Avinash Sharma Mar 31 '16 at 09:14

iOS - Custom UIView doesn't show up on device

2 Answers2