Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others! Learn more about when to upvote >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

[iPhone] UISearchBar like Contacts

Hi everybody

I've been trying this for hours now and I can't find any help on the iPhone reference library.
I'd like to create a search input like the Contacts application. When you click inside the UISearchBar, the background fades in a black background+ keypad and if you click on the black background, the keypad + background fades out.

How is this done?

Thanks for any hints and pointers 🙂

MacBook Pro, Mac OS X (10.5.4)

Posted on Aug 6, 2008 4:23 PM

Reply
9 replies

Aug 12, 2008 7:53 AM in response to Meerlol

Hi

I've figured it out the other day.
What I did is subclass UIView and added fadeIn/fadeOut methods. I've set the UIView's background color to black and then used UIView beginAnimations:context: and UIView commitAnimations to animate the alpha property.

Keep in mind to hide/unhide (UIView setHidden:) the UIView. Unhide it before you start the fadeIn animation, hide it after the fadeOut animation. This will prevent pressing buttons below the layer.

Override UIView touchesEnded:withEvent: to fade the view out if the user taps on the black area.

This way I got it working. Not sure if it's the right way but seems to be reasonable.

I'll be posting the code later.

Message was edited by: H. Spreiter

Aug 13, 2008 3:05 AM in response to H. Spreiter

Oh sorry, I misread your problem. What I meant was the resize of the UISearchBar and pushing out the index of the table view. The stupid thing is when I resize the frame property of the UISearchBar (with beginAnimations and commitAnimations), the textfield part of the search bar is resize immediately and the background resizes with an animation. It looks really stupid and is useless this way. Have you seen the same problem and found a workaround for this?

Regards,
Herman

Sep 22, 2008 5:46 PM in response to Darkk

I'm using a UISearchBar in my app and I've managed to implement some of the niceties that the search feature in Contacts (and Facebook) have. I created a UIViewController subclass with a dark translucent background and a UITableView for search results. I animate the alpha property of the view controller when the UISearchBar is tapped, and I toggle the hidden property of the table view for search results when text is typed (or cleared).

I'm still trying to figure out how to move the index list out of the way (UITableViewIndex; it's an undocumented class as far as I can tell) when the search bar is tapped. Changing it's frame & bounds doesn't do anything, and changing it's center property causes it to animate from offscreen left to whatever I set it to, which isn't quite what I'm looking to do.

I also haven't figured out how to resize the width of the UISearchBar when the index list is visible, and I haven't figured out how to get the soft shadow below the UISearchBar on top of the search results table view. The latter is likely the result of how my views are layered. My UISearchBar is being inserted into the UITableView using setTableHeaderView:, so it's at the same layer as the main table view. The search results view is placed on top of that, so any shadow that UISearchBar casts off would be covered by the search results view.

Has any one else figured out the proper way of adding a search bar to a UITableView, with all of the niceties? Seems like something that should just be rolled into the API...

Oct 4, 2008 9:57 PM in response to jweisz

Moving the UITableViewIndex is SOLVED. The solution is insane, both because it uses some really cool dynamic method injection, and because it needs such trickery to work.

General method: We're going to add two methods to UITableViewIndex at runtime: one that makes the index move off screen, and one that makes it move back on screen.

Specific details:

1) In your application delegate's header file (YourAppDelegate.h), define two functions.


// for moving around the UITableViewIndex
static BOOL tableViewIndexMoveIn(id self, SEL _cmd);
static BOOL tableViewIndexMoveOut(id self, SEL _cmd);



2) In your application delegate's implementation file (YourAppDelegate.m), import the Objective-C runtime.


#import <objc/runtime.h>



3) Next add the following code to applicationDidFinishLaunching:


- (void)applicationDidFinishLaunching:(UIApplication *)application {
// dynamically add a method to UITableViewIndex that lets us move around the index
Class tvi = NSClassFromString(@"UITableViewIndex");
if ( class_addMethod(tvi, @selector(moveIndexIn), (IMP)tableViewIndexMoveIn, "v@:") ) {
NSLog(@"Added method moveIndexIn to UITableViewIndex");
} else {
NSLog(@"Error adding method moveIndexIn to UITableViewIndex");
}
if ( class_addMethod(tvi, @selector(moveIndexOut), (IMP)tableViewIndexMoveOut, "v@:") ) {
NSLog(@"Added method moveIndexIn to UITableViewIndex");
} else {
NSLog(@"Error adding method moveIndexIn to UITableViewIndex");
}

// do whatever else

return;
}


The magic happens with class_addMethod. This adds a selector to UITableViewIndex called moveIndexIn (note that it does not end with a colon because it doesn't take any arguments) with the implementation specified by tableViewIndexMoveIn. This is how we both identify which subview of UITableView is the index, and how we move the index offscreen & offscreen once we've found it.



4) Add the implementations of moveIndexOut and moveIndexIn to YourAppDelegate.m


#pragma mark UITableViewIndex Added Methods
static BOOL tableViewIndexMoveIn(id self, SEL _cmd) {
UIView *index = (UIView *)self;

[UIView beginAnimations:nil context:nil];
index.center = CGPointMake(index.center.x - 30, index.center.y);
[UIView commitAnimations];

return YES;
}
static BOOL tableViewIndexMoveOut(id self, SEL _cmd) {
UIView *index = (UIView *)self;

[UIView beginAnimations:nil context:nil];
index.center = CGPointMake(index.center.x + 30, index.center.y);
[UIView commitAnimations];

return YES;
}




5) Define a new header file called MovableTableViewIndex.h:


//
// MovableTableViewIndex.h
//
@interface MovableTableViewIndex
- (void)moveIndexIn;
- (void)moveIndexOut;
@end



6) In the class that implements the UISearchBarDelegate protocol (e.g. YourViewController.m), import the new header


#import "MovableTableViewIndex.h"



7) In this same class, add the code to hide the index when the search begins.


- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)theSearchBar {
// move the index out of the way
for ( UIView *view in tableView.subviews ) {
if ( [view respondsToSelector:@selector(moveIndexOut)] ) {
MovableTableViewIndex *index = (MovableTableViewIndex *)view;
[index moveIndexOut];
}
}

// do whatever else

return YES;
}


Note that tableView is your UITableView.



8) Finally, add the code to show the index when the search ends.


- (BOOL)searchBarShouldEndEditing:(UISearchBar *)theSearchBar {
// move the index back
for ( UIView *view in tableView.subviews ) {
if ( [view respondsToSelector:@selector(moveIndexIn)] ) {
MovableTableViewIndex *index = (MovableTableViewIndex *)view;
[index moveIndexIn];
}
}

// do whatever else

return YES;
}



There may be other, more "proper" ways of doing this, but this method works for me, both in the simulator, and (more importantly) on the phone.

One subtlety is that in steps 7 and 8, I use respondsToSelector: to figure out which view is the UITableViewIndex. This is because calling className doesn't actually work on the phone, as in,

if ( [[view className] compare:@"UITableViewIndex"] == NSOrderedSame )


Now I just need to figure out how to shrink the width of the text field in the UISearchBar when the index is shown, and I'm all set!

Dec 24, 2008 12:38 PM in response to jweisz

Hi jweisz ,
Just found your nice post on how to implement the movein/out of the UITableViewIndex.
Have you figured out how to resize the width of the UISearchBar? I have tried something like

UITextField *searchTextField = (UITextField *) [(NSArray *)[searchBar subviews] objectAtIndex:0];
searchTextField.frame = CGRectMake(0, 0, 50, 40);


but it doesn't work. Other properties work fine but I simply cannot change the width.
Any help would be great!

Thanks and happy holidays!
Rodrigo

[iPhone] UISearchBar like Contacts

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.