Barra di navigazione titleVisione allineamento

Question

Desidero che la barra di navigazione mostri due elementi nel mezzo. Uno sarà il nome della lista e l'altro sarà il nome degli utenti. I nomi degli utenti saranno collocati sotto il nome della lista. Quello che ho fatto finora è che ho creato due etichette e una superview programmaticamente e ho impostato il titleView di navigationItem.

override func viewDidLoad() { 
     super.viewDidLoad() 
     var rectForView = CGRect(x: 0, y: 0, width: 190, height: 176) 
     var viewForTitle = UIView(frame: rectForView) 

     var rectForNameLabel = CGRect(x: 0, y: 63, width: 190, height: 30) 
     var listNameLabel = UILabel(frame: rectForNameLabel) 
     listNameLabel.text = "Name of the List...." 
     listNameLabel.textAlignment = NSTextAlignment.Center 
     listNameLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 15) 

     var rectForListLabel = CGRect(x: 0, y: 93, width: 190, height: 20) 
     var usersOfListLabel = UILabel(frame: rectForListLabel) 
     usersOfListLabel.text = "some Users...." 
     usersOfListLabel.textAlignment = NSTextAlignment.Center 
     usersOfListLabel.font = UIFont(name: "HelveticaNeue", size: 10) 

     viewForTitle.addSubview(listNameLabel) 
     viewForTitle.addSubview(usersOfListLabel) 


     self.navigationItem.titleView = viewForTitle 

La cosa è, sto raccogliendo larghezza in modo casuale, che porta a problemi di allineamento in diversi dispositivi. Come raggiungere l'allineamento medio nel mio caso?

Answer 1

Il fatto è che la navigazione titleView cerca sempre di centrare la vista. La ragione per cui il titolo che si vede fuori centro in uno schermo più piccolo è che, la larghezza del titolo personalizzatoView ha superato la larghezza massima di titleView.

Se si imposta il valore su 160, lo si vedrà centrato per la seconda situazione.

soluzione generale

Se si vuole adattare la larghezza titolo per dispositivi diversi, ci sono alcuni approcci che possono aiutare a risolvere il problema.

1. Imposta larghezza diversa in base alla larghezza dello schermo. Ad esempio, quando la larghezza dello schermo è 320, impostarla non più di 160. Se maggiore di 320, assegnare un valore in base alle diverse dimensioni dello schermo. Questa non è una soluzione elegante, ma piuttosto semplice senza sbattere la testa nell'impostazione e nel provare complicati vincoli.

2. Calcolare la larghezza effettiva di titleView. La larghezza di titleView è determinata dalla larghezza della barra di navigazione meno barbuttonitem sinistra e destra. Qualcosa di simile

TitleViewWidth = Navigazione larghezza - leftbarbuttonitem.width +/- rightbarbuttonitem.width - someConstant

Hai bisogno di un esperimento po 'per trovare la costante appropriata che si inserisce questa formula.

3. Creare un file xib per questo titolo, impostare i vincoli in modo più flessibile rispetto a una larghezza fissa. Carica vista da xib e quindi assegna a titleView. Questo potrebbe costare più tempo per regolarlo al lavoro.

Modifica

penso a un altro modo che può essere più facile per voi, se siete nuovi a questo.

Nello storyboard, trovare e rilasciare una vista alla barra di navigazione di questo viewView area titleView.

Espandi per quanto tempo desideri che la vista sia.

Rilasciare due etichette per quella vista e impostare i vincoli iniziale e finale e verticale e verticale.

Come appare sul storyboard

Come funziona su 4S

Answer 2

Approccio:

• titleView è sempre centrato
• Quindi impostare la larghezza della vostra visualizzazione personalizzata per corrispondere a quello del navigationBar (larghezza -40)

Codice

private func setupNavigationItems() { 

    let label = UILabel() 

    label.translatesAutoresizingMaskIntoConstraints = false 

    label.text = "aaaaa" 
    label.backgroundColor = .green 

    label.textAlignment = .left 

    navigationItem.titleView = label 

    if let navigationBar = navigationController?.navigationBar { 

     label.widthAnchor.constraint(equalTo: navigationBar.widthAnchor, constant: -40).isActive = true 
    } 
}