Over the past few weeks I’ve been doing a series on using the new storyboard feature in XCode for iOS apps.  The short story here is that we can now compose our iOS apps in a completely new way when we are coding apps in iOS 5.  Storyboards are not backward compatible.

Today, I’m going to show you how to using storyboards to create a navigation based app, with and without a table view.  If you haven’t already done so, be sure to read my previous two posts on storyboards in iOS:

• XCode Storyboards In iOS 5
• Using Storyboards To Create A Single View Application

Step One: Create a New Storyboard Based iOS Application

Make sure to have a storyboard app started out (covered in the last post on storyboards).  Your app will look something like this:

(more...)

The UIAlertView class has been available since iOS 2. It is similar to the UIActionSheet class but generally the UIAlertView is used to display an alert message to the user whereas UIActionSheet is useful when you want the user to confirm or choose between a set of options. This post will look at some useful additions to UIAlertView in iOS 5 however that also permit the user to enter some text into the alert view.

The Default Style

Before we look at what has changed in iOS 5 it is probably worth a quick recap of how UIAlertView worked in iOS 4. In all of these examples I will use an alert view with two buttons, a cancel button and an OK button. The code to create and show a basic UIAlertView is as follows:

UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@”DefaultStyle”

                                                    message:@"the default alert view style"
                                                   delegate:self
                                          cancelButtonTitle:@"Cancel"
                                          otherButtonTitles:@"OK", nil];

[alertView show];

(more...)

This is the second post in the App Design Customization series. You can read the first post here where we designed a custom UITableViewCell.

In this post, I will walk you through how you can design the Tab bar in the screenshot below. The Buttons in the Tab bar have icons which you can customize and one of the icons has a red badge on it. We shall also go into detail on how to create the badge

We shall use some iPhone App Design files to implement the look and feel of the app. At the end of this post I will include a sample project and a link to where you can also get design files for your app.

Apple has released some new methods in iOS 5 that makes it so much easier to customize the UIKit controls. Up until now it was a pain to do that.
So let’s get right to it.

(more...)

The example made use of gesture recognizers to allow the master view to be swiped on and off screen. However I created and configured these objects in code rather than with Interface Builder. In this post I will show how easy it is to create gesture recognizers with IB and eliminate some code.

A quick recap

Just by way of a recap the example app I used in the last post made use of three gesture recognizers. These were created in the viewDidLoad method of the DetailViewController and added to the detail view. The code that was used to create the three objects is shown below:

UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc]
                                           initWithTarget:self
                                                   action:@selector(handleSwipeLeft)];
   swipeLeft.direction = UISwipeGestureRecognizerDirectionLeft;
   [self.view addGestureRecognizer:swipeLeft];
   [swipeLeft release];

   UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc]
                                            initWithTarget:self
                                                    action:@selector(handleSwipeRight)];
   swipeRight.direction = UISwipeGestureRecognizerDirectionRight;
   [self.view addGestureRecognizer:swipeRight];
   [swipeRight release];

   UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
                                   initWithTarget:self
                                           action:@selector(handleTap)];
   [self.view addGestureRecognizer:tap];
   [tap release];

Each gesture recognizer is allocated and initialised with its appropriate target and action, there is some gesture specific configuration such as setting the direction of the swipe or the number of taps we expect and then finally the gesture is added to the view.

Gesture Recognizers in Interface Builder

Interface Builder contains a full set of gesture recognizers in its objects library. So instead of creating these objects manually with code we can just drag the required gestures onto our view in the UYLDetailViewController XIB.

Before I do that though I need to correct an error in the example I showed last time. The gesture recognizers were assigned to the top level UIView which includes the toolbar and the toolbar button. This meant that any attempt to tap on the toolbar button was intercepted by the gesture recognizer preventing the button action from being called.

To correct this error I have introduced a subview that covers the entire user interface with the exception of the toolbar. The gesture recognizers can then be assigned to this subview leaving taps on the toolbar button to be handled by the button. For this example we need one Tap Gesture Recognizer object and two Swipe Gesture Recognizer objects. Dragging these objects onto the subview leaves us with a XIB file looks as follows:

It is the second view in this list that the gestures are assigned to. If you find your gestures are not working check the Referencing Outlet Collections connection in Interface Builder to ensure they are connected to the correct view:

With the gestures added, configuration becomes easier as the inspector shows you the gesture specific configuration options. So the tap gesture allows you set to the number of taps and touches you want to recognize:

The swipe gesture allows you set the direction of the swipe (left, right, up, down) and the number of touches:

The final step is to set the target-action for each gesture. Using IB you can create the target-action by control-clicking on the object and then dragging into the implementation file. IB will then prompt you for the name of the action to insert:

Since in this case we already have the action methods defined we will take a slightly different approach. We will first fix the methods to add IBAction hints for Xcode and then using the same control-click method drag each recognizer object to its method. As you mouse over the action it highlights to show the connection:

With the gestures configured and connected there is nothing more to do other than clean up the now redundant code from the view controller. A quick compile and run should confirm that the gestures are recognised and function as before.

The updated Xcode project can be found here or in my CodeExamples github repository.

1. How to create transparent UIBarButtonItem

UIImage *reloadImage = [UIImageimageNamed:@"refresh_button88.png"];
UIButton *reloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
[reloadButton setBackgroundImage:reloadImage forState:UIControlStateNormal]; 
[reloadButton setFrame:CGRectMake(0, 0, 44, 44)];
UIBarButtonItem *reloadBarButton = [[UIBarButtonItemalloc] initWithCustomView:reloadButton];

self.navigationItemsetLeftBarButtonItem:reloadBarButton];

2. How to display transparent image in UIBarButtonItem

UIImageView *brosurkuLogo = [[UIImageViewalloc] initWithImage:[UIImageimageNamed:@"brosurku.jpg"]];
[brosurkuLogo setFrame:CGRectMake(0, 0, 64, 36)];
UIBarButtonItem *brosurkuBarButton = [[UIBarButtonItemalloc] initWithCustomView:brosurkuLogo];
[self.navigationItemsetRightBarButtonItem:brosurkuBarButton];

3. How to change background on UINavigationBar

[navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"header_bar.png"] forBarMetrics:UIBarMetricsDefault];

4. How to change statusbar color

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[application setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
}

5. How to change window pattern

+ (UIWindow *) customizeWindow: (UIWindow *) window withTexture: (NSString *) filename {
[window setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: filename]]];
return window;
}

6. How to create custom searchbar

searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
[searchBar setPlaceholder:@"Search in Plaza Lapiazza, Jakarta Raya, Indonesia"];

//to remove searchbar default background layer
if ([[[searchBar subviews] objectAtIndex:0] isKindOfClass:[UIImageViewclass]]){
[[[searchBar subviews] objectAtIndex:0] removeFromSuperview];
}

//to remove search icon. Note that objectAtIndex = 0 because background layer is already removed
UITextField *textField;
if ([[[searchBar subviews] objectAtIndex:0] isKindOfClass:[UITextFieldclass]]){
textField = [[searchBarsubviews] objectAtIndex:0];
}
textField.leftView = nil;

//to change textField frame
UIImage *searchBarImage = [[UIImage imageNamed:@"search_bar_fit.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[textField setBackground:searchBarImage];

//to change textfield font and size
[textField setFont:[UIFontfontWithName:@"HelveticaNeue-Light" size:15]];\

//to add transparent background on searchbar
[searchBar setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"search_bottom.png"]]];
[[searchBar layer] setOpaque:NO];

7. How to add toolbar

//create button with custom font
UIButton *categoryButton = [UIButton buttonWithType:UIButtonTypeCustom];
[categoryButton setFrame:CGRectMake(10, 0, 300, 44)];
[categoryButton.titleLabel setFont:[UIFontfontWithName:@"HelveticaNeue-Bold" size:15]];
[categoryButton setTitle:@"CATEGORY" forState:UIControlStateNormal];
[categoryButton addTarget:self action:@selector(toggleCategory) forControlEvents:UIControlEventTouchDown];

//to add item in toolbar in this viewcontroller
UIBarButtonItem *toolBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:categoryButton];
[selfsetToolbarItems:[NSArray arrayWithObject:toolBarButtonItem]];

//to display toolbar with custom height
//you must called these two method in viewWillAppear and viewWillDisappear if you only want to display in some view controller only
[self.navigationController setToolbarHidden:YES animated:YES];

[self.navigationController.toolbarsetFrame:CGRectMake(0, 450, 320, 30)];

//to display toolbar in some view controller only
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
[self.navigationController setToolbarHidden:NOanimated:YES];
[self.navigationController.toolbarsetFrame:CGRectMake(0, 450, 320, 30)];
}

- (void)viewWillDisappear:(BOOL)animated{
[super viewWillDisappear:animated];
[self.navigationController setToolbarHidden:YESanimated:YES];
}

8. How to change barStyle to black

[navigationController.toolbar setBarStyle:UIBarStyleBlackOpaque];
[navigationController.navigationBar setBarStyle:UIBarStyleBlackOpaque];

9. How to create button with custom font

//create button with custom font
//titleLabel is read only property, however you can still set font, shadowOffset, and lineBreakMode
UIButton *categoryButton = [UIButtonbuttonWithType:UIButtonTypeCustom];
[categoryButton setFrame:CGRectMake(10, 0, 300, 44)];
[categoryButton.titleLabel setFont:[UIFontfontWithName:@"HelveticaNeue-Bold" size:15]];
[categoryButton setTitle:@"CATEGORY" forState:UIControlStateNormal];
[categoryButton addTarget:selfaction:@selector(toggleCategory) forControlEvents:UIControlEventTouchDown];

If you need to detect gestures in your app, such as taps, pinches, pans, or rotations, it’s extremely easy with the built-in UIGestureRecognizer classes.

In this tutorial, we’ll show you how you can easily add gesture recognizers into your app, both within the Storyboard editor in iOS 5, and programatically.

We’ll create a simple app where you can move a monkey and a banana around by dragging, pinching, and rotating with the help of gesture recognizers.

We’ll also demonstrate some cool extras like:

• Adding deceleration for movement
• Setting gesture recognizers dependency
• Creating a custom UIGestureRecognizer so you can tickle the monkey! :]

This tutorial assumes you are familiar with the basic concepts of ARC and Storyboards in iOS 5. If you are new to these concepts, you may wish to check out our ARC and Storyboard tutorials first.

I think the monkey just gave us the thumbs up gesture, so let’s get started! :]

(more...)