it-swarm.com.de

Beheben des Höhenproblems der Tab-Leiste auf dem iPhone X

Ich habe ein Problem mit meiner App, wenn ich das iPhone X teste. Ich bin mir nicht sicher, wie ich dieses Problem anpassen soll, und es auch nicht für andere iPhone-X-Größen machen. Dies scheint nur ein Problem auf dem iPhone X-Simulator zu sein.

 enter image description here

 enter image description here

22
icekomo

 "File inspector"

Aktivieren Sie im Dateiinspektor rechts neben dem XCode-Storyboard das Layout des Safe Area-Handbuchs, um Ihre App auf dem iPhone zu unterstützen 

Dieser Beitrag beschreibt wirklich gut.

7
Dipak Kacha

Auf iOS 12.1 Ich habe dieses Problem gelöst, indem safeAreaInsets in der UITabBar-Unterklasse überschrieben wurde:

class TabBar: UITabBar {
    private var cachedSafeAreaInsets = UIEdgeInsets.zero

    override var safeAreaInsets: UIEdgeInsets {
        let insets = super.safeAreaInsets

        if insets.bottom < bounds.height {
            cachedSafeAreaInsets = insets
        }

        return cachedSafeAreaInsets
    }
}
11
Andrey

Erstellen Sie eine separate Datei mit dem folgenden Code:

extension UITabBar {
    override open func sizeThatFits(_ size: CGSize) -> CGSize {
        super.sizeThatFits(size)
        guard let window = UIApplication.shared.keyWindow else {
            return super.sizeThatFits(size)
        }
        var sizeThatFits = super.sizeThatFits(size)
        sizeThatFits.height = window.safeAreaInsets.bottom + 40
        return sizeThatFits
    }
}
7
Mohamed Ali

Für iOS 11.3 hat dies für mich funktioniert:

func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tabBar.invalidateIntrinsicContentSize()
}
3
clopex

Ich bin auf dasselbe Problem gestoßen. Zum Glück rettet mich der folgende Beitrag. Ich bin mir sicher, dass Sie Ihr Problem damit beheben können.

https://novemberfive.co/blog/Apple-september-event-iphonex-apps/

Eine Technik, die eine Basisansicht für eine UITabBar verwendet, um den unteren Bereich zu füllen, behebt das Problem, das Sie haben.

3
Kyokook Hwang

Richten Sie einfach die Unterseite der UITabBar am Superview aus, nicht am sicheren Bereich. Wenn Sie es auf einen sicheren Bereich ausrichten, wird es so sein:

 Align to safe area

Und wenn es auf das Superview ausgerichtet ist, wird es korrekt angezeigt:

 Align to Superview

Ich denke, das liegt daran, dass Apple den Tab-Leisten-Elementen einen Standardrand nach unten gegeben hat, wenn sie sich auf dem iPhone X befinden, da sie die Tab-Leiste am unteren Rand des Bildschirms verlängern möchten, um eine schwebende Leiste zu vermeiden.

1
ben87nz

Die Lösung für mich war, dass ich eine benutzerdefinierte UITabBar-Höheneinstellung hatte, etwa so:

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

Wenn Sie es entfernen, wird die Tab-Leiste auf dem iPhone X korrekt angezeigt.

1
Gytis

Dies funktionierte für mich, da ich ein Auswahlbild verwende.

    tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.NewDesignColor.yellow, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.init(top: 0, left: 0, bottom: 20, right: 0))

In meinem Fall hilft das Hinzufügen eines Bottom-Insets.

1
Akanksha Sharma

Befolgen Sie die folgenden Richtlinien zum Einstellen des UITabbar selectionIndicatorImage.

  1. UITabBar.appearance (). SelectionIndicatorImage = #YOUR_IMAGE
  2. Vergewissere dich, dass deine Bildhöhe 48 ist.  

Die voreingestellte Höhe von tabbar selectionIndicatorImage beträgt 49, aber für das iPhone X ist die Bildhöhe gleich 48.

0
user5180348

Es sieht verrückt aus, aber ich muss nur diese Zeile in meinem Code entfernen

self.view.layoutIfNeeded()

Ich schätze nur, dass der Aufruf layoutIfNeeded für eine Ansicht, die nicht auf dem Bildschirm erscheint, dieses Problem verursacht Die Lösung von @ mohamed-ALi funktioniert jedoch auch korrekt. Vielen vielen Dank.

0
Hiro

Fügen Sie dies in Ihren UITabBarViewController ein, um die TabBar-Höhe zu korrigieren, wenn Ihr UIViewController drehbar ist.

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        tabBar.sizeToFit()
    }
0
cpt.blood

invalidateIntrinsicContentSize von UITabBar in viewWillLayoutSubviews, die Ihnen helfen können.

 override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    self.tabBar.invalidateIntrinsicContentSize()
}
0
Nishant Bhindi

In Einschränkungen - 

Wenn Sie mit "Bottom Layout Guide" den unteren Speicherplatz angeben, tritt dieses Problem auf. 

Lösung:

Geben Sie in Bezug auf den Übersichtsbereich Platz. Dies wird zu 100% perfekt funktionieren.

0
Mehul Thakkar

Ich hatte dieses kosmetische Problem nur oberhalb von iOS 11.0 und unterhalb von 12.0.

enter image description here

Ich hatte eine CustomTabBar-Klasse von UITabBar geerbt. Ich überschreibe die Frame-Methode wie folgt:

- (CGRect)frame{
    return self.bounds;
}

Dieses Problem wurde in den meisten Versionen von iOS 11.0 behoben. *

0
Prabhat Kasera

Ich hatte ein ähnliches Problem. Ich habe das selectionIndicatorImage in viewDidLoad () gesetzt. Durch das Verschieben des Codes nach viewDidLayoutSubviews () wurde mein Problem behoben.

0
Randeep

Füge diesen Code in viewDidLoad hinz

DispatchQueue.main.async {
            let size = CGSize(width: self.tabBar.frame.width / numberOfTabsFloat,
                              height: self.tabBar.frame.height)
            let image = UIImage.drawTabBarIndicator(color: UIColor.white,
                                                   size: size,
                                                   onTop: false)
            UITabBar.appearance().selectionIndicatorImage = image
            self.tabBar.selectionIndicatorImage = image
        }

nd diese Erweiterung hinzufügen

extension UIImage{
    //Draws the top indicator by making image with filling color
    class func drawTabBarIndicator(color: UIColor, size: CGSize, onTop: Bool) -> UIImage {
        let indicatorHeight = size.height
        let yPosition = onTop ? 0 : (size.height - indicatorHeight)

        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(x: 0, y: yPosition, width: size.width, height: indicatorHeight))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }
}
0
Romin Dhameliya

Es gibt eine UITabBar-Unterklasse, die alle meine Probleme mit dem iPhone X löst. iOS 11/iOS 12

class TabBar: UITabBar {

private var _safeAreaInsets = UIEdgeInsets.zero
private var _subviewsFrames: [CGRect] = []

@available(iOS 11.0, *)
override func safeAreaInsetsDidChange() {
    super.safeAreaInsetsDidChange()

    if _safeAreaInsets != safeAreaInsets {
        _safeAreaInsets = safeAreaInsets

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

override func sizeThatFits(_ size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    if #available(iOS 12.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
    }
}

override func layoutSubviews() {
    super.layoutSubviews()
    let state = subviews.map { $0.frame }
    if (state.first { $0.width == 0 } == nil) {
        _subviewsFrames = state
    } else {
        Zip(subviews, _subviewsFrames).forEach { (view, rect) in
            view.frame = rect
        }
    }

}
}
0
Maxime Ashurov

Apple hat dieses Problem nun in iOS 12.1.1 behoben.

0
Gurunathan

Das hat bei mir funktioniert.

[self.tabBar.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = YES;

0
Jonah