Хтось із проблем із симулятором 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
        }
    }
}

Об'єктивний код 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(_)для безпечної області

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 збільшується у висоту, щоб бути вище домашньої кнопки / лінії, але малює підвід у своєму початковому місці та накладає 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);
}

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

Я почухав голову через цю проблему. Здається, це пов'язано з тим, як ініціалізується та додається tabBar для перегляду ієрархії. Я також спробував вище рішення, такі як виклик invalidateIntrinsicContentSize, встановлення кадру, а також bottomInsetsвсередині підкласу UITabBar. Вони, здається, працюють тимчасово, і вони порушують якийсь інший сценарій або регресують панель вкладок, викликаючи деяку неоднозначну проблему з компонуванням. Коли я налагоджував проблему, я спробував призначити обмеження висоти UITabBar та centerYAnchor, однак це не вирішило проблеми. Я зрозумів, за допомогою налагоджувача, що висота табулятора була правильною до та після відтворення проблеми, що змусило мене думати, що проблема в підзаглядах. Я використовував наведений нижче код, щоб успішно усунути цю проблему, не регресуючи жодного іншого сценарію.

- (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];
}

Я використовував нагляд 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 він почав видавати мені проблеми, пов’язані з висотою табулятора.

Для мене виправлення полягало в тому, щоб видалити існуюче 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.