While developing one of our iPad applications, we came across a scenario where we needed a way to simply reposition UIView objects on the screen.

The Problem

You have a View that has a big logo in the center towards the top, and two UITextFields right below it: one to enter your user name, another to enter your password.

While in portrait mode, this makes perfect sense. When you tap on the user name UITextField, the keyboard comes up and you can still clearly see the other UITextField where you need to enter your password in next. However, in landscape mode, because we have less vertical space, if we leave both UITextFields in the middle of the view (right below the logo), when we select the user name UITextField, the virtual keyboard will popup and will cover up the password box. In other words, because there is less vertical space in landscape orientation, the keyboard will come up and cover approximately half the screen's height, which means the password text box will be under the keyboard.

This seems like a pretty straightforward problem. We want to be able to see both UITextFields when the virtual keyboard is on the screen. We could go about creating a separate landscape view, and in some cases, especially where the view is complicated, this might be the better approach. However, it seems like if we just are concerned about the positioning of the UITextFields, instead of created an entirely new landscape view, we should just be able to easily move them when the screen orientation changes.

Repositioning

What would be the best way to reposition the UITextFields? Should I simply just write all of the code out in my ViewController? I didn't think this was the appropriate place to put this logic. Suppose there are other ViewControllers that need to reposition items. Would all of these view controllers need to contain the repositioning methods? What if we have compound views, and the view itself needs to reposition a subview?

If we take this approach, we are going to have the repositioning logic all throughout our application. As a developer, having the same code block in several files is bad news bears. Isn't there a way we can do put most of the logic in one place to use throughout the app?

Solution

We can achieve this by creating a new category on UIView which will contain all of our repositioning logic.

In Xcode, go to File > New and select "File...". Under Cocoa Touch, select "Objective-C category".

On the next screen, name your Category Positioning, and in the "Category on" text box, enter UIView. This will add the category on ALL classes that have UIView as one of their parent classes. Click "Next" and save the files. This process will create two files "UIView+Positioning.h" and "UIView+Positioning.m".

In UIView+Positioning.h, add the following methods

- (void)shiftVertically:(int)points;
- (void)shiftHorizontally:(int)points;

In UIView+Positioning.m add the following code

- (void)shiftVertically:(int)points
{
     CGRect frame = self.frame;
     frame.origin.y = self.frame.origin.y + points;
     [self setFrame:frame];
}

- (void)shiftHorizontally:(int)points
{
     CGRect frame = self.frame;
     frame.origin.x = self.frame.origin.x + points;
     [self setFrame:frame];
}

It is that simple. Now that we have this category complete, we can easily shift any UIView vertically or horizontally on the screen.

For example, for the problem I described above, you might have something like the following in your ViewController class:

/*
 * At the top of our class where we are adding our logic,
 * we need to import the category.
*/
#import "UIView+Positioning.h"

#define VERTICAL_SHIFT 50
#define HORIZONTAL_SHIFT 20
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) {
        // shift the login and password box upwards by 50 points
        [_userNameBox shiftVertically:-VERTICAL_SHIFT];
        [_passwordBox shiftVertically:-VERTICAL_SHIFT];
        // shift both boxes to the right by 20 pixels
        [_userNameBox shiftHorizontally:HORIZONTAL_SHIFT];
        [_passwordBox shiftHorizontally:HORIZONTAL_SHIFT];
    } else {
        // shift the login and password box downward by 50 points
        [_userNameBox shiftVertically:VERTICAL_SHIFT];
        [_passwordBox shiftVertically:VERTICAL_SHIFT];
        // shift both boxes to the left by 20 pixels
        [_userNameBox shiftHorizontally:-HORIZONTAL_SHIFT];
        [_passwordBox shiftHorizontally:-HORIZONTAL_SHIFT];
    }
}

An important thing to note here is that if we want to shift a UIView upward, vertically, we need to shift the view by negative pixels. The y-coordinate 0 is at the top of the screen. Likewise, if we want to shift a UIView to the left, horizontally, we need to shift the view by negative pixels. The x-coordinate 0 is at the left edge of the screen.

We did it!

By creating this objective-c category on UIView, we can easily shift UI elements around the screen in ANY of our ViewControllers. All of the logic to move the elements is located in one central file instead of in each separate ViewController.