Display toolbar with keyboard in iOS

Keyboard is the most basic component that we use to interact with our application, input data to a field.
In most of the cases the buttons available on default keyboard is enough to fulfill the requirement but to make the application more interactive, intuitive we may tend to add some stuffs, controls over keyboard to aid our requirement in an elegant way.

For an example, consider a situation where user needs to input some description in a UITextView on a screen.
One way could be that you use the keyboard return/done tap event to dismiss the keyboard and that may sound okay, but what if user wanted to supply a line break (paragraph) in his description text. In this case, user has no way but to leave it as it is, henceforth leaving a user down.

Other way could be display a pair of buttons, "Cancel" "Apply" , in the top on the navigation bar of screen. This will again work, but from a users perspective, user needs to type some 100 characters on keyboard and move his thumb all the way up to reach those abandoned buttons. Again a no-no from user point of view.

Now, what if we add a toolbar right above the keyboard with those "Cancel", "Apply" button. Yeay!!!
Like this..Sounds good.

How to do it ???

There could be plenty of ways to show a toolbar above keyboard, like adding a custom view on self view, animating the view all the way from bottom to keyboard height with matching keyboard animation speed and again reversing the sequence when keyboard goes away. Annoying.. (Not to mention, I used to the same before coming to know the best solution).

Yes, the solution itself is in the UITextField and UITextView classes in the "inputAccessoryView" property.
It is an accessory view to display when the UITextField or UITextView becomes first responder. and this accessory view is displayed right above the keyboard, as we wanted for our problem.

For example we can create a custom view or a xib with toolbar and required buttons and set the inputAccessoryView as our view. The supplied view will be displayed above the keyboard.

It can be done as below,

UIView *accessoryView=[[[NSBundle mainBundle] loadNibNamed:@"AccessoryView" owner:self options:nil] lastObject];

    _textField.inputAccessoryView=accessoryView;

//    _textField.inputView=accessoryView;    

    accessoryView=nil;

Here, we are loading a custom xib "AccessoryView" and assigning it to the inputAccessoryView of the current responder textField. Thus the AccessoryView will be displayed above the keyboard with "Cancel" and "Apply" buttons.

To add, "inputView" property of UITextField and UITextView classes is the view to be displayed when they become the first responder.
For example, if in above code "inputAccessoryView" is replaced by "inputView", it will show "AccessoryView" only when the textField becomes first responder i.e, keyboard won't be there.

"inputAccessoryView" are useful in more cases like to display auto complete text, display addition characters, smileys etcs while user types. This may look elegant and usable in any way! Like this one,

More info on "inputAccessoryView" and "inputView" can be found here.

You can download an example code and checkout yourself.

Hope this helps.

Follow @twitterapi

Tweet

Developer Essentials for MacOS Lion and XCode 4.3

In most of the cases as soon as you are done with the installation of MacOS Lion on your Mac, you may probably find below unexpected and unknown things.

So, here is a list of some unexpected situations that you may face and solution for it.

+ MacHD asks for password if you create or delete any folder MacOS Lion?

Solution: Navigate to "MacHD" > Right click on "MacHD" icon > Select "Get Info" > Scroll down to "Sharing & Permissions" and change the privilege to "Read & Write" for all. It will not ask for permission again.

+ How to Show/Unhide "Library" folder MacOS Lion or XCode 4.3?

Solution: Open Terminal from Utilities in Applications directory and run this command, "chflags nohidden ~/Library/", (without inverted commas).

+ Installed Application location in iPhone Simulator in MacOS Lion or XCode 4.3

Solution: Applications installed on iPhone simulator in XCode 4.3 resides at this location ".//Library/Application Support/iPhone Simulator/5.1/Applications/F8CFC9C3-D21C-4E08-920B-4F09256868F6/YourApplicationName.app". You can list all the applications and see their locations with below command "find ./ -name "YourApplicationName.app"" (without first and last inverted commas), and of course you can navigate directly to the application location using "Go To Folder" option in Finder > Go menu drop down.

Hope this helps!

Facebook wall post parameters

As you already know, Facebook iPhone app is the most downloaded app on iTunes AppStore and sharing contents on Facebook has become an usual requirement in iPhone apps.

To post a feed on user's wall, we need to provide a set of values in the form of dictionary.

To post a feed, we use below method of facebook class,

[facebook dialog: @"feed"

               andParams: params

             andDelegate: self];

Here, 'params' is the dictionary that contains set of values to be posted on Facebook users wall.

A typical feed may look like below,

-(void)postToFacebook{

    NSString *description = @"Nice app to see movie trailers!";

    

    NSString* propString = @"{\"Download it free: \":{\"href\":\"http://itunes.apple.com/us/app/itunes-movie-trailers/id471966214?mt=8\",\"text\":\"On iTunes AppStore\"}}";

    

    // post FB dialog

    NSMutableDictionary *params = [NSMutableDictionary dictionaryWithObjectsAndKeys:

                                   @"iTunes Movie Trailers!", @"name",                             // Bold/blue name

                                   @"www.apple.com", @"caption",                                   // 1st line

                                   description, @"description",                                    // 2nd line

                                   @"http://itunes.apple.com/us/app/itunes-movie-trailers/id471966214?mt=8", @"link",

                                   @"http://www.blogcdn.com/www.tuaw.com/media/2011/10/imovietrailersapp.jpg", @"picture",

                                   propString, @"properties",

                                   nil];

    

    [facebook dialog: @"feed"

           andParams: params

         andDelegate: self];

}

Using this, the wall post on web page will look like below,

eg. wall post

Keep integrating Facebook in your application !!!

Custom tab bar in iphone

Tab bar in iPhone application is a desirable control when your application has multiple section and subsections. It takes viewControllers to create the tabs and display on the view/window. The default color of tab bar controller is black.

With introduction of iOS 5.0, we can change its tint color using,

tabBar.tintColor=[UIColor greenColor];

But, this is not enough to satisfy our taste buds. We are not at all going to create a custom tab bar, any inheritance etcs. We are just going to have some Image layers put onto the tab bar. With a little tweak, we can use whatever image we like in tab bar.

For this we will need a set of Image for every tab like,

Now, we will need to initialize our view controller in "didFinishLaunchingWithOptions" method as below,

FirstViewController *firstViewController=[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:[NSBundle mainBundle]];

..

..

FifthViewController *fifthViewController=[[FifthViewController alloc] initWithNibName:@"FifthViewController" bundle:[NSBundle mainBundle]];

and add to tab bar controller,

    NSArray *arr=[NSArray arrayWithObjects:firstViewController,secondViewController,thirdViewController,fourthViewController,fifthViewController,nil];

    tabBarController=[[UITabBarController alloc] init];

    [tabBarController setViewControllers:arr];

Finally add this tab bar controller to the window,

[self.window addSubview:tabBarController.view];

Complete "didFinishLaunchingWithOptions" method in AppDelegate.m of application will typically look like below,

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    // Override point for customization after application launch.

    

    FirstViewController *firstViewController=[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:[NSBundle mainBundle]];

    

    SecondViewController *secondViewController=[[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:[NSBundle mainBundle]];

    

    ThirdViewController *thirdViewController=[[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:[NSBundle mainBundle]];

    

    FourthViewController *fourthViewController=[[FourthViewController alloc] initWithNibName:@"FourthViewController" bundle:[NSBundle mainBundle]];

    

    FifthViewController *fifthViewController=[[FifthViewController alloc] initWithNibName:@"FifthViewController" bundle:[NSBundle mainBundle]];

    

    NSArray *arr=[NSArray arrayWithObjects:firstViewController,secondViewController,thirdViewController,fourthViewController,fifthViewController,nil];

    tabBarController=[[UITabBarController alloc] init];

    [tabBarController setViewControllers:arr];

    [self.window addSubview:tabBarController.view];

    

    [self.window makeKeyAndVisible];

    return YES;

}

Now, the idea is that, we can add an ImageView over the tab bar and update the image with tab change in viewWillAppear method of every viewController as below,

- (void)viewWillAppear:(BOOL)animated {

[super viewWillAppear:animated];

for(UIView *view in self.tabBarController.tabBar.subviews) {

if([view isKindOfClass:[UIImageView class]]) {

[view removeFromSuperview];

}

}

[self.tabBarController.tabBar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]] autorelease] atIndex:1];

}

You can download the example code from here.