Draw a separator line in conjunction with Auto Layout

Question

I'm reimplementig some kind of UISplitViewController. Now I need to draw a separator line between the master and the detail view. Now I have some questions for this:

• Should the separator line be on the view controller itself or should it be a separate view?
• What about Auto Layout? Setting a frame is not allowed.

I saw solutions for CALayer/CAShapeLayer, drawRect (CoreGraphics) or using the background color of an UIView/UILabel. The last one should cost too much performance according to the folks there.

On the one side it is comfortable to draw the line in the UITableViewController itself. Or should a separate UIView be created? If I embed a separate UIView there will be much more constraints and it will complicate things (would have to set separate widths) ... Also it should adapt to orientation changes (e.g. the size of the UITableViewController changes -> the separation line should also resize).

How can I add such a dividing rule? Such a dividing rule can be seen here:

Solution 1

If you need to add a true one pixel line, don't fool with an image. It's almost impossible. Just use this:

@interface UILine : UIView
@end

@implementation UILine

- (void)awakeFromNib {

    CGFloat sortaPixel = 1 / [UIScreen mainScreen].scale;

    // recall, the following...
    // CGFloat sortaPixel = 1 / self.contentScaleFactor;
    // ...does NOT work when loading from storyboard!

    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, sortaPixel)];

    line.userInteractionEnabled = NO;
    line.backgroundColor = self.backgroundColor;

    line.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    [self addSubview:line];

    self.backgroundColor = [UIColor clearColor];
    self.userInteractionEnabled = NO;
}

@end

How to use:

Actually in storyboard, simply make a UIView that is in the exact place, and exact width, you want. (Feel free to use constraints/autolayout as normal.)

Make the view say five pixels high, simply so you can see it clearly, while working.

Make the top of the UIView exactly where you want the single-pixel line. Make the UIView the desired color of the line.

Change the class to UILine. At run time, it will draw a perfect single-pixel line in the exact location on all devices.

(For a vertical line class, simply modify the CGRectMake.)

Hope it helps!

Solution 2

I took @joe-blow's excellent answer a step further and created a view that is not only rendered in IB but also whose line width and line color can be changed via the inspector in IB. Simply add a UIView to your storyboard, size appropriately, and change the class to LineView.

import UIKit

@IBDesignable
class LineView: UIView {

  @IBInspectable var lineWidth: CGFloat = 1.0
  @IBInspectable var lineColor: UIColor? {
    didSet {
      lineCGColor = lineColor?.CGColor
    }
  }
  var lineCGColor: CGColorRef?

    override func drawRect(rect: CGRect) {
      // Draw a line from the left to the right at the midpoint of the view's rect height.
      let midpoint = self.bounds.size.height / 2.0
      let context = UIGraphicsGetCurrentContext()
      CGContextSetLineWidth(context, lineWidth)
      if let lineCGColor = self.lineCGColor {
        CGContextSetStrokeColorWithColor(context, lineCGColor)
      }
      else {
        CGContextSetStrokeColorWithColor(context, UIColor.blackColor().CGColor)
      }
      CGContextMoveToPoint(context, 0.0, midpoint)
      CGContextAddLineToPoint(context, self.bounds.size.width, midpoint)
      CGContextStrokePath(context)
    }
}

Solution 3

Updating the @mharper answer to Swift 3.x

import UIKit

@IBDesignable
class LineView: UIView {

    @IBInspectable var lineWidth: CGFloat = 1.0
    @IBInspectable var lineColor: UIColor? {
        didSet {
            lineCGColor = lineColor?.cgColor
        }
    }
    var lineCGColor: CGColor?

    override func draw(_ rect: CGRect) {
        // Draw a line from the left to the right at the midpoint of the view's rect height.
        let midpoint = self.bounds.size.height / 2.0
        if let context = UIGraphicsGetCurrentContext() {
            context.setLineWidth(lineWidth)
            if let lineCGColor = self.lineCGColor {
                context.setStrokeColor(lineCGColor)
            }
            else {
                context.setStrokeColor(UIColor.black.cgColor)
            }
            context.move(to: CGPoint(x: 0.0, y: midpoint))
            context.addLine(to: CGPoint(x: self.bounds.size.width, y: midpoint))
            context.strokePath()
        }
    }
}

Comments

[Fattie]

BTW it would be best if you include an image of what you're trying to do. Also, the comments about performance are not sensible .. adding a view that is "a black line" is absolutely no problem.

[testing]

Everyone should know the split view controller. But I'm to lazy to include an image for that ;-) I think drawing a line costs less performance than creating a UIView. If you want you can read the linked answers of the SO threads in my answer, where they talk about a little bit more.

[Fattie]

Regarding the image, I don't understand where you want a line and why it's causing such a problem. Regarding the performance comment, it is totally, absolutely, completely, nonsensical. Regarding the linked QA, b1234 mentions performance once in passing, and is totally wrong. Note that the person who pointed out that it is wrong, got 24 uproots :)

[Fattie]

err 26. i also added a quick explanation there.

[Fattie]

Sounds like you found the solution you need, cheers!

[testing]

I added an example image (not from my app). Here you can see the line between the left view controller (master) and the right view controller (detail). I didn't need the line in the navigation bar. Furthermore, I didn't know how to do that with auto layout but in genereal it is not a problem. Hmm, that means I could use a simple UIView and set a background color together with my constraints. Would be much easier :)

[Fattie]

do you mean the UP AND DOWN line? vertical line ?

[Fattie]

dude it is surprisingly difficult to draw a true single-pixel line. carefully note all the comments and discussion here on this 500-bounty question .. stackoverflow.com/a/22694062/294884

[testing]

Yes, I mean the vertical line. Seems your solution is working fine!

[testing]

Thanks for your answer. I'm doing nearly everything in code and I can't test out your solution. Now I found an apporach which seems to work. I'll post it as an answer. Hopefully your solution help others!

[Jammer]

I've just been trying this solution in Xamarin and it only seems to draw a line halfway across the screen / view.

[testing]

So it is drawing the line which is good. Have you verified your constraints?

[Jammer]

All my constraints are working fine for everything, I ended up doing context.SetLineWidth (rect.Width * 2);

[testing]

SetLineWidth determines the width of the line itself, which is drawn between the two points. Are you trying to draw a vertical or a horizontal line? Perhaps the constraints have not been fully calculated at the time the line is drawn and therefore the size is wrong. In this case you could try it with a LayoutIfNeeded().

[Jammer]

It's a horizontal line. I couldn't see any differences between my setup and the demo you show. Very odd indeed.

[testing]

My code was for my vertical line at first. Now I looked if I can find my project anywhere where I used this. I saw that I modified the code. If you like I can edit my answer so that you can test it out.

[Jammer]

Not had a chance to check yet.