I'm creating an ios IPad app that has a UITabBar control positioned at the bottom with 3 MenuItems in it. Normally, when I rotate the device, the tabbar will remain at the bottom in landscape. I'd like to have the TabBar rotate to the left side in Landscape mode, and become a vertical representation. I don't want to create a UIView with buttons if possible, because I'd like the same object to manage both, and I like the convenience of the normal TabBar.
My Plan was to detect the device position, and use a UITransform to rotate the TabBar 90 degrees when in landscape. Let's ignore the icon and text rotation inside for now, and just focus on the overall TabBar itself.
Rotation works, except that it leaves the vertical TabBar in the bottom center of the screen looking very out of place. The next task was to constrain it to the left wall. Normally I am using 3 constraints to hold the TabBar to the Left/Bottom/Right sides. I'm having a lot of trouble finding the right constraints to keep it on the left side correctly.
One main problem is that once the transform is done, height and width attributes are reversed (or also transformed) on the tabbar. So high makes it wider on the screen, and width makes it taller. Using top/bottom constraints along with a height of 49 is what is seemingly required, except the top/bottom +height combo causes a constraint conflict.
I'm attaching my current constraint logic which is reasonably working, yet I can't figure out why I need to hardcode these values as shown. This was the only way to get the visual output on the left side. I'm wondering if there is a cleaner way to do this, perhaps without hardcoded values in there for the constants.
I'm also not sure how I'll end up rotating the text+icons as a next step.
Attached also are how it currently appears. It is green to illustrate clearly but will ultimately be transparent, so the cutoff at the top of landscape won't be a problem.
- (void) adjustViewsForOrientation:(UIInterfaceOrientation) orientation {
switch (orientation)
{
case UIInterfaceOrientationPortrait:
case UIInterfaceOrientationPortraitUpsideDown:
{
//load the portrait view
// revert to normal transform
_tabBar.transform = CGAffineTransformRotate(CGAffineTransformIdentity, M_PI*2);
[self.view removeConstraint:_tabbarConstraintT];
[self.view removeConstraint:_tabbarConstraintR];
[self.view removeConstraint:_tabbarConstraintB];
[self.view removeConstraint:_tabbarConstraintL];
// right space
_tabbarConstraintR = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:0.0];
// bottom space
_tabbarConstraintB = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0.0];
// left space
_tabbarConstraintL = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:0.0];
//[self.view addConstraint:_tabbarConstraintT];
[self.view addConstraint:_tabbarConstraintR];
[self.view addConstraint:_tabbarConstraintB];
[self.view addConstraint:_tabbarConstraintL];
}
break;
case UIInterfaceOrientationLandscapeLeft:
case UIInterfaceOrientationLandscapeRight:
{
//load the landscape view
_tabBar.transform = CGAffineTransformRotate(CGAffineTransformIdentity, M_PI/2);
[self.view removeConstraint:_tabbarConstraintT];
[self.view removeConstraint:_tabbarConstraintR];
[self.view removeConstraint:_tabbarConstraintB];
[self.view removeConstraint:_tabbarConstraintL];
NSLog(@"frame: %f,%f",_tabBar.frame.size.height,_tabBar.frame.size.width);
// top space
_tabbarConstraintT = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:[UIScreen mainScreen].bounds.size.height/2+49];
// left space
_tabbarConstraintL = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:-360.0];
// effective width
_tabbarConstraintR = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem: nil
attribute:NSLayoutAttributeHeight
multiplier:1.0f
constant:49];
// effective height
_tabbarConstraintB = [NSLayoutConstraint constraintWithItem:_tabBar
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem: nil
attribute:NSLayoutAttributeWidth
multiplier:1.0f
constant:[UIScreen mainScreen].bounds.size.height];
[self.view addConstraint:_tabbarConstraintR];
[self.view addConstraint:_tabbarConstraintB];
[self.view addConstraint:_tabbarConstraintT];
[self.view addConstraint:_tabbarConstraintL];
}
break;
case UIInterfaceOrientationUnknown:break;
}
}
来源：https://stackoverflow.com/questions/29085306/ios-ipad-rotating-tabbar-to-left-side-in-landscape-mode-with-transform-and-con