Make my own iphone app looking like facebook app?

iphone, objective c, tutorial

May 08

Make my own iphone app looking like facebook app?

Today, everyone who has an iPhone, is aware of the powerful and extremely practical properties of the facebook app. As a  developer, you might just want to create something similar, or build such an interface with the use of cool elements such as the following;

  • highlight search
  • custom tabs/buttons/composers
  • pull table down to refresh
  • photo browser / thumbnails
  • styled labels and using the stylesheets like css
  • activity labels / download progress
  • launchers (left image below)
  • url navigation etc…

In order to develop these elements in objective c, one would have to set aside an entire century. Therefore, the questions must be posed, is this goal attainable? if so, how?

Answer:

YES, the development of the elements in objective c can be done. And, this is easier than originally assessed, due to the fact that Facebook developers have made the framework three20 (click to open official website) open source under Apache license.

Here I am going to make the basic tutorial concerning 2 processes:
1) Adding three20 framework to custom Xcode 4 project.
2) Making first application with three20 launcher element.

Requirements:

 

Adding three20 framework to custom Xcode 4 project

1) First of all we need make a new project in Xcode 4 so open your Xcode 4 and go to:
File ->New -> New Project -> Window-Based Application (Device Family: Iphone)
and lets call it “320tutorial“.

2) Next, we need to download the latest three20 framework form github and add it to project.

  1. Start the terminal
  2. Navigate to Xcode projects folder
    1
     cd /XcodeProjectFolder
  3. Clone the newest three20 framework from internet
    1
     git clone git://github.com/facebook/three20.git
  4. Close the Xcode
  5. Attach three20 to your project with python script:
    1
     python three20/src/scripts/ttmodule.py  -p 320tutorial/320tutorial.xcodeproj Three20
  6. Reopen the Xcode

The Xcode sidebar  should look like this:

Making the first application with three20 launcher element

The whole application is going to look like this:

 

1) Import icons and [optional] some example classes: Download the icons pack and classes from here. As you can see there are some icons named @2x.png (this gives support for iphone 4 retina display as well).

2) Import icons to project: Make new group named “Resources” in sidebar, right click on this and choose “Add files to 320tutorial”, select icons and add them (check “Copy items into destination group’s folders” checkbox).

3) Open the 320tutorial folder and make a new group “ViewController.” Right click on it and import all downloaded classes into it.
(total 4 files: StyleTestController.h/m and TabBarTestController.h/m)

4) Create the launcher class: File->New File->Objective-C class->Subclass of “TTViewController“->Save as “LauncherViewController”->Save

5) Import the framework to the class and make TTLauncherView object class variable in LauncherViewController.h.

1
2
3
4
5
6
7
8
9
10
11
12
#import <Three20/Three20.h> // import Three20 to launcherclass
#import <Foundation/Foundation.h>
// import the two three20 example classes
#import "StyleTestController.h"
#import "TabBarTestController.h"

// add delegate to handle touches and editing of TTLauncherView class
@interface LauncherViewController : TTViewController <TTLauncherViewDelegate> {
TTLauncherView* launcherView; //add the TTLauncherView object
TTNavigator* navigator; //add the url navigator object
}
@end

6) We are going to add the following functionality to the LauncherViewController.m:

  • initialization & memory management
  • launcher view load (TTNavigator, TTURLMap , Pages, Querying)
    TTNavigator is used with TTURLMap used to bring most intuitive and best iPhone navigation system thus far.
    TTLauncherView.pages are all items in one launcher object.
    Additional Querying can be done on TTLauncherView to change one TTLauncherItem (good for updating).
  • user action listener and delegate methods
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
#import "LauncherViewController.h"

@implementation LauncherViewController

// standard initialization
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.title = @"Launcher";
}

return self;
}

// mm functions
- (void)dealloc {
[launcherView release];
[navigator release];
[super dealloc];
}

// load view will be loaded first time when we open the view
- (void)loadView {
[super loadView]; // send to super class
launcherView = [[TTLauncherView alloc] initWithFrame:self.view.bounds]; // create TTLauncherView
launcherView.backgroundColor = [UIColor blackColor];
// delegate the actions on this class @see TTLauncherViewDelegate down
launcherView.delegate = self;
// how many columns
launcherView.columnCount = 3;
self.title = @"Launcher";

navigator = [TTNavigator navigator]; // create the navigator
navigator.supportsShakeToReload = YES; // if you shake the iphone , he is going to reaload the whole TTLauncherView
navigator.persistenceMode = TTNavigatorPersistenceModeAll; // and he will save the data :)

TTURLMap* map = navigator.URLMap; // mapper pointer for our navigation

// create the first "root" node
[map                    from: @"tt://launcher"
toSharedViewController: [LauncherViewController class]];

// add "children nodes"
// tansition is animation style
// is going to open every request with webbrowser if not recognized in map
[map            from: @"*"
parent: @"tt://launcher"
toViewController: [TTWebController class]
selector: nil
transition: 4];

// is going to open some styletest/tabbartest controller form 320 exmaple classes
[map            from: @"tt://styleTest"
parent: @"tt://launcher"
toViewController: [StyleTestController class]
selector: nil
transition: 5];
[map            from: @"tt://tabbar"
parent: @"tt://launcher"
toViewController: [TabBarTestController class]
selector: nil
transition: 6];

// multiarray that contains all "pages" icons and their links,options,names...
// ending always with nil
launcherView.pages = [NSArray arrayWithObjects:
[NSArray arrayWithObjects:
[[[TTLauncherItem alloc] initWithTitle:@"Galic-design.com"
image:@"bundle://eng.png"
URL:@"http://galic-design.com" canDelete:NO] autorelease],
[[[TTLauncherItem alloc] initWithTitle:@"Styles"
image:@"bundle://gicon.png"
URL:@"tt://styleTest" canDelete:YES] autorelease],
[[[TTLauncherItem alloc] initWithTitle:@"TabBar test"
image:@"bundle://photo.png"
URL:@"tt://tabbar" canDelete:YES] autorelease],
[[[TTLauncherItem alloc] initWithTitle:@"Yahoo"
image:@"bundle://photo.png"
URL:@"http://yahoo.com" canDelete:YES] autorelease],
nil],
[NSArray arrayWithObjects:
[[[TTLauncherItem alloc] initWithTitle:@"Google"
image:@"bundle://gicon.png"
URL:@"http://google.com" canDelete:YES] autorelease],
[[[TTLauncherItem alloc] initWithTitle:@"Three20 API"
image:@"bundle://photo.png"
URL:@"http://api.three20.info" canDelete:YES] autorelease],

nil],
nil
];

[self.view addSubview:launcherView]; //fetching to subview (now is visible)

// querying option and post changes
TTLauncherItem* item = [launcherView itemWithURL:@"http://galic-design.com"];
item.badgeNumber = 4;

item = [launcherView itemWithURL:@"http://google.com"];
item.badgeNumber = 31;

item = [launcherView itemWithURL:@"tt://styleTest"];
item.badgeValue = @"Sly!";

}

#pragma mark -
#pragma TTLauncherViewDelegate

// if user selects one item , call the navigator with that url
- (void)launcherView:(TTLauncherView*)launcher didSelectItem:(TTLauncherItem*)item {
NSLog(@"Did select item %@",[item title]);
[navigator openURLAction:[TTURLAction actionWithURLPath:item.URL]];
}

// if user wants to edit the items, display done button
- (void)launcherViewDidBeginEditing:(TTLauncherView*)launcher {
[self.navigationItem setRightBarButtonItem:[[[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemDone
target:launcherView action:@selector(endEditing)] autorelease] animated:YES];
}
// if user is finished with editing , hide done button
- (void)launcherViewDidEndEditing:(TTLauncherView*)launcher {
[self.navigationItem setRightBarButtonItem:nil animated:YES];
}

@end

7) Connecting the _20tutorialAppDelegate with  LauncherViewController

Add this to _20tutorialAppDelegate.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#import "_20tutorialAppDelegate.h"
#import "LauncherViewController.h" // import the classes

@implementation _20tutorialAppDelegate

@synthesize window=_window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
LauncherViewController *launcherView = [[LauncherViewController alloc]init]; // allocate launcherview
// create navigation controller with that viewController
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:launcherView];
navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;

// add it to window
[self.window addSubview:navigationController.view];
[self.window makeKeyAndVisible];
return YES;
}

- (void)dealloc
{
[_window release];
[super dealloc];
}

@end

There you go, you have succeeded in creating (if everything went according to plan) a similar application workflow like the facebook app :)
If you find some mistakes, please contact me a.s.a.p. so I can correct them.

This code is available on github.

  1. Max / 23/01/2012

    Excellent! Very nice tutorial. Exactly what I was looking for. Thank you very much! The code works 100%.

    Reply

Leave a Reply

Buffer
GetSocial