Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement a search field like the one in Finder

Finder's search field

In my OS X app (with Cocoa), I want to implement a search field like the one in Finder(see the screen shot above).

I'm considering subclassing NSSearchField and NSSearchFieldCell. The latter should be responsible for managing the "tokens". I have read View Programming Guide, Control and Cell Programming Topics and the docs of NSTokenField[Cell], NSSearchField[Cell], NSCell.

A few things are unclear to me:

1) In the subclass, how can I reuse the magnifier icon which may be provided by NSSearchFieldCell? Is the icon an NSImage? There's an animation for it, what should I learn If I have to implement the animation by myself?

2) What should be used to implement the dropdown button (like the "NAME" button in the example image). What class to use to group the search category (e.g. "NAME") and the keyword (e.g. "yh")? What's the "arrow" following "NAME"?

Any books, articles or other resource recommendations are also welcome.

A similar and related question is Mail like search field with tokens (Mac OS X 10.7)

Update on 2015-07-26:

The usage of NSCell has changed since Yosemite, How to create a custom themed NSButton without subclassing NSButtonCell? is related to that topic. Cells will be deprecated, so it's not wise to use it.

like image 482
LShi Avatar asked Jul 25 '15 14:07

LShi


1 Answers

This looks like fun. I would consider subclassing NSTextField and create a map of images to text entry that you can add to the leftView property of it that comprises all of your search constraints.

When you add the images to depict the search constraints along with the magnifying glass, your text should automatically shift over, and it should look similar to what you have in the photo.

Good luck.

like image 149
dokun1 Avatar answered Oct 24 '22 07:10

dokun1