Czy ktoś ma problem z symulatorem iPhone'a X wokół komponentu UITabBar?

Mój wydaje się renderować ikony i tytuł jeden na drugim, nie jestem pewien, czy czegoś mi brakuje, uruchomiłem go również w symulatorze iPhone'a 8 i jednym rzeczywistym urządzeniu, na którym wygląda dobrze, tak jak pokazano na plansza fabularna.

iPhone X:

iPhone 8

Udało mi się obejść ten problem, po prostu wywołując invalidateIntrinsicContentSize w UITabBar w viewDidLayoutSubviews.

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

Uwaga: dół paska kart będzie musiał znajdować się na dole widoku głównego, a nie w bezpiecznym obszarze, a pasek kart nie powinien mieć ograniczenia wysokości.

Odpowiedź udzielona przez VoidLess rozwiązuje problemy TabBar tylko częściowo. Naprawia problemy z układem na pasku kart, ale jeśli używasz kontrolera widoku, który ukrywa pasek kart, pasek kart jest nieprawidłowo renderowany podczas animacji (aby go odtworzyć najlepiej 2 mają 2 segmenty - jeden modalny i jedno naciśnięcie. Jeśli zmienisz segmenty, możesz zobacz, że pasek kart jest renderowany nie na miejscu). Poniższy kod rozwiązuje oba problemy. Dobra robota, jabłko.

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
        }
    }
}

Kod celu 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

Istnieje sztuczka, dzięki której możemy rozwiązać problem.

Po prostu umieść swój UITabBar w UIView.

To naprawdę działa na mnie.

Możesz też skorzystać z tego łącza, aby uzyskać więcej informacji.

nadpisanie UITabBar sizeThatFits(_)dla 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
    }
}

Dodałem to do viewWillAppearmojego zwyczaju UITabBarController, ponieważ żadna z udzielonych odpowiedzi nie działała dla mnie:

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

Miałem ten sam problem.

Jeśli ustawię jakąkolwiek niezerową stałą na dolnym ograniczeniu UITabBar do bezpiecznego obszaru:

Zaczyna działać zgodnie z oczekiwaniami ...

To jedyna zmiana, jaką wprowadziłem i nie mam pojęcia, dlaczego to działa, ale jeśli ktoś to zrobi, chciałbym wiedzieć.

Odsuwanie paska kart o 1 punkt od dołu działało dla mnie.

Oczywiście w ten sposób otrzymasz lukę, którą będziesz musiał w jakiś sposób wypełnić, ale tekst / ikony są teraz prawidłowo ustawione.

Aha! To naprawdę magia!

W końcu doszedłem do tego po godzinach przeklinania Apple.

UIKit faktycznie obsługuje to za Ciebie i wygląda na to, że przesunięte elementy paska kart są spowodowane nieprawidłową konfiguracją (i prawdopodobnie rzeczywistym błędem UIKit). Nie ma potrzeby tworzenia podklas ani widoku w tle.

UITabBar „po prostu zadziała”, jeśli jest ograniczony do dolnej części widoku nadzoru, a NIE do dolnej strefy bezpiecznej .

Działa nawet w kreatorze interfejsów.

Prawidłowa konfiguracja

1. W narzędziu do tworzenia interfejsów, wyświetlając jako iPhone X, przeciągnij UITabBar do miejsca, w którym zostanie przyciągnięty do dolnej wstawki bezpiecznego obszaru. Po upuszczeniu powinien wyglądać poprawnie (wypełnij przestrzeń do dolnej krawędzi).
2. Następnie możesz wykonać „Dodaj brakujące ograniczenia”, a IB doda odpowiednie ograniczenia, a pasek kart będzie działał magicznie na wszystkich iPhone'ach! (Zwróć uwagę, że dolne ograniczenie wygląda tak, jakby miało stałą wartość równą wysokości niebezpiecznego obszaru iPhone'a X, ale stała wynosi w rzeczywistości 0)

Czasami to nadal nie działa

Naprawdę głupie jest to, że możesz od razu zobaczyć błąd w IB, nawet jeśli dodasz dokładne ograniczenia, które IB dodaje w powyższych krokach!

1. Wyciągnij UITabBar i nie przyciągaj go do dolnej wstawki bezpiecznego obszaru
2. Dodaj początkowe, końcowe i dolne ograniczenia do superwiewu (nie jest to bezpieczny obszar). Dziwne, to samo się naprawi, jeśli wykonasz „Odwróć pierwszy i drugi element” w Inspektorze ograniczeń dla dolnego ograniczenia. ¯_ (ツ) _ / ¯

Naprawiono przez użycie podklasy UITabBar do zastosowania 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
    }
}

Rozwiązany dla mnie dzwoniąc [tabController.view setNeedsLayout];po odrzuceniu modalu w bloku uzupełniania.

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

Wysokość paska UITabBar rośnie, aby znajdować się powyżej przycisku / linii ekranu głównego, ale rysuje widok podrzędny w jego pierwotnej lokalizacji i nakłada widok podrzędny na widok podrzędny UITabBarItem.

Aby obejść ten problem, możesz wykryć iPhone'a X, a następnie zmniejszyć wysokość widoku o 32 piksele, aby upewnić się, że pasek kart jest wyświetlany w bezpiecznym obszarze nad linią główną.

Na przykład, jeśli tworzysz swój TabBar programowo zamień

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

Z tym:

#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] ;

UWAGA: Może to być błąd, ponieważ rozmiary widoku i układ paska kart są ustawiane przez system operacyjny. Powinien prawdopodobnie wyświetlić się zgodnie ze zrzutem ekranu Apple w Wytycznych dotyczących interfejsu ludzkiego iPhone'a X tutaj: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

W moim przypadku ustawiłem niestandardową wysokość UITabBar w moim UITabBarController, na przykład:

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

Usunięcie tego kodu umożliwiło poprawne wyświetlanie paska TabBar na telefonie iPhone X.

Najprostszym rozwiązaniem, które znalazłem, było po prostu dodanie odstępu 0,2 pt między dolną krawędzią paska kart a dolną częścią pliku safeAreaLayoutGuide.bottomAnchor.

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

Miałem ten sam problem, gdy próbowałem ustawić ramkę UITabBar w moim niestandardowym TabBarController.

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

Kiedy dostosowałem go do nowego rozmiaru, problem zniknął

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);
}

Spotkałem to dzisiaj z aa UITabBar ręcznie dodanym do kontrolera widoku w scenorysie, podczas wyrównywania do dołu bezpiecznego obszaru ze stałą równą 0 dostałbym problem, ale zmiana go na 1 rozwiązałaby problem. Posiadanie paska UITabBar o 1 piksel więcej niż normalnie było do zaakceptowania dla mojej aplikacji.

Podrapałem się w głowę z powodu tego problemu. Wydaje się, że jest to związane ze sposobem inicjowania i dodawania tabBar w celu wyświetlenia hierarchii. Wypróbowałem również powyższe rozwiązania, takie jak wywołanie invalidateIntrinsicContentSize, ustawienie ramki, a także bottomInsetswewnątrz podklasy UITabBar. Wydaje się jednak, że działają one tymczasowo i przerywają jakiś inny scenariusz lub cofają pasek kart, powodując niejednoznaczny problem z układem. Podczas debugowania problemu próbowałem przypisać ograniczenia wysokości do UITabBar i centerYAnchor, jednak żadne z nich nie rozwiązało problemu. W debugerze zdałem sobie sprawę, że wysokość tabBar była poprawna przed i po odtworzeniu problemu, co doprowadziło mnie do wniosku, że problem występuje w podwidokach. Użyłem poniższego kodu, aby pomyślnie rozwiązać ten problem bez cofania żadnego innego scenariusza.

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

Założenia: robię to tylko dla iPhone'a X, ponieważ w tej chwili nie wydaje się, aby odtwarzał się na żadnym innym urządzeniu. Opiera się na założeniu, że Apple nie zmienia nazwy klasy UITabBarButton w przyszłych wydaniach iOS. Robimy to na UITabBarButton tylko wtedy, gdy oznacza to, że jeśli Apple doda więcej wewnętrznych podglądów do UITabBar, może być konieczne zmodyfikowanie kodu, aby dostosować się do tego.

Daj mi znać, czy to zadziała, będzie otwarty na sugestie i ulepszenia!

Stworzenie szybkiego odpowiednika powinno być proste.

Z tego samouczka:

https://github.com/eggswift/ESTabBarController

i po zainicjowaniu paska kart zapisując tę ​​linię w klasie appdelegate

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

Rozwiązuje mój problem z paskiem kart.

Mam nadzieję, że to rozwiązuje twój problem

Dzięki

Wybierz pasek kart i ustaw pole wyboru „Zapisz względne marginesy obszaru” w edytorze Inspector w następujący sposób:

Miałem podobny problem, początkowo był renderowany poprawnie, ale po ustawieniu badgeValuena jednym z tabBarItem zepsuł układ. To, co zadziałało dla mnie bez podklas, UITabBarbyło to, na mojej już utworzonej UITabBarControllerpodklasie.

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

Użyłem tabBar superview, aby upewnić się, że ograniczenia / kotwice są w tej samej hierarchii widoku i uniknąć awarii.

Opierając się na moim zrozumieniu, ponieważ wydaje się to być błędem UIKit, musimy tylko przepisać / ponownie ustawić ograniczenia paska kart, aby silnik automatycznego układu mógł ponownie poprawnie rozmieścić pasek kart.

Jeśli masz jakiekolwiek ograniczenie wysokości paska kart, spróbuj je usunąć.

Zmierzyłem się z tym samym problemem i usunięcie tego rozwiązało problem.

Utworzyłem nowy UITabBarController w mojej planszy i wypchnąłem wszystkie kontrolery widoku do tego nowego UITabBarConttoller. Tak więc wszystko działa dobrze w symulatorze iPhone'a X.

W przypadku iPhone'a możesz to zrobić, Subclass UITabBarController.

class MyTabBarController: UITabBarController {

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

Idź do Storyboard i zezwól na korzystanie z Safe Area Layout Guide i zmień klasę UITabbarController na MyTabBarController

PS To rozwiązanie nie jest testowane w przypadku aplikacji uniwersalnej i iPada.

spróbuj zmienić ekran powitalny z rozmiarem @ 3x (3726 × 6624)

Dla mnie usuń [self.tabBar setBackgroundImage:]pracę, może to błąd UIKit

Dla mnie to rozwiązało wszystkie problemy:

    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)
    }

Używałem UITabBarController w serii ujęć i na początku było to w porządku pracy dla mnie, ale po aktualizacji do nowszej wersji Xcode zaczęło dając mnie kwestie związane z wysokością umieszczenie zakładek.

Dla mnie poprawką było usunięcie istniejącego UITabBarControllerz storyboardu i ponowne utworzenie, przeciągając go z biblioteki obiektów kreatora interfejsu .

Dla tych, którzy piszą w całości UITabBarControllerprogramowo, możesz użyćUITabBarItem.appearance().titlePositionAdjustment do dostosowania pozycji tytułu

Więc w tym przypadku, jeśli chcesz dodać lukę między ikoną i tytułem, użyj jej w 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
    }

wykrywanie, czy urządzenie ma ekran Notch:

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

Miałem ten sam problem, który został rozwiązany przez ustawienie elementów tabBar po ułożeniu paska kart.

W moim przypadku problem wystąpił, gdy:

1. Istnieje niestandardowy kontroler widoku
2. UITabBar jest tworzony w inicjatorze kontrolera widoku
3. Elementy paska kart są ustawiane przed załadowaniem widoku
4. W widoku zostało załadowane pasek zakładek jest dodawany do głównego widoku kontrolera widoku
5. Następnie elementy są renderowane zgodnie z opisem.

Myślę, że to błąd UIKit z iPhoneX. bo to działa:

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

Wydaje mi się, że możesz układać pasek kart z dolnym przewodnikiem po bezpiecznym układzie. Prawdopodobnie nie jest to to, czego chcesz, ponieważ pasek kart wydaje się wykonywać własne obliczenia, aby bezpiecznie pozycjonować elementy paska kart na górze linii głównej w telefonie iPhone X. Skonfiguruj dolne ograniczenie względem dołu nadzoru . Powinieneś zobaczyć, że działa poprawnie na iPhonie X, a także na innych iPhone'ach.