How to draw a 1px line in storyBoard?

Question

As we know, the table view separator is so thin and beautiful. Sometimes we have to build some separator line in storyboard or nib, the min number is 1, but actually the line appears much thicker than we expected.
My question is how to draw a 1px line in storyboard?

Possible duplicate of [Draw a genuine 1-pixel line, iOS7](http://stackoverflow.com/questions/22745522/draw-a-genuine-1-pixel-line-ios7) — iSkore, Mar 03 '16 at 06:24
[try this solution](http://stackoverflow.com/a/26868504/1219956) for an actual 1 pixel height line, and not a 1 point height line like the rest of these answers seem to be giving — Fonix, Mar 03 '16 at 06:31
Thanks to all answers. All help me a lot, and I found several way out, finally I think Fonix and childrenOurFuture 's answer works for me. — , Mar 03 '16 at 06:35

score 13 · Answer 1 · answered Mar 10 '18 at 08:08

13

Xcode 9 Swift: You can add a thin seperator with 1px line in the Storyboard using UIView.

Under Size Inspector, Just set the height to 1, width example to 360.

Apple documentation on UIView.

answered Mar 10 '18 at 08:08

Cons Bulaquena

2,083
2
26
24

2

You can also use a UILabel, simply set the constraints to the leading and trailing edges of the view controller, set the height to whatever size you want your line to be, set the text color to transparent and the background to the color you want the line to be, finally set the top constrain to the bottom of what you want the line under. if you want space between the line and control change the Constant to whatever look good to you. That's it a line. – Mark Dail Jul 13 '18 at 16:07
4

This makes the line 1pt tall instead of 1px tall. On a phone with 2x density, this will be 2px tall and on phones like the iPhone X it will be 3px tall. – Gordon Tucker Mar 12 '19 at 20:24

score 7 · Accepted Answer · edited Mar 03 '16 at 06:44

I got your point too, finally I find way out.
As we know, if we draw a line and set the height by code, we can set the height equal to (1.0 / [UIScreen mainScreen].scale).
But here, you wanna to draw in storyboard.
My way is subclass UIView or UIImageView, based on your demand as OnePXLine. In OnePXLine class, override layoutSubviews like below:

- (void)layoutSubviews {
     [super layoutSubviews];
     CGRect rect = self.frame;
     rect.size.height = (1 / [UIScreen mainScreen].scale);
     self.frame = rect;
}

And you can draw 1 px line in storyboard by use this class.
Goodluck!

score 3 · Answer 3 · edited Apr 09 '20 at 15:28

3

You can do like in any UIControl/UIElement for this and change the height as 1

If you want to 1 Point use this - 1

If you want to 1pixel Use this - 1.0 / UIScreen.mainScreen().scale

Objective-C

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 1)]; // customize the frame what u need
[lineView setBackgroundColor:[UIColor yellowColor]]; //customize the color
[self.view addSubview:lineView];

Swift

var lineView = UIView(frame: CGRect(x: 0, y: 50, width: self.view.frame.size.width, height: 1))
lineView.backgroundColor = UIColor.yellow
self.view.addSubview(lineView)

If you want a more information see this once

edited Apr 09 '20 at 15:28

Jack T

315
1
6
18

answered Mar 03 '16 at 06:18

Anbu.Karthik

82,064
23
174
143

this technically wont be a 1px height, but would be 1 pt height line, since depending on the displays density, on @2x devices this would actually be 2 pixels thick for example, but maybe the OP doesnt actually want a 1 pixel height line but a 1 pt height – Fonix Mar 03 '16 at 06:25

score 3 · Answer 4 · answered Mar 03 '16 at 06:22

This would help you if you're coding in Swift:

    func lineDraw(viewLi:UIView)
    {
            let border = CALayer()
            let width = CGFloat(1.0)
            border.borderColor = UIColor(red: 197/255, green: 197/255, blue: 197/255, alpha: 1.0).CGColor
            border.frame = CGRect(x: 0, y: viewLi.frame.size.height - width, width:  viewLi.frame.size.width, height: viewLi.frame.size.height)
            border.borderWidth = width
            viewLi.layer.addSublayer(border)
            viewLi.layer.masksToBounds = true
    }

score 1 · Answer 5 · answered Mar 03 '16 at 06:22

you can assign float value for view frame . so what you can do is take any view (lable,textview,view,textfield) and assign height as 0.4f or something programatically and width to match self width.

lable.frame = CGRectMake(0,0,width of self.view,0.4f);

score 1 · Answer 6 · answered Mar 03 '16 at 06:32

Try it in cellForRowAtIndex

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 1)];
separatorLineView.backgroundColor = [UIColor colorWithRed:242/255.0f green:222/255.0f blue:52/255.0f alpha:1.0];
[cell.contentView addSubview:separatorLineView];

score 0 · Answer 7 · answered Jan 30 '21 at 23:23

Swift 5 code base on what @childrenOurFuture answered:

class OnePXLine: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        var rect = self.frame;
        rect.size.height = (1 / UIScreen.main.scale);
        self.frame = rect;
    }
}

How to draw a 1px line in storyBoard?

7 Answers7