整体思路
- 自动布局（Auto Layout）：
- 使用
NSLayoutConstraint来定义导航栏和标签栏与父视图或其他相关视图之间的约束关系。通过设置不同方向下的约束优先级或者更新约束常量，实现横竖屏切换时的自适应。
- 对于自定义样式，如自定义背景图片，可以在视图加载时设置，自动布局会在横竖屏切换时保持这些样式。按钮位置可以通过约束精确控制，横竖屏切换时，约束会自动调整按钮位置。
- 手动布局：
- 在横竖屏切换时，获取屏幕的尺寸变化，根据新的尺寸手动调整导航栏和标签栏的框架（
frame）。同时，更新自定义样式，如重新设置自定义背景图片的位置和大小，以及按钮的位置等。
关键代码片段
- 自动布局（Auto Layout）：
- 假设导航栏视图为
navigationBarView，标签栏视图为tabBarView，父视图为parentView。
- 加载视图时添加初始约束：
// 导航栏顶部与父视图顶部间距为0
NSLayoutConstraint *topNavBarConstraint = [NSLayoutConstraint constraintWithItem:navigationBarView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0];
// 导航栏左右与父视图左右对齐
NSLayoutConstraint *leftNavBarConstraint = [NSLayoutConstraint constraintWithItem:navigationBarView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:0];
NSLayoutConstraint *rightNavBarConstraint = [NSLayoutConstraint constraintWithItem:navigationBarView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:0];
// 标签栏底部与父视图底部间距为0
NSLayoutConstraint *bottomTabBarConstraint = [NSLayoutConstraint constraintWithItem:tabBarView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0];
// 标签栏左右与父视图左右对齐
NSLayoutConstraint *leftTabBarConstraint = [NSLayoutConstraint constraintWithItem:tabBarView
attribute:NSLayoutAttributeLeading
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeLeading
multiplier:1.0
constant:0];
NSLayoutConstraint *rightTabBarConstraint = [NSLayoutConstraint constraintWithItem:tabBarView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:parentView
attribute:NSLayoutAttributeTrailing
multiplier:1.0
constant:0];
// 添加约束到父视图
[parentView addConstraints:@[topNavBarConstraint, leftNavBarConstraint, rightNavBarConstraint, bottomTabBarConstraint, leftTabBarConstraint, rightTabBarConstraint]];
- 横竖屏切换时更新约束（以更新导航栏高度为例，假设竖屏高度为44，横屏高度为64）：
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
if (UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) {
// 更新导航栏高度约束常量为44
NSLayoutConstraint *heightNavBarConstraint = [NSLayoutConstraint constraintWithItem:navigationBarView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:44];
[navigationBarView addConstraint:heightNavBarConstraint];
} else {
// 更新导航栏高度约束常量为64
NSLayoutConstraint *heightNavBarConstraint = [NSLayoutConstraint constraintWithItem:navigationBarView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:64];
[navigationBarView addConstraint:heightNavBarConstraint];
}
}
- 手动布局：
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
if (UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) {
navigationBarView.frame = CGRectMake(0, 0, size.width, 44);
tabBarView.frame = CGRectMake(0, size.height - 49, size.width, 49);
// 重新设置自定义背景图片
UIImage *portraitNavBarImage = [UIImage imageNamed:@"portraitNavBarBackground"];
[navigationBarView setBackgroundImage:portraitNavBarImage forBarMetrics:UIBarMetricsDefault];
// 重新调整按钮位置
UIButton *navButton = (UIButton *)[navigationBarView viewWithTag:100];
navButton.frame = CGRectMake(size.width - 60, 12, 50, 20);
} else {
navigationBarView.frame = CGRectMake(0, 0, size.width, 64);
tabBarView.frame = CGRectMake(0, size.height - 64, size.width, 64);
// 重新设置自定义背景图片
UIImage *landscapeNavBarImage = [UIImage imageNamed:@"landscapeNavBarBackground"];
[navigationBarView setBackgroundImage:landscapeNavBarImage forBarMetrics:UIBarMetricsDefault];
// 重新调整按钮位置
UIButton *navButton = (UIButton *)[navigationBarView viewWithTag:100];
navButton.frame = CGRectMake(size.width - 80, 22, 70, 20);
}
}
可能遇到的难点及解决方案
- 约束冲突：
- 难点：在横竖屏切换时更新约束可能会导致约束冲突，例如同时存在多个相互矛盾的高度约束。
- 解决方案：在更新约束前，先移除之前添加的相关约束。可以通过保存约束对象，在需要时移除。例如在上述自动布局代码中，将高度约束保存为属性，在更新前移除旧的高度约束。
- 自定义样式错乱：
- 难点：横竖屏切换时，自定义背景图片或按钮位置可能会出现显示异常。
- 解决方案：在横竖屏切换方法中，重新设置自定义样式，确保其在新的屏幕尺寸下正确显示，如上述手动布局代码中重新设置背景图片和按钮位置。
- 性能问题：
- 难点：频繁更新约束或手动调整视图框架可能会影响性能，特别是在复杂布局中。
- 解决方案：对于自动布局，尽量减少不必要的约束更新，使用约束优先级来控制不同方向下的布局。对于手动布局，批量更新视图的框架，避免多次单独的布局操作。
