Text Field rendering - cocoa

I am trying to build a really simple NSTextField with Interface Builder (XCode 4), but the rendering is really weird with default values:
The only setting I changed is the border style:
My question:
How to display a neat Text Field “squared but with rounded corners”, like in Safari:
How to remove that “overflow:hidden” (sorry for the CSS description) which cuts the focus? < Interface Builder bug, fixed.
Should I design my own, image-based component?
Thank you!

I think I've found exactly what you're looking for. Here's what it looks like:
It's called SSTextField. Download the subclass here: http://cocoatricks.com/2010/06/a-better-looking-text-field/

What you've got at the top is a NSSearchField, which is designed for filtering/searching.
Likely the reason why the focus ring is cut off is because you've got it inside a box or overlapping another object. Don't do that.
There are no standard rounded-corner (as opposed to rounded-end) text fields; if you want one, you'll need to subclass NSTextField yourself, or just wait for Lion where the standard text field will have rounded corners.

Rounded rectangle text fields are pretty straightforward and don't require subclassing the control. Instead you can simply override the way the background CALayer of the control is drawn.
Choose the square-cornered field shape, add the QuartzCore framework to your project, and then #import <QuartzCore/QuartzCore.h>. In your controller's viewDidLoad method you'll modify the text field's layer's cornerRadius property, a la:
myTextField.layer.cornerRadius = 6.0;
Poof, rounded-rectangle text field!

Related

How to implement a horizontal rule in a text view?

Say I have an NSTextView (or a UITextView on iOS) and I want the user to be able to insert horizontal divider rules, like the HTML <hr> tag or this thing:
What's the best way to implement this?
Apple's documentation is very thing on this. So far, I have two ideas:
Insert an NSTextAttachment for each rule and make the layout manager draw it somehow.
Instead of a single text view, use multiple text views with scrolling disabled, put them in a stack view, add separator views between them and then put the stack view in a scroll view.
Both approaches seem a little wrong or inelegant to me because:
From the documentation, it sounds like text attachments are intended for attaching files in the first place. A horizontal rule is not a file.
If I use multiple text views, I'll probably lose some performance tweaks inherent to NSTextView as all the text views need to be loaded and ready for display, no matter where the user has scrolled. In addition, the multiple text view approach would prevent the user from selecting the entire text, which is a requirement in my app.
Any better ideas?
I remember trying to do this years ago. Using NSTextAttachment was the method that worked for me. I bookmarked this conversation with Mike Ferris to help me remember how to do it. I don't have the code anymore, but it was pretty straightforward. I subclassed NSTextAttachmentCell which conforms to NSTextAttachmentCellProtocol. You override cellFrame(for textContainer: NSTextContainer, proposedLineFragment lineFrag: NSRect, glyphPosition position: NSPoint, characterIndex charIndex: Int) which gives you access to its container that can provide its width, and it has the line fragment which gives you the y position of the text above your divider (plus any padding you want). Then just override the draw(withFrame cellFrame: NSRect, in controlView: NSView?) method and draw your divider.
As for the payload NSData, you could do anything with that. Maybe you include the width of the line, it's padding, color, etc? The good thing about using NSTextAttachment is that it stays embedded in the text itself like the <hr> tag.

Finder like coloured labels

OS X Finder has this nice feature to colour-label files. I'm thinking of using a similar feature in my app (that is: use this in an NSTableView/NSOutlineView, not looking to highlight items in Finder from my app). Is this ability somehow available through any of the default user interface classes or would it require a custom implementation?
I have experimented with setting NSTextFieldBezelStyle to NSTextFieldRoundedBezel but this seems to kill the ability to draw a background colour and also defaults to a grey border.
Have a look at the NSURL NSURLLabelColorKey, which is one of the attributes you can set for a URL. You can set these values with setResourceValues:error:
After Edit: Sorry, I misinterpreted the question. I think the easiest way is to use a view based table and put a borderless label inside an NSBox of the custom type. You can give the box rounded corners and a background color with no border, and that looks just like the finder label.
Download the Apple SourceView sample app. It's an NSOutlineView that uses a custom NSTextFieldCell for the drawing; tweak that to draw your custom colors.

Custom drawing selection in NSTextView

I've got a NSTextView where I'd like to control drawing of the highlight/selection. Anyone know which method I have to overwrite so I can control what to draw in the selection rect?
You do not specify what you want to draw, so it's not easy to give you a straight answer.
If it's just an attributed string (Font, Style, Color, Background), you do not need anything fancy, just look for NSAttributedString. There are methods like -setSelectedTextAttributes: and the delegate method -textViewDidChangeSelection:
Generally, you should not subclass NSTextView if you don't have a very good reason to do so. You can do almost anything by just utilizing the usual delegation mechanisms.
If it's something very customized, there is a variety of possibilities depending on if you want to customize the selection (-setSelectedRange:) draw an overlay view (get the frame of the selectedRange) or mess around with the low level layout engine (-layoutManager). It really depends.
If you don't want to use the standard attributes to highlight text, eg by using an CALayer, you can get the rects containing the selection from the layoutManager of the NSTextView.

Cocoa editable text with no input box

I am trying to make an editable text object in cocoa that contains no input box (just the text). I have tried doing this using NSTextField but setDrawsBackground: NO and setBordered: no have not helped. Is there another method for NSTextField that will do this or do I need to use another class? I looked at NSText but this class seems to just be the same as NSTextField with less functionality.
You're headed in the right direction. Are you missing - setBezeled:NO?
It's fairly simple to get what you're looking for through Interface Builder. The only changes required (from its default instance) are to set the border to the dashed (invisible) option and uncheck the Draws Background.

How do you create a custom themed NSButton?

How do you create a custom themed NSButton? I don't mean in a small way like changing the background color or changing from rounded edges to square edges. I want to replace the entire look and feel of the button. Is that even possible to do in Cocoa? Obviously I would have to subclass the NSButton class and go from there. Any help would be much appreciated.
Actually, you need to subclass NSButtonCell. You should read Apple's documentation on this to gain a better understanding of how they interact. You probably will still want to subclass NSButton so that it will use your NSButtonCell subclass, too.
For a button, most of the work is done in drawBezelWithFrame:inView:. If you want to alter the way the text or image is drawn, you would override drawTitle:withFrame:inView: and drawImage:withFrame:inView:.

Resources