[英]NSTextField with rounded corners?
I'm trying to draw rounded corners around an NSTextField.我正在尝试在 NSTextField 周围绘制圆角。
I've subclassed NSTextField
, tried the code below, but without any result...我已经对
NSTextField
子类化,尝试了下面的代码,但没有任何结果......
Any ideas?有任何想法吗?
- (void)drawRect:(NSRect)dirtyRect
{
// black outline
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:5 yRadius:5] angle:90];
}
It is better to subclass NSTextFieldCell
to draw rounded corners to preserve NSTextField
functionality, eg:最好将
NSTextFieldCell
子类化以绘制圆角以保留NSTextField
功能,例如:
- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
NSBezierPath *betterBounds = [NSBezierPath bezierPathWithRoundedRect:cellFrame xRadius:CORNER_RADIUS yRadius:CORNER_RADIUS];
[betterBounds addClip];
[super drawWithFrame:cellFrame inView:controlView];
if (self.isBezeled) {
[betterBounds setLineWidth:2];
[[NSColor colorWithCalibratedRed:0.510 green:0.643 blue:0.804 alpha:1] setStroke];
[betterBounds stroke];
}
}
Yields a nice rounded text field that works perfectly (if you had set it to draw a rectangle bezel in the first place, at least):产生一个完美的圆形文本字段(如果您首先将其设置为绘制矩形边框,至少):
You are doing almost everything correct.你做的几乎所有事情都是正确的。 You just need to change the textField's cell and radius which match.
您只需要更改匹配的 textField 的单元格和半径。 Take a look at this:
看看这个:
-(void)awakeFromNib {
[[self cell] setBezelStyle: NSTextFieldRoundedBezel];
}
- (void)drawRect:(NSRect)dirtyRect
{
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:10 yRadius:10] angle:90];
}
This is working for me nicely.这对我来说很好用。
Swift 3 version of @Verious codes, with properties editable in Interface Builder: @Verious 代码的 Swift 3 版本,其属性可在 Interface Builder 中编辑:
class RoundedTextFieldCell: NSTextFieldCell {
@IBInspectable var borderColor: NSColor = .clear
@IBInspectable var cornerRadius: CGFloat = 3
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
let bounds = NSBezierPath(roundedRect: cellFrame, xRadius: cornerRadius, yRadius: cornerRadius)
bounds.addClip()
super.draw(withFrame: cellFrame, in: controlView)
if borderColor != .clear {
bounds.lineWidth = 2
borderColor.setStroke()
bounds.stroke()
}
}
}
Include the QuartzCore framework in your project. 在项目中包含QuartzCore框架。 Import
<QuartzCore/QuartzCore.h>
and use something like the following code (just from the top of my head): 导入
<QuartzCore/QuartzCore.h>
并使用类似下面的代码(仅从头顶开始):
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 20.0f)];
textField.layer.cornerRadius = 5.0f;
textField.layer.masksToBounds = YES;
Voilà, a text field with rounded corners :) Voilà,带圆角的文字字段:)
Edit : just realized this question is related to Mac OS X. Please check the following link: http://cocoatricks.com/2010/06/a-better-looking-text-field/ 编辑 :刚刚意识到这个问题与Mac OS X有关。请查看以下链接: http : //cocoatricks.com/2010/06/a-better-looking-text-field/
Edit 2: created an example project with the rounded text field: http://dl.dropbox.com/u/6487838/RoundedTextField.zip 编辑2:使用圆角文本字段创建了一个示例项目: http : //dl.dropbox.com/u/6487838/RoundedTextField.zip
The easiest one is to do with interface builder, unless you want the corners rounded by some units:最简单的方法是使用界面构建器,除非您希望某些单元使角变圆:
Simply select the border as rounded one :只需将边框选择为圆形:
I did like this and it is working like charm.我确实喜欢这个,它就像魅力一样工作。
yourLableName.wantsLayer = YES;
yourLableName.layer.cornerRadius = yourLableName.frame.size.width/2;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.