Wie kann ich die Farbe des oberen UITabBar-Rahmens ändern, indem ich programmgesteuert ein UIImage-Objekt erstelle?

Question

Von meinem Verständnis, der einzige Weg zu ändern Sie die Farbe der oberen Grenze ist das Hintergrundbild (320x49, mit Pixelzeile oben). Es scheint mir, dass dies der einzige Weg ist (bitte korrigieren Sie mich, wenn ich falsch liege).

Gibt es eine Möglichkeit, dies ohne mit einer Bilddatei zu tun? Zum Beispiel, jemand hat mir geholfen, die navigationbar unteren Rand zu ändern, indem Sie eine UIImage aus dem Code zu erstellen:

UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(UIColor.redColor()) 

extension UIImage { 
    class func colorForNavBar(color: UIColor) -> UIImage { 
     let rect = CGRectMake(0.0, 0.0, 1.0, 1.0) 
     UIGraphicsBeginImageContext(rect.size) 
     let context = UIGraphicsGetCurrentContext() 

     CGContextSetFillColorWithColor(context, color.CGColor) 
     CGContextFillRect(context, rect) 

     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 

     return image 
    } 
} 

Diese Lösung tatsächlich funktioniert gut; es ändert die Farbe meiner unteren Grenze.

Ich habe versucht, dies auf die TabBar anzuwenden, aber nichts ändert sich überhaupt.

UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

Answer 1

Sie haben so ziemlich Ihre eigene Frage beantwortet. Sie können das gleiche mit Ihrem UITabBar tun, wie Sie mit Ihrem UINavigationBar getan haben. Wenn Sie das Schattenbild (d. H. Den "oberen Rand") ändern möchten, müssen Sie das Hintergrundbild ändern. Direkt von Apple:

Das benutzerdefinierte Schattenbild für die Registerkartenleiste. Dieses Attribut wird ignoriert, wenn die Registerkartenleiste kein benutzerdefiniertes Hintergrundbild enthält. Verwenden Sie die shadowImage-Eigenschaft, um dieses Attribut programmgesteuert festzulegen.

In Ihre eigene Frage scheinen Sie sich dessen bewusst zu sein:

die einzige Möglichkeit, die Farbe der oberen Grenze zu ändern, ist das Hintergrundbild gesetzt (320x49, mit Pixelzeile oben)

Außer dass es nicht das Hintergrundbild ist, das eine Zeile an der Spitze hat. Sie müssen nur das Hintergrundbild auf irgendetwas einstellen, dann können Sie das Schattenbild nach Ihren Wünschen einstellen.

Wenn Sie die einfache öffnen „Tabbed-Anwendung“ Vorlage innerhalb Xcode, werden Sie feststellen, dass das Hinzufügen dieser zwei Zeilen Code (und Ihre UIImage Dateisuffix) tatsächlich funktioniert:

// White background with red border on top 
UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(.whiteColor()) 
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor()) 

Answer 2

Sie benötigen für UINavigationBar.appearance().backgroundImage ein anderes Bild zu liefern.

Zum Beispiel:

UINavigationBar.appearance().backgroundImage = UIImage.colorForNavBar(.blackColor()) 
UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor()) 

Answer 3

Normalerweise haben die anderen Antworten es richtig gemacht - Sie müssen sowohl ein Hintergrundbild als auch ein Schattenbild einstellen. Dies bewirkt jedoch, dass der Balken seine Transluzenz (Unschärfe) verliert; Auch wenn Sie ein transparentes Bild festlegen, ist die Leiste transparent und nicht durchscheinend.

Wir hatten auch ein ähnliches Bedürfnis, aber wir wollten die Transluzenz der Bar erhalten. Anstatt ein Schattenbild zu setzen, haben wir den Balken subclassiert und eine Haarstrich-Unteransicht mit einer Farbe platziert, die wir wollen.Wenn die Leiste ihre Unteransichten auslegt, legen wir den Rahmen der Haarlinie auf die Breite der Leiste und genau auf ein Pixel fest.

Siehe my GitHub demo project.

Hier ist ein Screenshot des Ergebnisses:

Nachdem Sie mein subview in Ihrem Projekt enthalten, verwenden Sie einfach die folgende Zeile die Farbe einzustellen:

if let tabBar = tabBarController?.tabBar as? ColoredHairlineTabBar { 
    tabBar.hairlineColor = ... //Your color 
} 

Answer 4

Was einfach Unterklassifizieren von UITabBar und Hinzufügen eines neuen Sublayers zur Ansicht in layoutSubviews.

Swift Beispiel:

override func layoutSubviews() { 
    super.layoutSubviews() 

    let topBorder = CALayer() 

    let borderHeight: CGFloat = 2 

    topBorder.borderWidth = borderHeight 
    topBorder.borderColor = UIColor.redColor().CGColor 
    topBorder.frame = CGRect(x: 0, y: -1, width: self.frame.width, height: borderHeight) 

    self.layer.addSublayer(topBorder) 
} 

Answer 5

Hier ist die Swift 3 Lösung:

extension UIImage { 
    class func colorForNavBar(color: UIColor) -> UIImage { 
     let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0) 
     // Or if you need a thinner border : 
     // let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5) 
     UIGraphicsBeginImageContext(rect.size) 
     let context = UIGraphicsGetCurrentContext() 

     context!.setFillColor(color.cgColor) 
     context!.fill(rect) 

     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 

     return image! 
    } 
} 

mit dem Code oben im viewDidLoad des UITabBarController verwendet

UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(color: .white) 
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(color: .red)