Draw Vertical line in UIView

Question

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, dialogContainer.bounds.size.width, buttonSpacerHeight)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];

I have used this code to draw horizontal line on UIView. How can I add Vertical line to UIView?

Change your `CGRectMake` methods to create a vertical box? If you're doing a bunch of custom drawing, you really ought to be using `drawRect:` https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/graphicsdrawingoverview/graphicsdrawingoverview.html — BergQuester, Oct 09 '13 at 05:45
http://stackoverflow.com/questions/19092011/how-to-draw-a-line-in-sprite-kit/19092449#19092449 — Rajneesh071, Oct 09 '13 at 06:18

score 7 · Accepted Answer · answered Oct 09 '13 at 05:45

7

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(dialogContainer.bounds.size.width/2, 0, buttonSpacerHeight, dialogContainer.bounds.size.height)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];

answered Oct 09 '13 at 05:45

Pratyusha Terli

2,343
19
31

Adding a subview is the easy way out, but you are not really not drawing a line but rather its a subview which is not idiomatic. – egghese Oct 09 '13 at 10:14
I have just answered OP's question, in the way he opted for @JeslyVarghese – Pratyusha Terli Oct 09 '13 at 11:37

score 3 · Answer 2 · edited Oct 09 '13 at 10:33

You can subclass UIView and override the drawRect: method. For example

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
            //Horizontal Line
    CGContextSetLineWidth(context, buttonSpacerHeight);
    CGContextMoveToPoint(context,0,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
    CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
          //Vertical Line 
   CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width, dialogContainer.bounds.size.height);
   CGContextStrokePath(context);
}

If you are adamant to use UIViews itself to draw vertical lines then reduce the width to a negligible value and increase the height of the UIView according to your wish.

From the Apple doc, you don't need to call super for `drawRect:` — Yoon Lee, Dec 21 '15 at 23:12

score 2 · Answer 3 · edited May 23 '17 at 12:00

Just exchange your height and width to draw vertical line simple :)

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight,buttonSpacerHeight, dialogContainer.bounds.size.height)];

other example

UIView *horizontalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 2)];
[horizontalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:horizontalLineView];


UIView *verticalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 2, 100)];
[verticalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:verticalLineView];

If you want to use coreGraphic then

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, self.frame);

    CGContextMoveToPoint(context, XstartPoint, ystartPoint);

    CGContextAddLineToPoint(context,XendPoint,YendPoint);

    CGContextSetLineWidth(context, 2.0);

    CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);

    CGContextStrokePath(context);
}

If you want to draw using sprite kit then follow

Mr. Tailor... dont you think that you've given so much elaborated answer?? — Vineet Singh, Oct 09 '13 at 07:26

score 1 · Answer 4 · answered Jan 03 '16 at 14:22

taking Benny's answer to swift, you could do something like:

override func drawRect(rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    let spacerHeight = rect.size.height

    CGContextSetLineWidth(context, 2.0)
    CGContextMoveToPoint(context, 0, (spacerHeight / 4.0))
    CGContextAddLineToPoint(context, 0, 3 * (spacerHeight / 4.0))
    CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
    CGContextStrokePath(context)
}

score 0 · Answer 5 · answered Oct 09 '13 at 05:45

According to Apple's documentation CGRect Returns a rectangle with the specified coordinate and size values:

CGRect CGRectMake (
   CGFloat x,
   CGFloat y,
   CGFloat width,
   CGFloat height
);

So try inverting what you ised to have as the width with the height

score 0 · Answer 6 · edited Oct 09 '13 at 05:51

0

Like you have draw horizontal line just increase the height of UIView and and decrease the width like the below,

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, 2, 200)];

edited Oct 09 '13 at 05:51

Arun

3,406
4
30
55

answered Oct 09 '13 at 05:46

Draw Vertical line in UIView

6 Answers6