开发者

How to draw a line in interface builder in Xcode 4

I'd like to draw a simple inset line in Interface Builder to separate some items in a list and make the UI a bit more tidy. I don't see any "line" or similar objects in the objects library and can't seem to find any drawin开发者_如何学编程g commands in Interface builder.


I use a very narrow UIView with backgroundColor set to the appropriate color.


There are no lines in the iPhone UI library. This functionality on Max OS X was supplied by NSBox, but on the iPhone there is no corresponding UI element.


If you're afraid a UIView might affect performance, you can draw a line in code using CoreGraphics' CAShapeLayers.

Every UIView has a CALayer, so draw the line and add it to the views CALayer. You can do this either in a custom UIView's drawRect or in your view controller:

(Make sure to add Quartz framework to your project)

UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0,self.view.frame.size.width, 1)];

//shape layer for the line
CAShapeLayer *line = [CAShapeLayer layer];
line.path = [linePath CGPath];
line.fillColor = [[UIColor blackColor] CGColor];
line.frame = CGRectMake(xPosition, yPosition, self.view.frame.size.width,1);

[self.view.layer addSublayer:line];


In place of view, why not just use a label and set the appropriate background color?


I used a view and made it narrow & changed the color to make it look like a line. But my issue is I am using the line on a vertical scrollview and the lines also get scrolled.


Interface Builder does not allow you to draw the shadows essential for an inset line. If you work with Photoshop you know this.

The following code will draw an "inset" if the line is in front of a white/beige Background.

UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 1.0f)];
line.backgroundColor = [UIColor colorWithRed:(200.0f/255.0f) green:(200.0f/255.0f) blue:(200.0f/255.0f) alpha:1.0f];
line.layer.shadowColor = [UIColor darkGrayColor].CGColor;
line.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
line.layer.shadowRadius = 0.5f;
line.layer.shadowOpacity = 0.4f;
line.layer.masksToBounds =NO;
[Background addSubview:line];

Remember to import < QuartzCore/QuartzCore.h>.


As an alliterative - in Interface Builder, add a view who's height is set to 2 points. Wire up a IBOutlet to that view and set its layer border color and width:

self.mySeparatorLine.layer.borderWidth = 1.0f; self.mySeparatorLine.layer.borderColor = [UIColor lightGrayColor].CGColor;


You can use Progress View as an option for a horizontal line. Just change the tint color and progress to 1 which is 100%.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜