iOS自定义TabBar在屏幕旋转时出现重影

自定义TabBar在屏幕旋转时出现重影这种情况以前并没有出现，应该是在iOS11之后才有的，最近又开始开发以前的项目才碰到。看起来是这样的：

竖屏重影

就像两层一样，在图层中看时也确实是多了一层按钮：

竖屏重影图层

所以我想是不是自定义tabBar在旋转的时候不小心多调了一次添加button的方法，然而并没有找到多余的调用，并且在自定义tabBar的添加button和layoutSubviews方法中的断点也并没有走。
但是可以确定的就是在屏幕旋转时出现的重影，因此我把屏幕旋转时对UI的适配代码全注释掉。这样在横屏的时候就能看到了tabBar上的重影。如图：

横屏重影

既然自定义tabbar中布局子视图的代码根本没有多余的调用，为什么看起来效果就像多创建添加了一遍button呢？为了验证这个问题，我在tabbarController中写了个方法来打印tabbar的子视图：

- (void)logTabBarSubviews {
    NSLog(@"subviews.count = %ld", self.tabBar.subviews.count);
    for (NSInteger i = 0; i < self.tabBar.subviews.count; i++) {
        UIView *view = self.tabBar.subviews[i];
        NSLog(@"view.frame = %@, class = %@", NSStringFromCGRect(view.frame), NSStringFromClass(view.class));
    }
}

然后在屏幕旋转的时候调用这个方法，由于是旋转前触发的，就延迟3秒再调用：

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    XXTabBarController *tabbarVC = (XXTabBarController *)self.tabBarController;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        dispatch_async(dispatch_get_main_queue(), ^{
            [tabbarVC logTabBarSubviews];;
        });
    });
}

打印输出：
subviews.count = 7
view.frame = {{0, 0}, {736, 49}}, class = _UIBarBackground
view.frame = {{0, 0}, {414, 49}}, class = XXTabBar
view.frame = {{40, 1}, {128.99999998675452, 48}}, class = UITabBarButton
view.frame = {{173, 1}, {128.00000000165568, 48}}, class = UITabBarButton
view.frame = {{305, 1}, {128.00000000165568, 48}}, class = UITabBarButton
view.frame = {{437, 1}, {127.99999998675452, 48}}, class = UITabBarButton
view.frame = {{569, 1}, {126.99999998675452, 48}}, class = UITabBarButton

可以看出UITabBar上除了自定义的tabBar以外多出了5个UITabBarButton，这些多出的UITabBarButton在图层的左侧栏也能看到，由于xcode在横屏时查看图层会先强制转为竖屏，所以就把打印出来了。（可能横竖屏切换后UITabBar的高度改变了，系统在做横竖屏适配时发现没有UITabBarButton就创建了。因为我这个自定义的tabBar还是UITabBar的子视图。）

UITabBarButton是系统的私有类，我们无法使用和查看。系统既然多为我添加了一层button，那么解决方法就有两种：

一. 让自定义的XXTabBarButton跟系统创建的UITabBarButton同步，也做横竖屏适配。只需要在自定义的tabBarController的屏幕将要旋转方法中重置自定义tabBar的frame即可。

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    self.xxTabBar.frame = CGRectMake(0, 0, size.width, size.height);
    //让栈顶控制器处理UI适配
    UINavigationController *nav = (UINavigationController *)[self.viewControllers objectAtIndex:self.selectedIndex];
    [nav.topViewController viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
}

二. 移除系统添加的UITabBarButton。系统动画一般在0.25秒结束，所以在0.3秒后移除。

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
    // 删除系统自动生成的UITabBarButton
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        dispatch_async(dispatch_get_main_queue(), ^{
            for (UIView *childView in self.tabBar.subviews) {
                if ([childView isKindOfClass:[UIControl class]]) {
                    [childView removeFromSuperview];
                }
            }
            
            //让栈顶控制器处理UI适配
            UINavigationController *nav = (UINavigationController *)[self.viewControllers objectAtIndex:self.selectedIndex];
            [nav.topViewController viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
        });
    });
}

最后结果发现第一种方法的效果不如第二种。

最初的UI设计 第一种方法-同步的效果 第二种方法-移除的效果

可以看出来第一种方法的效果跟原本的初衷不一致了，字体大小还有title和image之间的距离也都变了。
从第一种的图层中也能看出，因为没有移除UITabBarButton，自定义的XXTabBarButton上面还是多了一个UITabBarButton，同时自定义的XXTabBarButton上的title和image都没有了，所以影子才不那么明显。

第一种方法-同步适配的图层

那么使用第二种方法的选择就很明显了。