Barra di navigazione di transizione Titolo

Question

In un'applicazione chiamata "Luvocracy" il titolo della barra di navigazione viene modificato quando l'utente scorre sullo schermo. . Il titolo vecchio viene spinto verso l'alto, mentre quello nuovo è la transizione in Non ho un video di esso ora, ma qui ci sono alcune schermate:

https://www.dropbox.com/s/sns0bsxkdv7pw3l/Photo%20Apr%2008%2C%2011%2001%2005%20AM.png

https://www.dropbox.com/s/ys9a49u3dyxrlcm/Photo%20Apr%2008%2C%2011%2001%2009%20AM.png

https://www.dropbox.com/s/dlcfvfvqqov3ag7/Photo%20Apr%2008%2C%2011%2001%2013%20AM.png

Come posso eseguire l'animazione o la transizione in un nuovo titolo della barra di navigazione come mostrato?

Modifica: l'app non è più disponibile nell'app store, quindi non è possibile caricare un video di questa azione.

Answer 1

È possibile animare il titolo cambiando utilizzando una CATransition ... tuttavia, poiché il titolo stesso è una proprietà privata sulla barra di navigazione, è necessario prima creare un'etichetta personalizzata e collegarla all'elemento di navigazione.

Imposta l'etichetta del titolo (questo sarebbe ignorare il titolo della barra di navigazione di default):

UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 44.0f) /* auto-sized anyway */]; 
titleLabelView.backgroundColor = [UIColor clearColor]; 
titleLabelView.textAlignment = NSTextAlignmentCenter; 
titleLabelView.textColor = [UIColor blackColor]; 
titleLabelView.font = [UIFont systemFontOfSize:16.0f]; 
titleLabelView.adjustsFontSizeToFitWidth = YES; 
titleLabelView.text = @"@cracy123"; 
self.navigationItem.titleView = titleLabelView; 

Poi ogni volta che si desidera animare il titolo cambia (assumere su una vista di scorrimento azione delegato), aggiungere uno strato CAAnimation e Presto:

CATransition *animation = [CATransition animation]; 
animation.duration = 1.0; 
animation.type = kCATransitionPush; 
animation.subtype = kCATransitionFromTop; 
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
[self.navigationItem.titleView.layer addAnimation:animation forKey:@"changeTitle"]; 

((UILabel*)self.navigationItem.titleView).text = @"JACOB K"; 

ovviamente è possibile modificare le proprietà CATransition di animazione per ottenere l'effetto che stai dopo, ma quelli vi darà l'effetto 'push-up'.

Answer 2

Questo è un esempio:

UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f) /* auto-sized anyway */]; 
titleLabelView.backgroundColor = [UIColor clearColor]; 
titleLabelView.textAlignment = NSTextAlignmentCenter; 

(e altre applicazioni)

self.navigationItem.titleView = LabelView; 

Non capisco molto bene la tua domanda!

Answer 3

Solo perché una risposta Swift mancava, ecco l'attuazione Swift della risposta di Gavin:

Impostare l'etichetta titolo personalizzato:

let titleLabelView = UILabel.init(frame: CGRect(x: 0, y: 0, width: 0, height: 44)) 
titleLabelView.backgroundColor = UIColor.clearColor() 
titleLabelView.textAlignment = .Center 
// this next line picks up the UINavBar tint color instead of fixing it to a particular one as in Gavin's solution 
titleLabelView.textColor = UINavigationBar.appearance().tintColor 
titleLabelView.font = UIFont.boldSystemFontOfSize(16.0) 
titleLabelView.text = "Old Title" 
self.navigationItem.titleView = titleLabelView 

Ed ecco il codice di animazione titolo:

let titleAnimation = CATransition() 
titleAnimation.duration = 0.5 
titleAnimation.type = kCATransitionPush 
titleAnimation.subtype = kCATransitionFromTop 
titleAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) 

navigationItem.titleView!.layer.addAnimation(titleAnimation, forKey: "changeTitle") 
(navigationItem.titleView as! UILabel).text = "New Title" 

// I added this to autosize the title after setting new text 
(navigationItem.titleView as! UILabel).sizeToFit() 

Answer 4

Questa è stata una grande risposta, ma ci sono voluti alcuni ritocchi per me per farlo bene.

Quindi l'idea generale è che tu abbia un testo nel mezzo della tua scrollView e quando l'utente scorre oltre quel testo allora vuoi che diventi il ​​nuovo titolo. Inoltre, quando si scorre indietro, si desidera tornare al titolo predefinito.

Quindi, utilizzando il codice che Gix postato, ora convertito in Swift 3, ecco come avere fatto.

aggiungere queste variabili alla parte superiore del vostro viewController

var didChangeTitle = false 
let defaultTitle = "Default Title" 
let animateUp: CATransition = { 
    let animation = CATransition() 
    animation.duration = 0.5 
    animation.type = kCATransitionPush 
    animation.subtype = kCATransitionFromTop 
    animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) 
    return animation 
}() 
let animateDown: CATransition = { 
    let animation = CATransition() 
    animation.duration = 0.5 
    animation.type = kCATransitionPush 
    animation.subtype = kCATransitionFromBottom 
    animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) 
    return animation 
}() 

Nella tua viewDidLoad, aggiungere questo codice per impostare il titolo predefinito.

let titleLabelView = UILabel.init(frame: CGRect(x: 0, y: 0, width: 200, height: 44)) 
titleLabelView.backgroundColor = .clear 
titleLabelView.textAlignment = .center 
titleLabelView.textColor = UINavigationBar.appearance().tintColor 
titleLabelView.font = UIFont.boldSystemFont(ofSize: 16) 
titleLabelView.text = defaultTitle 
self.navigationItem.titleView = titleLabelView 

Ora è aggiungere del codice alla funzione delegato ScrollView:

extension MyViewController: UIScrollViewDelegate { 
    func scrollViewDidScroll(_ scrollView: UIScrollView) { 
     if scrollView.contentOffset.y >= (labelName.frame.origin.y + labelName.frame.height) && !didChangeTitle { 
      if let label = navigationItem.titleView as? UILabel { 
       label.layer.add(animateUp, forKey: "changeTitle") 
       label.text = labelName.text 
      } 
      didChangeTitle = true 
     } else if scrollView.contentOffset.y < labelName.frame.origin.y && didChangeTitle { 
      if let label = navigationItem.titleView as? UILabel { 
       label.layer.add(animateDown, forKey: "changeTitle") 
       label.text = defaultTitle 
      } 
      didChangeTitle = false 
     } 
    } 
} 

Il var "nomeEtichetta" è l'etichetta nel vostro ScrollView che contiene il titolo futuro.