Bất cứ ai có vấn đề với trình giả lập iPhone X xung quanh thành phần UITabBar?

Của tôi dường như hiển thị các biểu tượng và tiêu đề chồng lên nhau, tôi không chắc là mình có thiếu thứ gì không, tôi cũng đã chạy nó trong trình giả lập iPhone 8 và một thiết bị thực tế trông rất ổn như thể hiện trên bảng truyện.

iPhone X:

iPhone 8

Tôi đã có thể khắc phục vấn đề bằng cách gọi không hợp lệIntrinsicContentSize trên UITabBar trong viewDidLayoutSubview.

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

Lưu ý: Phần dưới cùng của thanh tab sẽ cần được chứa ở dưới cùng của chế độ xem chính, thay vì vùng an toàn và thanh tab không được hạn chế chiều cao.

Câu trả lời được cung cấp bởi VoidLess chỉ khắc phục các sự cố TabBar. Nó khắc phục các vấn đề về bố cục trong thanh tab, nhưng nếu bạn sử dụng trình điều khiển che giấu thanh tab, thanh tab được hiển thị không chính xác trong khi hoạt ảnh (để tái tạo tốt nhất là có 2 cách ly - một chế độ và một lần đẩy. Nếu bạn thay thế các dấu cách, bạn có thể xem thanh tab được đưa ra khỏi vị trí). Các mã dưới đây sửa chữa cả hai vấn đề. Táo làm tốt lắm.

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

Mã mục tiêu-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

Có một mẹo mà chúng ta có thể giải quyết vấn đề.

Chỉ cần đặt UITabBar của bạn trong một UIView.

Điều này thực sự làm việc cho tôi.

Hoặc bạn có thể theo liên kết này để biết thêm chi tiết.

ghi đè UITabBar sizeThatFits(_)cho 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
    }
}

Tôi đã thêm điều này vào viewWillAppeartùy chỉnh của mình UITabBarController, vì không có câu trả lời nào được cung cấp cho tôi:

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

Tôi đã từng gặp vấn đề tương tự.

Nếu tôi đặt bất kỳ hằng số khác không trên ràng buộc dưới cùng của UITabBar đến vùng an toàn:

Nó bắt đầu hoạt động như mong đợi ...

Đó là thay đổi duy nhất tôi đã thực hiện và tôi không biết tại sao nó lại hoạt động nhưng nếu có ai tôi muốn biết.

Di chuyển thanh tab 1 điểm từ phía dưới làm việc cho tôi.

Tất nhiên, bạn sẽ có một khoảng trống bằng cách làm như vậy mà bạn sẽ phải điền theo một cách nào đó, nhưng văn bản / biểu tượng hiện được đặt đúng vị trí.

Aha! Đó thực sự là ma thuật!

Cuối cùng tôi đã tìm ra điều này sau nhiều giờ chửi bới Apple.

UIKit thực sự xử lý việc này cho bạn và có vẻ như các mục thanh tab đã thay đổi là do thiết lập không chính xác (và có thể là lỗi UIKit thực tế). Không cần phân lớp hoặc xem nền.

UITabBar sẽ "chỉ hoạt động" nếu nó bị giới hạn ở đáy của giám sát, KHÔNG ở vùng an toàn dưới cùng .

Nó thậm chí hoạt động trong Trình xây dựng giao diện.

Cài đặt đúng

1. Trong trình tạo giao diện, xem dưới dạng iPhone X, kéo UITabBar ra nơi nó khớp vào vùng an toàn phía dưới. Khi bạn thả nó, nó sẽ trông chính xác (lấp đầy khoảng trống đến cạnh dưới cùng).
2. Sau đó, bạn có thể thực hiện "Thêm các ràng buộc thiếu" và IB sẽ thêm các ràng buộc chính xác và thanh tab của bạn sẽ hoạt động một cách kỳ diệu trên tất cả các iPhone! (Lưu ý rằng ràng buộc dưới có vẻ như nó có giá trị không đổi bằng chiều cao của khu vực không an toàn của iPhone X, nhưng hằng số thực sự là 0)

Đôi khi nó vẫn không hoạt động

Điều thực sự ngu ngốc là bạn cũng có thể nhìn thấy lỗi trong IB, ngay cả khi bạn thêm các ràng buộc chính xác mà IB thêm vào trong các bước trên!

1. Kéo ra một UITabBar và không gắn nó vào phần dưới cùng của vùng an toàn
2. Thêm tất cả các ràng buộc hàng đầu, theo dõi và dưới cùng vào giám sát (khu vực không an toàn) Thật kỳ lạ, điều này sẽ tự khắc phục nếu bạn thực hiện "Mục đầu tiên và mục thứ hai" trong trình kiểm tra ràng buộc cho ràng buộc dưới. ¯_ (ツ) _ /

Đã sửa lỗi bằng cách sử dụng UITabBar được phân lớp để áp dụng 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
    }
}

Giải quyết cho tôi bằng cách gọi [tabController.view setNeedsLayout];sau khi loại bỏ phương thức trong khối hoàn thành.

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

UITabBar đang tăng chiều cao để ở trên nút home / line, nhưng vẽ phần phụ ở vị trí ban đầu của nó và phủ UITabBarItem lên trên phần phụ.

Như một giải pháp thay thế, bạn có thể phát hiện iPhone X và sau đó thu nhỏ chiều cao của chế độ xem 32px để đảm bảo thanh tab được hiển thị trong vùng an toàn phía trên đường nhà.

Ví dụ: nếu bạn đang tạo TabBar theo chương trình thay thế

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

Với cái này:

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

LƯU Ý: Đây cũng có thể là một lỗi, vì kích thước khung nhìn và bố cục thanh tab được đặt bởi HĐH. Nó có thể sẽ hiển thị theo ảnh chụp màn hình của Apple trong Nguyên tắc giao diện con người của iPhone X tại đây: https://developer.apple.com/ios/human-interface-guferences/overview/iphone-x/

Trường hợp của tôi là tôi đã đặt chiều cao UITabBar tùy chỉnh trong UITabBarControll của mình, như sau:

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

Xóa mã này là giải pháp để TabBar hiển thị chính xác trên iPhone X.

Giải pháp đơn giản nhất tôi tìm thấy là chỉ cần thêm một khoảng trống 0,2 pt giữa dưới cùng của thanh tab và dưới cùng của safeAreaLayoutGuide.bottomAnchor như vậy.

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

Tôi đã gặp vấn đề tương tự khi tôi cố gắng đặt khung của UITabBar trong TabBarControll tùy chỉnh của mình.

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

Khi tôi chỉ điều chỉnh nó sang kích thước mới, vấn đề đã biến mất

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

Tôi đã gặp điều này hôm nay với aa UITabBar được thêm thủ công vào trình điều khiển chế độ xem trong bảng phân cảnh, khi căn chỉnh xuống dưới cùng của vùng an toàn với hằng số 0 tôi sẽ gặp sự cố nhưng thay đổi nó thành 1 sẽ khắc phục vấn đề. Ứng dụng của tôi có UITabBar tăng hơn 1 pixel so với bình thường là điều có thể chấp nhận được đối với ứng dụng của tôi.

Tôi đã gãi đầu về vấn đề này. Nó dường như được liên kết với cách tabBar được khởi tạo và thêm vào để xem phân cấp. Tôi cũng đã thử các giải pháp trên như gọi điện invalidateIntrinsicContentSize, đặt khung và cả bottomInsetsbên trong lớp con UITabBar. Tuy nhiên, chúng dường như hoạt động tạm thời và chúng phá vỡ một số kịch bản khác hoặc hồi quy thanh tab bằng cách gây ra một số vấn đề bố cục mơ hồ. Khi tôi gỡ lỗi sự cố, tôi đã thử gán các hạn chế về chiều cao cho UITabBar và cent trung tâm, tuy nhiên không khắc phục được sự cố. Tôi nhận ra trong trình gỡ lỗi xem rằng chiều cao của tabBar là chính xác trước và sau khi sự cố được sao chép, điều đó khiến tôi nghĩ rằng vấn đề nằm trong các cuộc phỏng vấn. Tôi đã sử dụng đoạn mã dưới đây để khắc phục thành công sự cố này mà không cần hồi quy bất kỳ kịch bản nào khác.

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

Giả định: Tôi chỉ làm điều này cho iPhone X, vì nó dường như không sao chép trên bất kỳ thiết bị nào khác vào lúc này. Dựa trên giả định rằng Apple không thay đổi tên của lớp UITabBarButton trong các bản phát hành iOS trong tương lai. Chúng tôi chỉ thực hiện điều này trên UITabBarButton khi có nghĩa là nếu apple thêm nhiều cuộc phỏng vấn nội bộ vào UITabBar, chúng tôi có thể cần phải sửa đổi mã để điều chỉnh cho điều đó.

Xin vui lòng cho biết nếu điều này hoạt động, sẽ được mở để đề xuất và cải tiến!

Nó nên đơn giản để tạo ra một tương đương nhanh chóng cho việc này.

Từ hướng dẫn này:

https://github.com/eggswift/ESTabBarControll

và sau khi khởi tạo thanh tab viết dòng này trong lớp appdelegate

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

Giải quyết vấn đề của tôi về thanh tab.

Hy vọng nó giải quyết vấn đề của bạn

Cảm ơn

Chọn thanh tab và đặt hộp kiểm "Lưu lề tương đối khu vực" trong Trình chỉnh sửa thanh tra như thế này:

Tôi gặp vấn đề tương tự, lúc đầu nó được hiển thị chính xác nhưng sau khi thiết lập badgeValuetrên một trong các tabBarItem, nó đã phá vỡ bố cục. Những gì nó làm việc cho tôi mà không cần phân lớp UITabBarlà cái này, trên UITabBarControllerlớp con đã được tạo của tôi .

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

Tôi đã sử dụng giám sát tabBar để đảm bảo rằng các ràng buộc / neo nằm trên cùng một hệ thống phân cấp xem và tránh sự cố.

Dựa trên sự hiểu biết của tôi, vì đây có vẻ là một lỗi UIKit, chúng ta chỉ cần viết lại / đặt lại các ràng buộc của thanh tab để công cụ bố trí tự động có thể bố trí lại thanh tab một cách chính xác.

Nếu bạn có bất kỳ hạn chế về chiều cao nào cho Tab Bar, hãy thử gỡ bỏ nó.

Đối mặt với cùng một vấn đề và loại bỏ điều này đã giải quyết vấn đề.

Tôi đã tạo UITabBarContoder mới trong bảng phân cảnh của mình và đẩy tất cả các bộ điều khiển xem sang UITabBarConttoller mới này. Vì vậy, tất cả đều hoạt động tốt trong trình giả lập iPhone X.

Đối với iPhone, bạn có thể thực hiện việc này, Phân lớp UITabBarControll.

class MyTabBarController: UITabBarController {

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

Bảng phân cảnh Goto và cho phép sử dụng Hướng dẫn bố cục vùng an toàn và thay đổi lớp của UITabbarControll thành MyTabBarCont kiểm

PS Giải pháp này không được thử nghiệm trong trường hợp ứng dụng phổ thông và iPad.

thử thay đổi màn hình giật gân với kích thước @ 3x là (3726 × 6624)

Đối với tôi, loại bỏ [self.tabBar setBackgroundImage:]công việc, có thể đó là lỗi UIKit

Đối với tôi điều này đã khắc phục tất cả các vấn đề:

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

Tôi đã sử dụng một UITabBarControllerbảng phân cảnh và lúc đầu nó hoạt động tốt với tôi, nhưng sau khi nâng cấp lên phiên bản Xcode mới hơn, nó bắt đầu cho tôi các vấn đề liên quan đến chiều cao của tabBar.

Đối với tôi, cách khắc phục là xóa cái hiện có UITabBarControllerkhỏi bảng phân cảnh và tạo lại bằng cách kéo nó từ thư viện đối tượng xây dựng giao diện .

Đối với những người viết toàn bộ UITabBarControllerchương trình, bạn có thể sử dụngUITabBarItem.appearance().titlePositionAdjustment để điều chỉnh vị trí tiêu đề

Vì vậy, trong trường hợp này bạn muốn thêm một khoảng cách giữa Biểu tượng và Tiêu đề, hãy sử dụng nó trong 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
    }

phát hiện nếu thiết bị có màn hình Notch:

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

Tôi đã có cùng một vấn đề đã được giải quyết bằng cách đặt các mục của tabBar sau khi thanh tab được đặt ra.

Trong trường hợp của tôi, vấn đề xảy ra khi:

1. Có một bộ điều khiển xem tùy chỉnh
2. Một UITabBar được tạo trong trình khởi tạo của trình điều khiển khung nhìn
3. Các mục thanh tab được đặt trước khi tải đã tải
4. Trong chế độ xem đã tải, thanh tab được thêm vào chế độ xem chính của trình điều khiển chế độ xem
5. Sau đó, các mục được hiển thị như bạn đề cập.

Tôi nghĩ rằng đây là một lỗi UIKit từ iPhoneX. bởi vì nó hoạt động:

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

Tôi tin rằng bạn có thể đang đặt thanh tab theo hướng dẫn bố cục an toàn dưới cùng. Đây có lẽ không phải là điều bạn muốn vì thanh tab dường như tự thực hiện các tính toán của mình để định vị các mục thanh tab một cách an toàn trên đầu trang chủ trong iPhone X. Thiết lập ràng buộc dưới cùng của bạn so với đáy giám sát . Bạn sẽ thấy rằng nó xuất hiện chính xác trên iPhone X cũng như các iPhone khác.