0

I have added a subview with its own UIView class LogoLineView.swift to the superview ViewController.swift.

Inside my superview in my storyboard I have 3 UI elements:

  • a label with some colored text to simulate a logo "Hello World"
  • then, I have my subview of about 5 points in height and as wide as can be where I intend to draw a horizontal line that is half blue and half red
  • finally, I have another label with just some gray text

enter image description here

Now, in my subview class (LogoLineView.swift) I am overriding the drawRect as shown below: 

class LogoLineView: UIView {

var lineWidth: CGFloat = 0.5 {didSet { setNeedsDisplay() } }
var blueLineColor: UIColor = UIColor.blueColor() { didSet { setNeedsDisplay() } }
var redLineColor: UIColor = UIColor.redColor() { didSet { setNeedsDisplay() } }
var subViewCenter: CGPoint {
    return convertPoint(center, fromView: superview)
}
override func drawRect(rect: CGRect) {

    var blueLinePath = UIBezierPath()
    blueLinePath.moveToPoint(subViewCenter)
    blueLinePath.addLineToPoint(CGPoint(x: bounds.minX, y: bounds.midY))
    blueLinePath.lineWidth = lineWidth;
    blueLineColor.set()
    blueLinePath.stroke()
    var redLinePath = UIBezierPath()
    redLinePath.moveToPoint(subViewCenter)
    redLinePath.addLineToPoint(CGPoint(x: bounds.maxX, y: bounds.midY))
    redLinePath.lineWidth = lineWidth;
    redLineColor.set()
    redLinePath.stroke()
}

}

The problem I am having is that when I add constraints to the subview in relation to the other elements in the superview, my drawn line is not visible.

enter image description here

However, if I remove all the other elements in my superview and leave only the subview, then I am able to see my line drawn just the way I want it. enter image description here

I want my line drawn in between the text "Hello World" and the text "This is my first time using Core Graphics and Bezier Paths". And I want this line to be able to adapt to any screen size.

The constraints I am using are below:

  • "Hello World" constraints: enter image description here
  • Subview to draw line constraints: enter image description here
  • grey text "This is my first time using Core Graphics and Bezier Path" constraints: enter image description here

could you please help me find what's missing? I am very new to using Core Graphics and Bezier Paths. Thank you.

Jace
  • 397
  • 5
  • 15

1 Answers1

1

The view into which you are drawing your line is collapsed by the auto-layout system. The reason your text views are not collapsed is that they have an intrinsic heights. Give your line view a fixed height constraint, or override intrinsicContentSize() in your view subclass so that that view has an intrinsic size as well.

Scott Thompson
  • 22,629
  • 4
  • 32
  • 34
  • I'm not sure that's right. If there were an ambiguous constraint, wouldn't there be a warning visible? Also the width constraints seem fine, and unless `clipsToBounds` is enabled, it should draw the line outside of its bounds, right? – Aaron Brager Mar 24 '16 at 21:43
  • The constraint is not ambiguous. The layout system has determined that having a view with a zero height satisfies the constraint unambiguously. If you wish to verify that this is the case, though, you could use the debugging routines auto layout to dump out the size of the views in the layout and verify that the line view has zero height. As for your clipping bounds concern, I would have to do some experimentation with zero height views to say. – Scott Thompson Mar 24 '16 at 21:47
  • Thank you! adding the height constraint of 1 did fix my issue. I did verify and if I remove the height constraint of 1 again, I do see 2 warnings. (1) Vertical position is ambiguous for "this is my first time ...." (2) Height is ambiguous for "Logo Line View.". Big oversight on my part, so I appreciate the help, it would have taken me days to figure this out on my own. – Jace Mar 24 '16 at 22:06
  • I highly recommend you watch the auto layout sessions from the past couple of years of WWDC videos. It's a great way to pick up handy debugging tips and tricks. Looking to see if your view has a zero height or width is a good first step when you don't see something under auto layout's control :-) – Scott Thompson Mar 24 '16 at 22:15