StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POClickable search icon in NSSearchField and fading background
text
Body
copied!<p>I would like to make an NSSearchField, just like the one in Ecoute 3.0. The search icon in the search field should be clickable and expand and collapse if you click it.</p> <p><img src="https://i.stack.imgur.com/RjRiz.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/mSGHh.png" alt="enter image description here"></p> <p>How can you achieve this? I have searched the documentation, but didn't come up with anything useful. I could implement the expanding with the animator proxy, so that is clear.</p> <p>Another thing is that the background fades in/fades out as it expands/collapses. How can I achieve this?</p> <p>I would be thankful for any advices, sample code, etc.</p> <p><strong>EDIT</strong></p> <p>Ok I found the first part out myself.</p> <pre><code>- (void) resetSearchButtonCell { NSButtonCell *c= [[NSButtonCell alloc] init]; [c setButtonType:NSMomentaryChangeButton]; // configure the button [c setBezelStyle:NSRegularSquareBezelStyle]; // configure the button [c setBordered:NO]; [c setBezeled:NO]; [c setEditable:NO]; [c setImagePosition:NSImageOnly]; [c setImage:[NSImage imageNamed:@"search"]]; [c setAlternateImage:[NSImage imageNamed:@"search-pushed"]]; [c setTarget:self]; [c setAction:@selector(_search:)]; [self setSearchButtonCell:c]; } </code></pre> <p>Now, I have made a property <code>isCollapsed</code>, which I toggle in <code>_search:</code>. And in the <code>setIsCollapsed:</code> setter method I do the following:</p> <pre><code>NSRect newRect = self.frame; if (_isCollapsed) { newRect.size.width = kCollapsedWidth; } else { newRect.size.width = kEXpandedWidth; } [[self animator] setFrameSize:newRect.size]; </code></pre> <p>But for some reason the frame is being reset to the initial size, the one set in Interface Builder, when the NSSearchField gets or looses focus.</p> <p>Can anyone tell me why?</p> <p><strong>EDIT</strong></p> <p>I have solved that problem too. It was auto-layout, which messed up the animation. Now, the only thing remaining is the background-alpha, which should change. I could redraw the entire thing, but is there another solution where I could just modify the alpha of only the background and the cancel-button?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload