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

4 comments:

she7ata said...

Good trick although i'm not getting it, tell me, do you flip the whole control using property and then it render it like if it is in the normal direction or do you manipulate the UI as a Bitmap, and if you do that, why do not u just do one loop and other nested to rotate the bitmap on each control-button or tab as far as i understand ?

Ahmed Essam said...

I rotate the whole control then rotate all child buttons

Anonymous said...

But you might get a problem with the table view cells.
because when you rotate the cells the grey line at the bottom of each cell become on the top. which makes a lapse of line for the last cell, and the first cell have strong line above it.
That's easy to understand, and gives you an idea about the structure of the table view and its cells . So the best thing i did was to transform the cell.contentview, not the cell itself... that's in case i'm not using the accessoryview...
If not i guess i 'll have to do it just like you did it in your screenshot, and remove the lines :)

and Thanks alot for this very useful post.
Regards

Ahmed Essam said...

U r welcome, The trick is to do it fast crash thing

doing Full RTL controls might take days, this one will save the day if u r doing something simple.