Adakah yang mengalami masalah dengan simulator iPhone X di sekitar komponen UITabBar?

Milik saya tampaknya merender ikon dan judul di atas satu sama lain, saya tidak yakin apakah saya melewatkan sesuatu, saya juga menjalankannya di simulator iPhone 8, dan satu perangkat sebenarnya yang terlihat baik-baik saja seperti yang ditunjukkan pada papan cerita.

iPhone X:

iPhone 8

Saya bisa mengatasi masalah hanya dengan memanggil invalidateIntrinsicContentSize di UITabBar di viewDidLayoutSubviews.

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

Catatan: Bagian bawah bilah tab harus berada di bagian bawah tampilan utama, bukan area aman, dan bilah tab tidak boleh memiliki batasan ketinggian.

Jawaban yang diberikan oleh VoidLess hanya memperbaiki sebagian masalah TabBar. Ini memperbaiki masalah tata letak dalam tabbar, tetapi jika Anda menggunakan viewcontroller yang menyembunyikan tabbar, tabbar dirender secara tidak benar selama animasi (untuk mereproduksinya adalah yang terbaik 2 memiliki 2 segmen - satu modal dan satu dorongan. Jika Anda mengganti gerakan, Anda dapat lihat bilah tab dirender tidak pada tempatnya). Kode di bawah memperbaiki kedua masalah tersebut. Kerja bagus apel.

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

Kode 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

Ada trik yang bisa kita gunakan untuk memecahkan masalah.

Letakkan saja UITabBar Anda di dalam UIView.

Ini benar-benar berhasil untuk saya.

Atau Anda dapat mengikuti Tautan ini untuk lebih jelasnya.

menimpa UITabBar sizeThatFits(_)untuk 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
    }
}

Saya menambahkan ini ke viewWillAppearkebiasaan saya UITabBarController, karena tidak ada jawaban yang diberikan yang berhasil untuk saya:

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

Saya memiliki masalah yang sama.

Jika saya menetapkan konstanta bukan nol pada batasan bawah UITabBar ke area aman:

Ini mulai bekerja seperti yang diharapkan ...

Itulah satu-satunya perubahan yang saya buat dan saya tidak tahu mengapa itu berhasil, tetapi jika ada yang mau, saya ingin tahu.

Memindahkan bilah tab 1 poin dari bawah berhasil untuk saya.

Tentu saja Anda akan mendapatkan celah dengan melakukannya yang harus Anda isi dengan cara tertentu, tetapi teks / ikon sekarang diposisikan dengan benar.

Aha! Ini benar-benar ajaib!

Saya akhirnya menemukan ini setelah berjam-jam mengutuk Apple.

UIKit sebenarnya menangani ini untuk Anda, dan tampaknya item tab bar yang digeser disebabkan oleh pengaturan yang salah (dan mungkin bug UIKit sebenarnya). Tidak perlu subclass atau tampilan latar belakang.

UITabBar akan "bekerja" jika dibatasi ke bawah superview, BUKAN ke area aman bawah .

Ia bahkan bekerja di pembuat Antarmuka.

Setup yang Benar

1. Di pembuat antarmuka, dilihat sebagai iPhone X, seret UITabBar ke tempat terkunci ke inset area aman bawah. Saat Anda menjatuhkannya, itu akan terlihat benar (isi ruang sampai ke tepi bawah).
2. Anda kemudian dapat melakukan "Tambahkan Batasan yang Hilang" dan IB akan menambahkan batasan yang benar dan bilah tab Anda akan berfungsi secara ajaib di semua iPhone! (Perhatikan bahwa batasan bawah sepertinya memiliki nilai konstan yang sama dengan ketinggian area tidak aman iPhone X, tetapi konstanta sebenarnya adalah 0)

Terkadang masih tidak berhasil

Apa yang benar-benar bodoh adalah bahwa Anda sebenarnya dapat melihat bug di IB juga, bahkan jika Anda menambahkan batasan persis seperti yang ditambahkan IB pada langkah-langkah di atas!

1. Tarik UITabBar dan jangan pasang ke bagian bawah area aman
2. Tambahkan batasan leading, trailing dan bottom semua ke superview (bukan area aman). Anehnya, ini akan memperbaiki dirinya sendiri jika Anda melakukan "Reverse First And Second Item" di pemeriksa batasan untuk batasan bawah. ¯_ (ツ) _ / ¯

Diperbaiki dengan menggunakan subclass UITabBar untuk menerapkan 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
    }
}

Dipecahkan untuk saya dengan menelepon [tabController.view setNeedsLayout];setelah menutup modal di blok penyelesaian.

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

UITabBar bertambah tingginya agar berada di atas tombol / garis beranda, tetapi menggambar subview di lokasi aslinya dan menghamparkan UITabBarItem di atas subview.

Sebagai solusinya, Anda dapat mendeteksi iPhone X dan kemudian mengecilkan tinggi tampilan sebesar 32px untuk memastikan bilah tab ditampilkan di area aman di atas garis beranda.

Misalnya, jika Anda membuat TabBar secara terprogram, ganti

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

Dengan ini:

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

CATATAN: Ini bisa jadi bug, karena ukuran tampilan dan tata letak bilah tab diatur oleh OS. Mungkin seharusnya ditampilkan sesuai tangkapan layar Apple di iPhone X Human Interface Guidelines di sini: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Kasus saya adalah saya telah menetapkan tinggi UITabBar khusus di UITabBarController saya, seperti ini:

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

Menghapus kode ini adalah solusi agar TabBar ditampilkan dengan benar di iPhone X.

Solusi paling sederhana yang saya temukan adalah dengan menambahkan spasi 0,2 pt antara bagian bawah bilah tab dan bagian bawah safeAreaLayoutGuide.bottomAnchor seperti itu.

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

Saya mengalami masalah yang sama ketika saya mencoba mengatur bingkai UITabBar di TabBarController kustom saya.

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

Ketika saya menyesuaikannya dengan ukuran baru, masalahnya hilang

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

Saya menemui ini hari ini dengan aa UITabBar yang ditambahkan secara manual ke pengontrol tampilan di storyboard, ketika menyelaraskan ke bagian bawah area aman dengan konstanta 0 saya akan mendapatkan masalah tetapi mengubahnya menjadi 1 akan memperbaiki masalah. Memiliki UITabBar hingga 1 piksel lebih dari biasanya dapat diterima untuk aplikasi saya.

Saya telah menggaruk-garuk kepala karena masalah ini. Tampaknya terkait dengan bagaimana tabBar diinisialisasi dan ditambahkan ke hierarki tampilan. Saya juga mencoba solusi di atas seperti memanggil invalidateIntrinsicContentSize, mengatur frame, dan juga bottomInsetsdi dalam subclass UITabBar. Mereka tampaknya bekerja namun untuk sementara dan mereka melanggar beberapa skenario lain atau kemunduran bilah tab dengan menyebabkan beberapa masalah tata letak yang ambigu. Ketika saya men-debug masalah, saya mencoba menetapkan batasan ketinggian ke UITabBar dan centerYAnchor, namun tidak ada yang memperbaiki masalah. Saya menyadari dalam tampilan debugger bahwa tinggi tabBar benar sebelum dan setelah masalah direproduksi, yang membuat saya berpikir bahwa masalahnya ada di subview. Saya menggunakan kode di bawah ini untuk berhasil memperbaiki masalah ini tanpa mundur dari skenario lain.

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

Asumsi: Saya melakukan ini hanya untuk iPhone X, karena tampaknya tidak mereproduksi di perangkat lain saat ini. Didasarkan pada asumsi bahwa Apple tidak mengubah nama kelas UITabBarButton di rilis iOS mendatang. Kami melakukan ini di UITabBarButton hanya jika berarti jika apple menambahkan lebih banyak subview internal ke UITabBar, kami mungkin perlu memodifikasi kode untuk menyesuaikannya.

Tolong beri tahu saya jika ini berhasil, akan terbuka untuk saran dan peningkatan!

Seharusnya sederhana untuk membuat padanan cepat untuk ini.

Dari tutorial ini:

https://github.com/eggswift/ESTabBarController

dan setelah inisialisasi tab bar menulis baris ini di kelas appdelegate

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

Memecahkan masalah saya tentang bilah tab.

Semoga ini memecahkan masalah Anda

Terima kasih

Pilih tabbar dan setel kotak centang "Save Area Relative Margins" di Inspector Editor seperti ini:

Saya memiliki masalah yang sama, pada awalnya dirender dengan benar tetapi setelah menyiapkan badgeValuedi salah satu tabBarItem, tata letaknya rusak. Apa yang berhasil untuk saya tanpa subclass UITabBaradalah ini, pada UITabBarControllersubclass saya yang sudah dibuat .

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

Saya menggunakan tabBar superview untuk memastikan bahwa batasan / jangkar berada pada hierarki tampilan yang sama dan menghindari crash.

Berdasarkan pemahaman saya, karena ini tampaknya merupakan bug UIKit, kita hanya perlu menulis ulang / mengatur ulang batasan bilah tab sehingga mesin tata letak otomatis dapat mengatur ulang bilah tab dengan benar.

Jika Anda memiliki batasan ketinggian untuk Tab Bar, coba hapus.

Menghadapi masalah yang sama dan menghapus ini memecahkan masalah.

Saya membuat UITabBarController baru di storyboard saya dan mendorong semua pengontrol tampilan ke UITabBarConttoller baru ini. Jadi, semuanya bekerja dengan baik di simulator iPhone X.

Untuk iPhone Anda dapat melakukan ini, 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()
    }
  }
}

Goto Storyboard dan izinkan Gunakan Panduan Tata Letak Area Aman dan ubah kelas UITabbarController ke MyTabBarController

PS Solusi ini tidak diuji dalam kasus aplikasi universal dan iPad.

coba ganti splash screen dengan ukuran @ 3x adalah (3726 × 6624)

Bagi saya, hapus [self.tabBar setBackgroundImage:]pekerjaan, mungkin itu bug UIKit

Bagi saya ini memperbaiki semua masalah:

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

Saya menggunakan a UITabBarControllerdi storyboard dan pada awalnya berfungsi dengan baik untuk saya, tetapi setelah memutakhirkan ke versi Xcode yang lebih baru, hal itu mulai memberi saya masalah terkait ketinggian tabBar.

Bagi saya, perbaikannya adalah menghapus yang ada UITabBarControllerdari storyboard dan membuat ulang dengan menyeretnya dari pustaka objek pembuat antarmuka .

Bagi mereka yang menulis seluruh UITabBarControllerprogram, Anda dapat menggunakan UITabBarItem.appearance().titlePositionAdjustmentuntuk mengatur posisi judul

Jadi dalam hal ini Anda ingin menambahkan celah antara Ikon dan Judul gunakan di 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
    }

mendeteksi apakah perangkat memiliki layar Notch:

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

Bagi saya, solusinya adalah memilih Tab Bar dalam hierarki tampilan, lalu buka: Editor -> Selesaikan Masalah Tata Letak Otomatis, dan di bawah "Tampilan yang Dipilih" (bukan "Semua tampilan dalam tampilan") pilih "Tambahkan kendala yang hilang".

Saya mengalami masalah yang sama yang diselesaikan dengan mengatur item tabBar setelah bilah tab diletakkan.

Dalam kasus saya, masalah terjadi ketika:

1. Ada pengontrol tampilan khusus
2. UITabBar dibuat di penginisialisasi pengontrol tampilan
3. Item bilah tab disetel sebelum tampilan dimuat
4. Dalam tampilan tidak memuat, tab bar ditambahkan ke tampilan utama dari pengontrol tampilan
5. Kemudian, item diberikan seperti yang Anda sebutkan.

Saya rasa ini adalah bug UIKit dari iPhoneX. karena berhasil:

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