UITabBar bileşeninin etrafında iPhone X simülatörü ile sorun yaşayan var mı?

Benimki simgeleri ve başlıkları üst üste yapıyor gibi görünüyor, bir şey eksik olup olmadığımdan emin değilim, iPhone 8 simülatöründe ve aynı şekilde gösterildiği gibi iyi görünen gerçek bir cihazda da çalıştım. hikaye tahtası.

iPhone X:

iPhone 8

Ben sadece viewDidLayoutSubviews UITabBar üzerinde invalidateIntrinsicContentSize çağırarak sorunu gidermek mümkün.

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

Not: Sekme çubuğunun alt kısmının güvenli alan yerine ana görünümün altına yerleştirilmesi gerekir ve sekme çubuğunda yükseklik sınırlaması olmamalıdır.

VoidLess tarafından verilen cevap TabBar sorunlarını sadece kısmen giderir. Sekme çubuğundaki mizanpaj sorunlarını düzeltir, ancak sekme çubuğunu gizleyen viewcontroller'ı kullanırsanız, animasyon sırasında sekme çubuğu yanlış işlenir (yeniden oluşturmak için en iyi 2 segue - bir modal ve bir itme vardır. görünmeyen sekme çubuğuna bakın). Aşağıdaki kod her iki sorunu da giderir. İyi iş elma.

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 kodu:

@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

Sorunu çözebileceğimiz bir hile var.

Sadece UITabBar'ınızı bir UIView içine koyun.

Bu gerçekten benim için çalışıyor.

Veya daha fazla ayrıntı için bu Bağlantıyı takip edebilirsiniz .

UITabBar sizeThatFits(_)safeArea için geçersiz kıl

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

Bunu viewWillAppeargeleneğime ekledim UITabBarController, çünkü sağlanan cevapların hiçbiri benim için işe yaramadı:

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

Ben de aynı problemi yaşadım.

Güvenli alanın UITabBar'ın alt kısıtlamasında sıfır olmayan bir sabit ayarlarsam:

Beklendiği gibi çalışmaya başlar ...

Yaptığım tek değişiklik bu ve neden işe yaradığına dair hiçbir fikrim yok, ama eğer biri olursa bilmek isterim.

Sekme çubuğunu alttan 1 puan uzağa taşımak benim için çalıştı.

Tabii ki, bir şekilde doldurmanız gereken bir boşluk elde edersiniz, ancak metin / simgeler artık düzgün bir şekilde konumlandırılmıştır.

Aha! Aslında sihir!

Sonunda Apple'ı lanetleyerek saatlerce anladım.

UIKit aslında bunu sizin için halleder ve kaydırılan sekme çubuğu öğelerinin yanlış kurulumdan (ve muhtemelen gerçek bir UIKit hatası) kaynaklandığı görülmektedir. Alt sınıflamaya veya arka plan görünümüne gerek yoktur.

UITabBar, denetimin alt kısmıyla sınırlıysa, sadece güvenli alan için değil , "sadece çalışacaktır" .

Arayüz oluşturucuda bile çalışır.

Doğru Kurulum

1. İPhone X olarak görüntülenen arabirim oluşturucuda, bir UITabBar'ı güvenli alt alan ekine yaslandığı yere sürükleyin. Düştüğünüzde, doğru görünmelidir (boşluğu alt kenara kadar doldurun).
2. Daha sonra bir "Eksik Kısıtlamalar Ekle" yapabilirsiniz ve IB doğru kısıtlamaları ekleyecektir ve sekme çubuğunuz sihirli bir şekilde tüm iPhone'larda çalışacaktır! (Alt kısıtlamanın, iPhone X güvensiz alanının yüksekliğine eşit sabit bir değere sahip gibi göründüğünü, ancak sabitin aslında 0 olduğunu unutmayın)

Bazen hala çalışmıyor

Gerçekten aptal olan şey, yukarıdaki adımlarda IB'nin eklediği kısıtlamaları ekleseniz bile, hatayı IB'de de görebilmenizdir!

1. Bir UITabBar'ı sürükleyin ve alt güvenli alan iç metnine yaslama
2. Kontrol etmek için önde gelen, arka ve alt kısıtlamaları ekleyin (güvenli alan değil) Garip bir şekilde, alt kısıtlama için kısıt denetçisinde bir "İlk ve İkinci Öğeyi Ters Çevir" yaparsanız, bu durum kendini düzeltir. _ (ツ) _ / ¯

SafeAreaInsets uygulamak için alt sınıf UITabBar kullanılarak düzeltildi:

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];Tamamlama bloğundaki modal işten çıkarıldıktan sonra beni arayarak çözüldü .

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

UITabBar'ın yüksekliği ana sayfa düğmesinin / satırının üzerinde olacak şekilde artırılıyor, ancak alt görünümü orijinal konumuna çiziyor ve UITabBarItem'i alt görünümün üzerine bindiriyor.

Geçici bir çözüm olarak, iPhone X'i algılayabilir ve sekme çubuğunun ana hattın üzerindeki güvenli alanda görüntülenmesini sağlamak için görünümün yüksekliğini 32 piksel küçültebilirsiniz.

Örneğin, TabBar'ınızı programlı olarak değiştiriyorsanız

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

Bununla:

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

NOT: Görünüm boyutları ve sekme çubuğu düzeni işletim sistemi tarafından ayarlandığından bu bir hata olabilir. Muhtemelen Apple'ın iPhone X İnsan Arayüz Yönergeleri'nde ekran görüntüsüne göre görüntülenmelidir: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Benim durumum UITabBarController benim gibi özel bir UITabBar yüksekliği ayarlamıştı, şöyle:

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

Bu kodun kaldırılması, TabBar'ın iPhone X'de doğru görüntülenmesi için bir çözümdü.

Bulduğum en basit çözüm, sekme çubuğunun tabanı ile safeAreaLayoutGuide.bottomAnchor'un tabanı arasına 0.2 pt boşluk eklemekti.

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

Benim özel TabBarController UITabBar çerçeve ayarlamak için çalışırken aynı sorunu yaşıyordu.

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

Yeni boyuta ayarladığımda sorun ortadan kalktı

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

Ben bugün aa UITabBar ile film şeridinde görünüm denetleyicisine manuel olarak eklendi, güvenli alanın dibine 0 ile sabitlerken sorunu alırdım ama 1 olarak değiştirmek sorunu çözerdi. Uygulamamda UITabBar'ın normalden 1 piksel daha fazla olması kabul edilebilirdi.

Bu problem üzerinde başımı kaşıdım. TabBar öğesinin nasıl başlatıldığı ve görünüm hiyerarşisine nasıl eklendiği ile ilişkili görünmektedir. Ayrıca invalidateIntrinsicContentSize, arama , çerçeve ayarlama ve ayrıca bottomInsetsbir UITabBar alt sınıf içinde çözümleri denedim . Ancak geçici olarak çalışıyor gibi görünüyorlar ve başka bir senaryoyu kırıyorlar veya belirsiz bir düzen sorununa neden olarak sekme çubuğunu geriliyorlar. Sorunu ayıklarken UITabBar ve centerYAnchor'a yükseklik kısıtlamaları atamayı denedim, ancak ikisi de sorunu çözmedi. Görünüm hata ayıklayıcısında, tabBar yüksekliğinin sorun yeniden oluşturulduktan önce ve sonra doğru olduğunu fark ettim, bu da sorunun alt görünümlerde olduğunu düşünmemi sağladı. Başka bir senaryoyu gerilemeden bu sorunu başarıyla düzeltmek için aşağıdaki kodu kullandım.

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

Varsayımlar: Şu anda başka bir cihazda çoğalmadığı için bunu sadece iPhone X için yapıyorum. Apple'ın gelecekteki iOS sürümlerinde UITabBarButton sınıfının adını değiştirmediği varsayımına dayanmaktadır. Bunu UITabBarButton'da yapıyoruz, ancak elma UITabBar'a daha fazla dahili alt görünüm ekliyorsa, bunun için ayarlamak için kodu değiştirmeniz gerekebilir.

Lütfen bunun işe yarayıp yaramadığını, öneri ve iyileştirmelere açık olacağını biliyorum!

Bunun için hızlı bir eşdeğer oluşturmak basit olmalıdır.

Bu öğreticiden:

https://github.com/eggswift/ESTabBarController

ve sekme çubuğunun başlatılmasından sonra bu satırı appdelegate sınıfına yazdıktan sonra

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

Sekme çubuğu sorunumu çözer.

Umarım sorununuzu çözer

Teşekkürler

Sekme çubuğunu seçin ve Inspector Editor'da "Alan Göreli Kenar Boşluklarını Kaydet" onay kutusunu aşağıdaki gibi ayarlayın:

Ben benzer bir sorun vardı, ilk başta doğru render ama badgeValuetabBarItem birinde ayarladıktan sonra düzeni kırdı. Alt sınıflama olmadan benim için çalıştığı UITabBarşey, zaten oluşturulmuş UITabBarControlleralt sınıfımdı.

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

Kısıtlamalar / bağlantıların aynı görünüm hiyerarşisinde olduğundan emin olmak ve çökmeleri önlemek için tabBar denetimini kullandım.

Anladığım kadarıyla, bu bir UIKit hatası gibi göründüğünden, otomatik düzen motorunun sekme çubuğunu tekrar doğru şekilde düzenleyebilmesi için sekme çubuğu kısıtlamalarını yeniden yazmamız / yeniden ayarlamamız gerekir.

Sekme Çubuğu için herhangi bir yükseklik sınırlamanız varsa kaldırmayı deneyin.

Aynı sorunla karşı karşıya kaldı ve bunu kaldırmak sorunu çözdü.

Film şeridimde yeni UITabBarController oluşturdum ve tüm görünüm denetleyicilerini bu yeni UITabBarConttoller'a ittim. Yani, iPhone X simülatöründe hepsi iyi çalışıyor.

İPhone için bunu yapabilirsiniz, 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()
    }
  }
}

Storyboard'a gidin ve Güvenli Alan Düzeni Kılavuzu Kullanmasına izin verin ve UITabbarController sınıfını MyTabBarController olarak değiştirin

PS Bu çözüm, evrensel uygulama ve iPad için test edilmemiştir.

@ 3x boyutuyla açılış ekranını değiştirmeye çalışın (3726 × 6624)

Benim için [self.tabBar setBackgroundImage:]işi kaldır , belki UIKit hatası

Benim için bu tüm sorunları düzeltti:

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

UITabBarControllerFilm şeridinde bir kullanıyordum ve ilk başta benim için iyi çalışıyordu, ancak daha yeni Xcode sürümüne geçtikten sonra bana tabBar'ın yüksekliği ile ilgili sorunlar vermeye başladı.

Benim için düzeltme, var UITabBarControllerolanı storyboard'dan silmek ve arayüz oluşturucu nesneleri kitaplığından sürükleyerek yeniden oluşturmaktı .

UITabBarControllerProgramlı olarak yazanlar UITabBarItem.appearance().titlePositionAdjustmentiçin başlık konumunu ayarlamak için kullanabilirsiniz

Yani bu durumda Simge ve Başlık arasında bir boşluk eklemek istiyorsanız bunu kullanın 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
    }

cihazın Notch ekranı olup olmadığını tespit etme:

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

Sekme çubuğu ortaya koyulduktan sonra tabBar öğelerini ayarlayarak çözüldü aynı sorunu yaşıyordu.

Benim durumumda sorun şu durumlarda oldu:

1. Özel bir görünüm denetleyicisi var
2. Görünüm denetleyicisinin başlatıcısında bir UITabBar oluşturulur
3. Sekme çubuğu öğeleri görünüm yüklenmeden önce ayarlanır
4. Görünüm yüklendiğinde sekme çubuğu görünüm denetleyicisinin ana görünümüne eklenir
5. Sonra, belirttiğiniz gibi öğeler işlenir.

Bu iPhoneX bir hata UIKit olduğunu düşünüyorum. çünkü çalışır:

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

Sekme çubuğunu alt güvenli düzen kılavuzuna göre yerleştirmiş olabileceğinizi düşünüyorum. Sekme çubuğu öğelerini iPhone X'daki ana hattın üzerine güvenli bir şekilde konumlandırmak için kendi hesaplamalarını yapıyor gibi göründüğü için bu muhtemelen istediğiniz şey değildir . Alt sınırınızı denetim alt kısmına göre ayarlayın . İPhone X ve diğer iPhone'larda doğru şekilde yerleştirildiğini görmelisiniz .