Draw top and bottom lines on a UIView

Question

I am trying to draw lines on the top and bottom edge of a UIView. But the line does not get drawn all the way to the right edge of the view controller.

Following is the code I am using to draw the lines:

- (void)addBorders
{
    CALayer *upperBorder = [CALayer layer];
    CALayer *bottomBorder = [CALayer layer];
    upperBorder.backgroundColor = [[UIColor colorWithRed:225/255.0 green:220/255.0 blue:214/255.0 alpha:1.0f] CGColor];
    upperBorder.frame = CGRectMake(0, 0, CGRectGetWidth(self.recentTuneinView.frame), 0.5f);
    bottomBorder.backgroundColor = [[UIColor colorWithRed:154/255.0 green:154/255.0 blue:154/255.0 alpha:1.0f] CGColor];
    bottomBorder.frame = CGRectMake(0, 58.0f, CGRectGetWidth(self.recentTuneinView.frame), 0.5f);
    [self.recentTuneinView.layer addSublayer:upperBorder];
    [self.recentTuneinView.layer addSublayer:bottomBorder];

}

Here is an image showing the problem:

What am I missing in the code?

Thanks.

see this link may be helps you http://stackoverflow.com/questions/17355280/how-to-add-a-border-just-on-the-top-side-of-a-uiview — Anbu.Karthik, Oct 16 '15 at 14:12
it is not clear when your method is invoked; the drawing should happen inside e.g. the `–drawInRect:` method. — holex, Oct 16 '15 at 14:15
it doesnt make it to right then increase the value in the cgrectframe — Teja Nandamuri, Oct 16 '15 at 14:17
@Anbu.Karthik : I had gotten the above code from the link you have given. Thanks — s.d., Oct 16 '15 at 14:20
@Mr.T Solved the problem by increasing the value in the `CGRectGetWidth` — s.d., Oct 16 '15 at 14:24
your code working fine in viewDidLoad(). are you setting constraints properly? — iAnurag, Oct 16 '15 at 14:25
Constraints were fine. Posted the answer below. Thanks everyone. — s.d., Oct 16 '15 at 14:27

score 3 · Accepted Answer · answered Oct 16 '15 at 14:27

Adding sub layers is not a scalable solution like it creates problems when rotating the device or view size change.

My advise is to create a custom view and implement drawRect: something like this:

- (void)drawRect:(CGRect)iRect {
    CGContextRef aContext = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(aContext, 0.5);

    // Set Top Line Color
    CGContextSetStrokeColorWithColor(aContext, [[UIColor colorWithRed:225/255.0 green:220/255.0 blue:214/255.0 alpha:1.0f] CGColor]);

    // Top Line
    CGContextMoveToPoint(aContext, 0, 0);
    CGContextAddLineToPoint(aContext, iRect.size.width, 0);

    // Set Bottom Line Color
    CGContextSetStrokeColorWithColor(aContext, [[UIColor colorWithRed:225/255.0 green:220/255.0 blue:214/255.0 alpha:1.0f] CGColor]);

    // Bottom Line
    CGContextMoveToPoint(aContext, 0, 58.0);
    CGContextAddLineToPoint(aContext, iRect.size.width, 58.0);
}

score 0 · Answer 2 · answered Oct 16 '15 at 14:26

Here is the solution. Above code updated.

- (void)addBorders
{
    CALayer *upperBorder = [CALayer layer];
    CALayer *bottomBorder = [CALayer layer];
    upperBorder.backgroundColor = [[UIColor colorWithRed:225/255.0 green:220/255.0 blue:214/255.0 alpha:1.0f] CGColor];
    upperBorder.frame = CGRectMake(0, 0, CGRectGetWidth(self.recentTuneinView.frame) + 60, 0.5f);
    bottomBorder.backgroundColor = [[UIColor colorWithRed:154/255.0 green:154/255.0 blue:154/255.0 alpha:1.0f] CGColor];
    bottomBorder.frame = CGRectMake(0, 58.0f, CGRectGetWidth(self.recentTuneinView.frame) + 60, 0.5f);
    [self.recentTuneinView.layer addSublayer:upperBorder];
    [self.recentTuneinView.layer addSublayer:bottomBorder];

}

score 0 · Answer 3 · answered Oct 16 '15 at 15:06

Update your code.

CALayer *upperBorder = [CALayer layer];
CALayer *rightBorder = [CALayer layer];
CALayer *bottomBorder = [CALayer layer];
upperBorder.backgroundColor = [[UIColor colorWithRed:225/255.0 green:220/255.0 blue:214/255.0 alpha:1.0f] CGColor];
rightBorder.backgroundColor = upperBorder.backgroundColor;
upperBorder.frame = CGRectMake(0, 0, CGRectGetWidth(recentTuneinView.frame), 0.5f);
rightBorder.frame = CGRectMake(CGRectGetWidth(recentTuneinView.frame)-0.5, 0, 0.5f,CGRectGetHeight(recentTuneinView.frame));

bottomBorder.backgroundColor = [[UIColor colorWithRed:154/255.0 green:154/255.0 blue:154/255.0 alpha:1.0f] CGColor];
bottomBorder.frame = CGRectMake(0, 58.0f, CGRectGetWidth(recentTuneinView.frame), 0.5f);

[recentTuneinView.layer addSublayer:upperBorder];
[recentTuneinView.layer addSublayer:rightBorder];
[recentTuneinView.layer addSublayer:bottomBorder];

Note: You have to add right sublayer frame also.

I only wanted to add lines on top and bottom. Thanks – s.d. Oct 16 '15 at 16:33 — s.d., Oct 16 '15 at 16:33

Draw top and bottom lines on a UIView

3 Answers3