Creating a horizontal line

Question

I have two labels that are stacked. If I want a horizontal line between them, is there any other way besides using an image with a UIImageView?

Alkali

Answer 1

Create a UIView with a black background that is 1 pixel high and 320 pixels wide.

Goffer

Crud, took me a minute. – Tidy

This answer feels dismissive. Maybe explain how you would do this in Interface Builder? – Sanders

Creates 2 pixel wide line, see @Phantrast's answer for a thinner line – Linneman

@Sanders what part needs explanation? Just give it constraints. – Reisinger

This is a 10 year old question and answer. Let it go 🤣 – Goffer

Answer 2

Use a UIView:

UIView * separator = [[UIView alloc] initWithFrame:CGRectMake(x, y, 320, 1)];
separator.backgroundColor = [UIColor colorWithWhite:0.7 alpha:1];
[self.view addSubview:separator];
[separator release];

Throughcomposed

Answer 3

While Jasarien's solution is nice and simple, it doesn't create an actual 1 pixel hairline, but a 2 pixel wide line on 2X devices.

I found a blog post on how to create the real 1 pixel thin hairline. We need a utility UIView subclass. For Swift that would be:

import UIKit

class HairlineView: UIView {
    override func awakeFromNib() {
        guard let backgroundColor = self.backgroundColor?.CGColor else { return }
        self.layer.borderColor = backgroundColor
        self.layer.borderWidth = (1.0 / UIScreen.mainScreen().scale) / 2;
        self.backgroundColor = UIColor.clearColor()
    }
}

Pseudaxis

Answer 4

For Horizontal Line

UIView *horizontalLine = [[UIView alloc]initWithFrame:CGRectMake(x cordinate,y cordinate,1,linelenth)];
horizontalLine.backgroundColor = [UIColor blackColor];
[self. view addSubView:horizontalLine];
[horizontalLine release];

For Vertical Line

UIView *verticalLine = [[UIView alloc]initWithFrame:CGRectMake(x cordinate,y cordinate,linelenth,1)];
verticalLine.backgroundColor = [UIColor blackColor];
[self. view addSubView:verticalLine];
[verticalLine release];

Monolingual

Answer 5

Try this

extension CALayer {

    func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {

        let border = CALayer()

        switch edge {
        case .top:
            border.frame = CGRect(x: 0, y: 0, width: frame.width, height: thickness)
        case .bottom:
            border.frame = CGRect(x: 0, y: frame.height - thickness, width: frame.width, height: thickness)
        case .left:
            border.frame = CGRect(x: 0, y: 0, width: thickness, height: frame.height)
        case .right:
            border.frame = CGRect(x: frame.width - thickness, y: 0, width: thickness, height: frame.height)
        default:
            break
        }

        border.backgroundColor = color.cgColor;

        addSublayer(border)
    }

Busywork

Actually I think this should be the right answer! Very nice solution Thx a lot! – Substituent

Answer 6

To create a line in swift from scratch, just do this

let line = UIView()
view.addSubview(line)
line.translatesAutoresizingMaskIntoConstraints = false
line.widthAnchor.constraint(equalToConstant: view.bounds.width - 40).isActive = true
line.heightAnchor.constraint(equalToConstant: 1).isActive = true
line.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
line.topAnchor.constraint(equalTo: userName.bottomAnchor,constant: 20).isActive = true
line.backgroundColor = .gray

The line's width is equal to the device width - some constant and that same constant is added from left so we get a line something like this

---

Cero

Answer 7

You can drop this into a UIView

- (void)drawRect:(CGRect)rect
{

//// General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();

//// Shadow Declarations
CGColorRef outerShadow = [UIColor blackColor].CGColor;
CGSize outerShadowOffset = CGSizeMake(0, 1);
CGFloat outerShadowBlurRadius = 2;

//// Abstracted Graphic Attributes
CGRect rectangleFrame = CGRectMake(0, 0, self.frame.size.width, 3);


//// Rectangle Drawing
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: rectangleFrame];
[[UIColor lightGrayColor] setFill];
[rectanglePath fill];

////// Rectangle Inner Shadow
CGRect rectangleBorderRect = CGRectInset([rectanglePath bounds], -outerShadowBlurRadius, -outerShadowBlurRadius);
rectangleBorderRect = CGRectOffset(rectangleBorderRect, -outerShadowOffset.width, -outerShadowOffset.height);
rectangleBorderRect = CGRectInset(CGRectUnion(rectangleBorderRect, [rectanglePath bounds]), -1, -1);

UIBezierPath* rectangleNegativePath = [UIBezierPath bezierPathWithRect: rectangleBorderRect];
[rectangleNegativePath appendPath: rectanglePath];
rectangleNegativePath.usesEvenOddFillRule = YES;

CGContextSaveGState(context);
{
    CGFloat xOffset = outerShadowOffset.width + round(rectangleBorderRect.size.width);
    CGFloat yOffset = outerShadowOffset.height;
    CGContextSetShadowWithColor(context,
                                CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)),
                                outerShadowBlurRadius,
                                outerShadow);

    [rectanglePath addClip];
    CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(rectangleBorderRect.size.width), 0);
    [rectangleNegativePath applyTransform: transform];
    [[UIColor grayColor] setFill];
    [rectangleNegativePath fill];
}
CGContextRestoreGState(context);
}

Tewell