How to create a line width of 0.5 pixels

Question

In iOS 7, the table view's separator line is thinner than previous iOS, and it looks like its 0.5 px width.

I need to split a cell in 2, with a similar separator line (only vertically) and I want this line to be the same width as the regular separator line.

So I'm wondering what is the best way to add such a line?

If I use a UIView and set its width to 0.5 it won't be visible, and if I set its width to 1.0, then of course I will get a line width of 1.0px not 0.5px.

I tried to use a resource with a retina size of 1.0px but it didn't work either

Answer 1

You set the width as 0.5 - or to make it always 1 pixel then set it to (1.0 / [UIScreen mainScreen].scale)

I've done this before and it's worked fine

I think the reason you can't see it is that you are centering the line exactly in the middle of the screen, which will make the line's origin (320 - 0.5) / 2.0, being an X origin of 159.75 - the 0.75 may be messing things up - or the cell is removing the background color of your view

Answer 2

I did this steps:

1. Create a constraint with 1px height
2. Connect the constraint with IBOutlet (file .m)
3. Change the constant of the constraint for 0.5 in the ViewDidLoad

It works for me.

Answer 3

Assuming you do your cell layouts with Storyboards:

Place an UIView with your desired height and 1px width into your cell. Give it whatever background color you'll like it to have. The standard separator color is approx. RGB(200,199,204).

Then create a subclass of UIView, e.g. HairlineView and override awakeFromNib()

-(void)awakeFromNib {
    self.layer.borderColor = [self.backgroundColor CGColor];
    self.layer.borderWidth = (1.0 / [UIScreen mainScreen].scale) / 2;

    self.backgroundColor = [UIColor clearColor];
}

You're drawing a border around your 1px wide view, which is 2 * 0.25px wide making it 0.5px in total, which is the width you wanted to achieve, then hide the background of the view by setting the background to clear. This last step is important, it won't work without.

Set the type of your view to HairlineView, then it should work.

When doing it programmatically, you'd have to override a different method, e.g. initWithFrame() maybe, since awakeFromNib() only gets called when you create the view from a Storyboard layout.

Answer 4

Some of the answers above are already right, but just an update: in Xcode 8, now you can set constant of layout constraint with a decimal number. No longer need to connect IBOutlet or set constant via User Defined Runtime Attributes.

Answer 5

You can set constant of layout constraint with a decimal number, but UIBuilder have a some bug in Xcode 8,9,10

My solution:

1. Open xib file by source code ]
2. Find your constant of layout constraint and change to 0.5

Answer 6

you can set constraint in storyboard height 0.5f; it won't be visible directly however it is visible under list of of constraints as shown in screenshot

Answer 7

You can use Core Graphics to draw the gradient:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 1.0f)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
[view.layer insertSublayer:gradient atIndex:0];

Answer 8

My approach:

public extension UIView {
    
    func thinDivider() {
        for c in constraints {
            if c.constant == 1 {
                c.constant = (1.0 / UIScreen.main.scale)
            }
        }
    }
    
}

Use wisely (only on dividers).

Note: simply set height constraint to 1 and call view.thinDivider() from code. This is lazy solution to avoid make outlets to every height constraint you need.

Sidenote: settings height to 0.5 in storyboard editor resets to 0 after build and view becomes invisible

Answer 9

my solution:

1. create a view, set a constraint the view: "height = 0px", go to the "Identity Inspector" and edit the priority of this constraint to 750.

2. then select the view and click the "pin" button, add another constraint to this view: "height = 0.5" with priority of 1000. in the "Identity Inspector" you can see the second constraint automatically becomes "height >= 0.5"

works in Xcode 7.3.1

Answer 10

SwiftUI Use pixelLength to get the screen's pixels size which is the minimum line width on any screen and scale.

struct ContentView: View {
    @Environment(\.pixelLength) var pixelLength: CGFloat

    var body: some View {
        Rectangle()
            .foregroundColor(.clear)
            .border(Color.black, width: pixelLength)
     }
}

Answer 11

You Put view in you cell at the bottom. and set its to dark color of the view. and also set its height 0.5 PX. you can got separator of each cell in it.keep its width according to cell width.

Answer 12

instead of trying to set your view height according to separator style.Remove the separator. set cell separator style to StyleNone.
Then add two view with height of .5 or 1 pixel at middle and bottom of cell.Now it looks both same and having a separator style.

Answer 13

Tricky way:

1. In storyboard or xib, set a unique value (e.g. 123) to the line height constraint
2. Open the storyboard or xib with text editor
3. Replace the unique value (e.g. 123) with 0.5

Answer 14

I use this class to draw 1 pixel line (not 1 dot, but one pixel).

class HairlineView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()

        for constraint in self.constraints {
            if let _ = constraint.firstItem as? HairlineView,
               constraint.firstAttribute == .height,
               constraint.firstAnchor.isKind(of: NSLayoutDimension.self),
               constraint.secondItem == nil,
               constraint.secondAnchor == nil {
                constraint.constant = (1.0 / UIScreen.main.scale)
                return
            }
        }
    }
}

Prerequisite for this is to have UIView with height constraint attached. Code will look through existing constraints for the view, find the height constraint and set its value to your_desired_height in pixels (don't confuse with dots).

Code can easily be changed to any value by replacing your_desired_height to whatever value you need.

Answer 15

You can solve this issue in the following way in Xcode 8 / iOS 10, without using constraints:

1. Add a UIView in your storyboard using Interface Builder. Set the properties for this as you see fit, just to have a visual representation of how it would look in your cell (i.e., height = 44, width = 1). At this point it does not matter if the width is larger than the one you need (i.e. 0.5).

2. Create an IBOutlet for this view in your view controller (i.e., UIView *splitLine).

3. In the viewWillAppear: method of your view controller add the following method:

[self.splitLine setFrame:CGRectMake( x, y, 0.5, 44)];

In this method you specify the width of your separating line to 0.5, and the height to whatever values you want. These values overwrite the values specified in the storyboard.