2014-12-22 1 views
14

Ich versuche UINavigationBar zu implementieren, das seine Transparenz beim Scrollen UITableView ändert. Zu Beginn sollte die Navigationsleiste transparenten Hintergrund haben, so dass der Inhalt darunter sichtbar sein soll (es wird ein Bild angezeigt, für das Beispiel I Volltonfarbe bin mit):UINavigationBar, das die Transparenz beim Scrollen ändert

Example 1

Wenn Benutzer einen Bildlauf Tabellenansicht, Transparenz sollte mit fester Farbe ersetzt werden:

Example 2

Tabellenansicht wird Abschnittsüberschriften enthalten, die wie handeln sollen, wenn nicht-durchscheinend Navigationsleiste. Die Header-Ansichten sollten „kleben“ zu Navigationsleiste, wenn sie es von unten „berühren“:

Example 3

Ich habe kein Glück mit dem Versuch, diesen Fluss in iOS-App zu implementieren.

Für den Ausgangszustand Ich gründe UINavigationBartranslucent Eigenschaft auf YES, und beide backgroundColor und barTintColor Farbe zu löschen, was mir gibt, was ich will.

Dann, wenn Benutzer Tabelle Tabelle scrollt, aktualisiere ich die backgroundColor und barTintColor zu einer Farbe mit bestimmten Alpha-Komponente, berechnet basierend auf aktuellen Scroll-Offset. Ich verwende scrollViewDidScroll: von UIScrollViewDelegate Protokoll, um dies zu tun. Es ändert jedoch nur den Hintergrund der Navigationsleiste und lässt den Hintergrund der Statusleiste transparent, was ich nicht möchte.

Ich kann keinen anderen Weg finden UINavigationBar transparent ohne Einstellung translucent Eigenschaft zu YES. Leider ändert sich dadurch, wie sich die Abschnittsüberschriften beim Scrollen verhalten. Da die Navigationsleiste durchscheinend ist, werden Sektions-Header-Ansichten darunter versteckt, wenn sie wie im dritten Screenshot oben auf der Leiste "bleiben" sollen.

Ich würde jede Hilfe und Hinweise schätzen, wie man Navigationsleiste erreicht, die sich wie beschrieben oder ähnlich in Objective-C oder Swift verhält.

+9

Hey check [LTNavigationbar] (https://github.com/ltebean/LTNavigationbar), die hilfreich sein könnte. –

+0

Danke @Prince !! Super Entdeckung !! – SleepsOnNewspapers

+0

Auf der Suche nach diesem Fund @PareshNavadiya Vielen Dank. – Gugulethu

Antwort

2

Unter der Annahme, dass Sie einen Verweis auf die Ansicht über dem Tableview haben und dass Sie nicht wollen, etwas in ihr zu interagieren:

var overlayView:UIView! 
var offsetDenominator:CGFloat! 
let TARGER_COLOR = UIColor.blackColor() 

override func viewDidLoad() { 
    super.viewDidLoad() 

    if let navCtrl = self.navigationController { 
     self.offsetDenominator = headerView.frame.size.height - navCtrl.navigationBar.frame.height 

     let targetCIColor = CIColor(CGColor: self.TARGER_COLOR.CGColor) 
     let overlayColor = UIColor(red: targetCIColor.red, green: targetCIColor.green, blue: targetCIColor.blue, alpha: 0.0) 

     self.overlayView = UIView(frame: self.headerView.frame) 
     self.overlayView.backgroundColor = overlayColor 

     self.view.addSubview(self.overlayView) 
    } 

... 

override func scrollViewDidScroll(scrollView: UIScrollView) { 
    if let navCtrl = self.navigationController, let breakpoint = offsetDenominator { 
     let alpha = scrollView.contentOffset.y/breakpoint 

     if alpha >= 1.0 { 
      navCtrl.navigationBar.backgroundColor = self.TARGER_COLOR 
     } else { 
      let targetCIColor = CIColor(CGColor: self.TARGER_COLOR.CGColor) 
      let overlayColor = UIColor(red: targetCIColor.red, green: targetCIColor.green, blue: targetCIColor.blue, alpha: alpha) 

      self.overlayView.backgroundColor = overlayColor 
      navCtrl.navigationBar.backgroundColor = UIColor.clearColor() 
     } 
    } 
} 
0

swift3

var navAlpha = // Your appropriate calculation 
self.navigationController!.navigationBar.backgroundColor = UIColor.red.withAlphaComponent(navAlpha) 
Verwandte Themen