Adding a vertical rule (border) between two UIScrollViews

Question

I have two UIScrollView instances and I want to draw a vertical line between them (not 100% height, more like 80%). How can I achieve this?

Matt Bierner · Accepted Answer · 2011-01-14T01:18:29.000

Use Core Graphics. Nest the two UIScrollViews inside another view and override the drawRect method on the parent. See Apple's UIView documentation for drawRect for more detail and the Core Graphics Context Reference for more information about drawing.

- (void) drawRect: (CGRect) rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Draw divider
    UIGraphicsPushContext(context);
        // Fill the background, this must happen if the view is not opaque.
            if (self.opaque)
            {
            [[UIColor whiteColor ] set];
            CGContextFillRect(context, rect);
            }

        [[UIColor grayColor] set];

        CGContextSetLineWidth(context, 1);

        CGContextBeginPath(context);
        CGContextMoveToPoint(context, rect.size.width * 0.5, 0.1 * rect.size.height);
        CGContextAddLineToPoint(context, rect.size.width * 0.5, 0.9 * rect.size.height);
        CGContextStrokePath(context);
    UIGraphicsPopContext(); 
}

edit

To address my oversight, there is no simple way that I know of to draw on top of subviews.

This behavior can be simulated using the same basic view hierarchy as above. Subclass UIView to create a completely transparent view that does not accept any touch events. Place the drawing code (I added a conditional for opacity in the code above) in the custom view and then insert an instance of the custom view at the front of the view hierarchy.

Thanks for your help. I tried this but I don't see the line, I guess because the UIScrollView's are covering it. Any idea how I might get around that? — , Jan 14 '11 at 00:18
I have updated my answer to address that oversight. I have tested the updated solution and can confirm that it will give you the desired behavior. — Matt Bierner, Jan 14 '11 at 01:20
Hm, I'm having trouble getting the touch events to work properly. Do you know how to make the transparent view pass the events to the scrollviews? — , Jan 14 '11 at 07:06
See this question: http://stackoverflow.com/questions/1694529/allowing-interaction-with-a-uiview-under-another-uiview — Matt Bierner, Jan 14 '11 at 17:31

score 1 · Answer 2 · answered Jan 14 '11 at 01:28

A vertical line between your views could also just be a thin, tall UIView (on top of the scroll views) with, say, a solid background color. This would mean you don't need to worry about custom drawing code. This also lets you lay it out in Interface Builder, use autosizing, etc.

Adding a vertical rule (border) between two UIScrollViews

2 Answers2