Search This Blog

Friday, August 06, 2010

Right To Left iPhone UI

Peace be upon you.

I have been working on Arabic Apps for iPhone, sometimes I need to do things quickly rather than making the whole UI components from the beginning, I came up with good trick to enable me doing Right To Left UIs with minimum effort, it is not perfect but it is working just fine.

There is something in Core Graphics called Affine transformations , this set of function all you doing anything related to image manipulation, as the UI elements turned to be image at the end, the property "transform", it has the typical 2d Array of image manipulation

based on that fact I started playing with the UI controls here is what I have got playing with the tab bar controller and Table view controller

Normal view, no changes , as u can see the tabs aren't arrange in the Arabic Logic

I started by "rotating" the whole bar 180º

I did loop through the buttons and rotate them 180º so it end up with correct view for the view, flipping flipped image makes it look correct

I have added more than 5 tabs and I have got the same thing with the more button, the items are viewed from left to right

I did loop through the cell of the table and I did rotation for the whole cell, then correcting the text by rotating it 180º .

The thing is little bit UI buggy but with some time it can be fixed to look Ok,
here is the code for this thing, All U have to do is replacing the code for the function "didFinishLaunchingWithOptions"

UIViewController* cont1 = [[UIViewController alloc]init];

UIViewController* cont2 = [[UIViewController alloc]init];

UIViewController* cont3 = [[UIViewController alloc]init];

UIViewController* cont4 = [[UIViewController alloc]init];

UIViewController* cont5 = [[UIViewController alloc]init];

UIViewController* cont6 = [[UIViewController alloc]init];

UINavigationController* contBar = [[UINavigationController alloc] initWithRootViewController:cont1];

contBar.tabBarItem.title = @"واحد";

cont2.tabBarItem.title = @"أثنين";

cont3.tabBarItem.title = @"ثلاث";

cont4.tabBarItem.title = @"أربع";

cont5.tabBarItem.title = @"خمس";

cont6.tabBarItem.title = @"سته";

cont1.view.backgroundColor = [UIColor redColor];

cont2.view.backgroundColor = [UIColor blueColor];

cont3.view.backgroundColor = [UIColor grayColor];

cont4.view.backgroundColor = [UIColor purpleColor];

cont5.view.backgroundColor = [UIColor yellowColor];

const id objs[6] = { contBar,cont2,cont3,cont4,cont5,cont6};

NSArray* vuCont = [NSArray arrayWithObjects:objs count:6];

tabBarController.viewControllers = vuCont;

tabBarController.tabBar.transform = CGAffineTransformMakeRotation(3.142857142857143);

for (id d in tabBarController.tabBar.items) {

UIView* vu = [d valueForKey:@"_view"];

vu.transform = CGAffineTransformMakeRotation(3.142857142857143);


UITableView* tbl = [tabBarController.moreNavigationController.topViewController view];

tbl.separatorColor = [UIColor clearColor];

for (UITableViewCell* cl in [[tabBarController.moreNavigationController.topViewController view] visibleCells]) {

cl.transform = CGAffineTransformMakeRotation(180*0.0174532925);

cl.textLabel.transform = CGAffineTransformMakeRotation(180*0.0174532925);

cl.textLabel.textAlignment = UITextAlignmentRight;


[window addSubview:tabBarController.view];

[window makeKeyAndVisible];

return YES;

Thanks for your time :)

Ahmed Essam