Кто-нибудь имеет проблемы с симулятором iPhone X вокруг компонента UITabBar?

Похоже, у меня рендеринг иконок и заголовка друг над другом, я не уверен, что что-то упустил, я также запустил его в симуляторе iPhone 8 и на одном из реальных устройств, где он выглядит нормально, как показано на раскадровка

iPhone X:

iPhone 8

Я смог обойти эту проблему, просто вызвав invalidateIntrinsicContentSize для UITabBar в viewDidLayoutSubviews.

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self.tabBar invalidateIntrinsicContentSize];
}

Примечание. Нижняя часть панели вкладок должна содержаться в нижней части основного вида, а не в безопасной области, и панель вкладок не должна иметь ограничений по высоте.

Ответ, предоставленный VoidLess, устраняет проблемы TabBar лишь частично. Он устраняет проблемы с макетом внутри панели вкладок, но если вы используете viewcontroller, который скрывает панель вкладок, панель вкладок отображается неправильно во время анимации (для воспроизведения лучше всего иметь 2 сегмента - один модальный и один толчок. Если вы чередуете сегменты, вы можете увидеть панель вкладок, оказываемых не на своем месте). Код ниже устраняет обе проблемы. Хорошая работа, яблоко.

class SafeAreaFixTabBar: UITabBar {

var oldSafeAreaInsets = UIEdgeInsets.zero

@available(iOS 11.0, *)
override func safeAreaInsetsDidChange() {
    super.safeAreaInsetsDidChange()

    if oldSafeAreaInsets != safeAreaInsets {
        oldSafeAreaInsets = safeAreaInsets

        invalidateIntrinsicContentSize()
        superview?.setNeedsLayout()
        superview?.layoutSubviews()
    }
}

override func sizeThatFits(_ size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    if #available(iOS 11.0, *) {
        let bottomInset = safeAreaInsets.bottom
        if bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90) {
            size.height += bottomInset
        }
    }
    return size
}

override var frame: CGRect {
    get {
        return super.frame
    }
    set {
        var tmp = newValue
        if let superview = superview, tmp.maxY != 
        superview.frame.height {
            tmp.origin.y = superview.frame.height - tmp.height
        }

        super.frame = tmp
        }
    }
}

Код Objective-C:

@implementation VSTabBarFix {
    UIEdgeInsets oldSafeAreaInsets;
}


- (void)awakeFromNib {
    [super awakeFromNib];

    oldSafeAreaInsets = UIEdgeInsetsZero;
}


- (void)safeAreaInsetsDidChange {
    [super safeAreaInsetsDidChange];

    if (!UIEdgeInsetsEqualToEdgeInsets(oldSafeAreaInsets, self.safeAreaInsets)) {
        [self invalidateIntrinsicContentSize];

        if (self.superview) {
            [self.superview setNeedsLayout];
            [self.superview layoutSubviews];
        }
    }
}

- (CGSize)sizeThatFits:(CGSize)size {
    size = [super sizeThatFits:size];

    if (@available(iOS 11.0, *)) {
        float bottomInset = self.safeAreaInsets.bottom;
        if (bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90)) {
            size.height += bottomInset;
        }
    }

    return size;
}


- (void)setFrame:(CGRect)frame {
    if (self.superview) {
        if (frame.origin.y + frame.size.height != self.superview.frame.size.height) {
            frame.origin.y = self.superview.frame.size.height - frame.size.height;
        }
    }
    [super setFrame:frame];
}


@end

Есть хитрость, с помощью которой мы можем решить проблему.

Просто поместите ваш UITabBar в UIView.

Это действительно работает для меня.

Или вы можете перейти по этой ссылке для более подробной информации.

переопределить UITabBar sizeThatFits(_)для safeArea

extension UITabBar {
    static let height: CGFloat = 49.0

    override open func sizeThatFits(_ size: CGSize) -> CGSize {
        guard let window = UIApplication.shared.keyWindow else {
            return super.sizeThatFits(size)
        }
        var sizeThatFits = super.sizeThatFits(size)
        if #available(iOS 11.0, *) {
            sizeThatFits.height = UITabBar.height + window.safeAreaInsets.bottom
        } else {
            sizeThatFits.height = UITabBar.height
        }
        return sizeThatFits
    }
}

Я добавил это к viewWillAppearсвоему обычаю UITabBarController, потому что ни один из предоставленных ответов не работал для меня:

tabBar.invalidateIntrinsicContentSize()
tabBar.superview?.setNeedsLayout()
tabBar.superview?.layoutSubviews()

У меня такая же проблема.

Если я установлю любую ненулевую константу в нижнем ограничении UITabBar в безопасную область:

Он начинает работать как положено ...

Это единственное изменение, которое я сделал, и я понятия не имею, почему это работает, но если бы кто-то сделал, я бы хотел знать.

Перемещение панели вкладок на 1 пункт от дна сработало для меня.

Конечно, при этом вы получите пробел, который вам придется каким-то образом заполнить, но текст / значки теперь правильно расположены.

Ага! Это на самом деле волшебство!

Я наконец понял это после нескольких часов ругательства Apple.

UIKit на самом деле обрабатывает это для вас, и кажется, что смещенные элементы панели вкладок происходят из-за неправильной настройки (и, возможно, фактической ошибки UIKit). Нет необходимости в создании подклассов или в фоновом режиме.

UITabBar будет «просто работать», если он ограничен дном суперпредставления, а НЕ нижней безопасной зоной .

Это даже работает в Интерфейсном конструкторе.

Правильная настройка

1. В конструкторе интерфейсов, при просмотре как iPhone X, перетащите UITabBar туда, где он привязан к нижней вкладке безопасной области. Когда вы уроните его, он должен выглядеть правильно (заполните пространство до нижнего края).
2. Затем вы можете сделать «Добавить недостающие ограничения», и IB добавит правильные ограничения, и ваша панель вкладок будет волшебным образом работать на всех iPhone! (Обратите внимание, что нижнее ограничение выглядит так, как будто оно имеет постоянное значение, равное высоте небезопасной области iPhone X, но эта константа фактически равна 0)

Иногда это все еще не работает

Что действительно глупо, так это то, что вы можете увидеть ошибку и в IB, даже если вы добавите точные ограничения, которые IB добавляет в описанных выше шагах!

1. Перетащите UITabBar и не привязывайте его к нижней безопасной области
2. Добавьте все начальные, конечные и нижние ограничения в суперпредставление (небезопасная область). Как ни странно, это исправится, если вы сделаете «Обратный первый и второй элемент» в инспекторе ограничений для нижнего ограничения. _ (ツ) _ / ¯

Исправлено использование подкласса UITabBar для применения safeAreaInsets:

class SafeAreaFixTabBar: UITabBar {

    var oldSafeAreaInsets = UIEdgeInsets.zero

    @available(iOS 11.0, *)
    override func safeAreaInsetsDidChange() {
        super.safeAreaInsetsDidChange()

        if oldSafeAreaInsets != safeAreaInsets {
            oldSafeAreaInsets = safeAreaInsets

            invalidateIntrinsicContentSize()
            superview?.setNeedsLayout()
            superview?.layoutSubviews()
        }
    }

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        if #available(iOS 11.0, *) {
            let bottomInset = safeAreaInsets.bottom
            if bottomInset > 0 && size.height < 50 {
                size.height += bottomInset
            }
        }
        return size
    }
}

Решил для меня по телефону [tabController.view setNeedsLayout];после увольнения модал в блоке завершения.

[vc dismissViewControllerAnimated:YES completion:^(){ 
     UITabBarController* tabController = [UIApplication sharedApplication].delegate.window.rootViewController;
     [tabController.view setNeedsLayout];
}];

UITabBar увеличивается по высоте, чтобы быть над кнопкой / линией home, но рисует подпредставление в его исходном местоположении и накладывает UITabBarItem поверх подпредставления.

В качестве обходного пути вы можете обнаружить iPhone X, а затем уменьшить высоту просмотра на 32 пикселя, чтобы обеспечить отображение панели вкладок в безопасной области над домашней линией.

Например, если вы создаете ваш TabBar программно заменить

self.tabBarController = [[UITabBarController alloc] init];
self.window.rootViewController = self.tabBarController;

С этим:

#define IS_IPHONEX (([[UIScreen mainScreen] bounds].size.height-812)?NO:YES)
self.tabBarController = [[UITabBarController alloc] init];    
self.window.rootViewController = [[UIViewController alloc] init] ;
if(IS_IPHONEX)
    self.window.rootViewController.view.frame = CGRectMake(self.window.rootViewController.view.frame.origin.x, self.window.rootViewController.view.frame.origin.y, self.window.rootViewController.view.frame.size.width, self.window.rootViewController.view.frame.size.height + 32) ;
[self.window.rootViewController.view addSubview:self.tabBarController.view];
self.tabBarController.tabBar.barTintColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;
self.window.rootViewController.view.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;

ПРИМЕЧАНИЕ. Это может быть ошибкой, поскольку размеры представления и расположение панели вкладок устанавливаются ОС. Вероятно, он должен отображаться согласно скриншоту Apple в Руководстве по интерфейсу пользователя iPhone X здесь: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

В моем случае я установил пользовательскую высоту UITabBar в своем UITabBarController, например так:

  override func viewWillLayoutSubviews() {            
        var tabFrame = tabBar.frame
        tabFrame.size.height = 60
        tabFrame.origin.y = self.view.frame.size.height - 60
        tabBar.frame = tabFrame
    }

Удаление этого кода было решением для правильного отображения TabBar на iPhone X.

Самым простым решением, которое я нашел, было просто добавить пространство 0,2 пт между нижней частью панели вкладок и нижней частью safeAreaLayoutGuide.bottomAnchor, как показано ниже.

tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -0.2)

У меня возникла та же проблема, когда я пытался установить фрейм UITabBar в моем пользовательском TabBarController.

self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kTabBarHeight, self.view.frame.size.width, kTabBarHeight);

Когда я просто настроил его на новый размер, проблема исчезла

if(IS_IPHONE_X){
    self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kPhoneXTabBarHeight, self.view.frame.size.width, kPhoneXTabBarHeight);
}
else{
    self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kTabBarHeight, self.view.frame.size.width, kTabBarHeight);
}

Я столкнулся с этим сегодня, когда UITabBar вручную добавлялся в контроллер представления в раскадровке, при выравнивании по нижней части безопасной области с константой 0 я мог бы получить проблему, но изменение ее на 1 решило бы проблему. Поднятие UITabBar на 1 пиксель больше, чем обычно, было приемлемо для моего приложения.

Я почесал голову над этой проблемой. Похоже, это связано с тем, как tabBar инициализируется и добавляется для просмотра иерархии. Я также попробовал вышеуказанные решения, такие как вызов invalidateIntrinsicContentSize, установка фрейма, а также bottomInsetsвнутри подкласса UITabBar. Тем не менее, они работают временно и нарушают какой-то другой сценарий или регрессируют на панель вкладок, вызывая неоднозначную проблему с макетом. Когда я отлаживал проблему, я пытался назначить ограничения по высоте для UITabBar и centerYAnchor, однако ни одна из них не устранила проблему. В отладчике я понял, что высота tabBar была правильной до и после воспроизведения проблемы, что привело меня к мысли, что проблема была в подпредставлениях. Я использовал приведенный ниже код, чтобы успешно решить эту проблему без регресса в любой другой сценарий.

- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    if (DEVICE_IS_IPHONEX())
    {
        [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
            for (UIView *view in self.tabBar.subviews)
            {
                if ([NSStringFromClass(view.class) containsString:@"UITabBarButton"])
                {
                    if (@available (iOS 11, *))
                    {
                        [view.bottomAnchor constraintEqualToAnchor:view.superview.safeAreaLayoutGuide.bottomAnchor].active = YES;
                    }
                }
            }
        } completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
            [self.tabBar layoutSubviews];
        }];
    }
}

Предположения: я делаю это только для iPhone X, поскольку в данный момент он не воспроизводится ни на одном другом устройстве. Основан на предположении, что Apple не изменит название класса UITabBarButton в будущих выпусках iOS. Мы делаем это на UITabBarButton только тогда, когда означает, что если Apple добавляет больше внутренних подпредставлений в UITabBar, нам может потребоваться изменить код, чтобы приспособиться к этому.

Пожалуйста, дайте мне знать, если это работает, будут открыты для предложений и улучшений!

Для этого должно быть просто создать быстрый эквивалент.

Из этого урока:

https://github.com/eggswift/ESTabBarController

и после инициализации панели вкладок пишем эту строку в классе appdelegate

(self.tabBarController.tabBar as? ESTabBar)?.itemCustomPositioning = .fillIncludeSeparator

Решает мою проблему с панелью вкладок.

Надеюсь, это решит вашу проблему

Спасибо

Выберите вкладку и установите флажок «Сохранить относительные поля» в редакторе инспекторов следующим образом:

У меня была похожая проблема, сначала она отображалась корректно, но после настройки badgeValueна одном из tabBarItem она сломала макет. То, что это работало для меня без подкласса, UITabBarбыло этим, на моем уже созданном UITabBarControllerподклассе.

-(void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    NSLayoutYAxisAnchor *tabBarBottomAnchor = self.tabBar.bottomAnchor;
    NSLayoutYAxisAnchor *tabBarSuperviewBottomAnchor = self.tabBar.superview.bottomAnchor;
    [tabBarBottomAnchor constraintEqualToAnchor:tabBarSuperviewBottomAnchor].active = YES;
    [self.view layoutIfNeeded];
}

Я использовал superview tabBar, чтобы убедиться, что ограничения / якоря находятся в одной иерархии представлений, и избежать сбоев.

Исходя из моего понимания, поскольку это, похоже, ошибка UIKit, нам просто нужно переписать / переустановить ограничения панели вкладок, чтобы механизм автоматического размещения снова мог правильно расположить панель вкладок.

Если у вас есть ограничения по высоте для панели вкладок, попробуйте удалить ее.

Столкнулся с той же проблемой, и устранение этого решило проблему.

Я создал новый UITabBarController в своей раскадровке и поместил все контроллеры представления в этот новый UITabBarConttoller. Итак, все хорошо работает в симуляторе iPhone X.

Для iPhone вы можете сделать это, подкласс UITabBarController.

class MyTabBarController: UITabBarController {

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    if #available(iOS 11, *) {
        self.tabBar.heightAnchor.constraint(equalToConstant: 40).isActive = true
        self.tabBar.invalidateIntrinsicContentSize()
    }
  }
}

Перейдите в раскадровку и разрешите использовать Руководство по макету безопасной области и измените класс UITabbarController на MyTabBarController

PS Это решение не тестировалось в случае универсального применения и iPad.

попробуйте изменить заставку с размером @ 3x (3726 × 6624)

Для меня убери [self.tabBar setBackgroundImage:]работу, может быть это баг UIKit

Для меня это исправило все проблемы:

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let currentHeight = tabBar.frame.height
        tabBar.frame = CGRect(x: 0, y: view.frame.size.height - currentHeight, width: view.frame.size.width, height: currentHeight)
    }

Я использовал UITabBarController в раскадровке, и сначала она работала нормально для меня, но после обновления до новой версии XCode она стала вызывать у меня проблемы, связанные с высотой tabBar.

Для меня исправление состояло в том, чтобы удалить существующее UITabBarControllerиз раскадровки и заново создать, перетащив его из библиотеки объектов конструктора интерфейса .

Для тех, кто пишет целиком UITabBarControllerпрограммно, вы можете использоватьUITabBarItem.appearance().titlePositionAdjustment для регулировки позиции заголовка

Так что в этом случае, если вы хотите добавить разрыв между Icon и Title, используйте его в viewDidLoad:

    override func viewDidLoad() {
        super.viewDidLoad()

        // Specify amount to offset a position, positive for right or down, negative for left or up
        let verticalUIOffset = UIOffset(horizontal: 0, vertical: hasTopNotch() ? 5 : 0)

        UITabBarItem.appearance().titlePositionAdjustment = verticalUIOffset
    }

обнаружение, если устройство имеет экран Notch:

  func hasTopNotch() -> Bool {
      if #available(iOS 11.0, tvOS 11.0, *) {
        return UIApplication.shared.delegate?.window??.safeAreaInsets.top ?? 0 > 20
      }
      return false
  }

У меня была та же проблема, которая была решена путем установки элементов tabBar после того, как панель вкладок была выложена.

В моем случае проблема произошла, когда:

1. Есть кастомный контроллер вида
2. UITabBar создается в инициализаторе контроллера представления
3. Элементы панели вкладок устанавливаются перед загрузкой представления
4. В представленной загрузке панель вкладок добавлена ​​в основной вид контроллера представления
5. Затем элементы отображаются, как вы упоминаете.

Я думаю, что это ошибка UIKit от iPhoneX. потому что это работает:

if (@available(iOS 11.0, *)) {
    if ([UIApplication sharedApplication].keyWindow.safeAreaInsets.top > 0.0) {
       self.tabBarBottomLayoutConstraint.constant = 1.0;
    }
} 

Я полагаю, что вы можете расположить панель вкладок напротив нижнего руководства по безопасной компоновке. Вероятно, это не то, что вам нужно, поскольку панель вкладок, похоже, выполняет свои собственные расчеты, чтобы безопасно расположить элементы панели вкладок в верхней части домашней строки в iPhone X. Установите нижнее ограничение к низу суперпредставления . Вы должны увидеть, что он правильно отображается на iPhone X и других iPhone.