iOS7 Transizione colore barra di stato del menu laterale. Come nell'app Facebook iOS7

Question

L'app Facebook iOS7 ha un menu sul lato destro che può essere visualizzato scorrendo da destra a sinistra o facendo clic sul pulsante in alto a destra. Quando questo menu è aperto, c'è una transizione di colore nell'intera barra di stato da blu a nero e viceversa quando chiuso.

This image shows both status bar side-to-side

Questo appare come una soluzione molto buona per iOS Apps con i menu laterali.

Qualche idea o metodo su come ottenere ciò?

Attualmente sto usando JASidePanels. Grazie!

Answer 1

Ho cercato di realizzare la stessa cosa. Il metodo che sto usando per fare questo si basa sui seguenti concetti:

1. Un'immagine di sfondo con un'altezza di 64 punti riempirà sia il UINavigationBar e l'UIStatusBar.
2. Un'immagine di sfondo con un'altezza di 44 punti riempirà UINavigationBar e lascerà il UIStatusBar nero.
3. È possibile aggiungere una vista secondaria nella parte superiore della vista corrente di navigazione del controllore e si posizionerà al di sotto di UIStatusBar.

Quindi, in primo luogo, è necessario creare due immagini con il vostro look UINavigationBar desiderata:

Un'immagine 640x128px per coprire barra di navigazione e la barra di stato (ImageA)

E un'immagine 640x88px per coprire la barra di navigazione ma lasciare la barra di stato nera (ImageB).

Nel metodo application:didFinishLaunchingWithOptions:, impostare lo sfondo del vostro UINavigationBar con ImageA con [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

Quando il menu laterale inizia ad aprirsi, si sta andando a voler cambiare l'UINavigationBar in modo che utilizza ImageB e crea una vista che verrà aggiunta sotto UIStatusBar. Ecco alcuni esempi di codice per fare proprio questo:

// Add a property for your "temporary status bar" view 
@property (nonatomic, strong) UIView *temporaryStatusBar; 

E nel codice in cui il menu laterale inizia ad aprire:

// Create a temporary status bar overlay 
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; 
self.temporaryStatusBar.backgroundColor = [UIColor yourColor]; 
[self.navigationController.view addSubview:self.temporaryStatusBar]; 

// Update both the current display of the navigationBar and the default appearance values 
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; 
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault]; 
[self.navigationController.navigationBar setNeedsDisplay]; 

Come il menu laterale anima aperta, o come l'utente pentole menu , tutto ciò che devi fare è regolare il livello alfa della sovrapposizione di UIStatusBar. Quando il menu laterale è completamente aperto, UINavigationBar dovrebbe avere ImageB come immagine di sfondo e l'overlay UIStatusBar dovrebbe avere un alfa di 0.Quando si chiude il menu laterale, è necessario sostituire lo sfondo UINavigationBar con ImageA e rimuovere l'overlay UIStatusBar.

Fatemi sapere se questo funziona per voi!

Answer 2

Sono riuscito a trovare un modo molto semplice ed elegante per farlo, che riproduce perfettamente le funzionalità dell'app Facebook.

Ecco il mio approccio:

• Crea vista con struttura in barra di stato
• Set vista colore di sfondo al nero, opacità a 0
• Aggiungi visualizzazione come visualizzazione secondaria per qualsiasi visualizzazione radice (è necessario una vista che coprirà sia la vista centrale che i menu, in modo che non sia limitata a nessuna vista singola - una buona opzione per questo è il controller vista contenitore utilizzato dall'implementazione del controller menu)
opacità
• Set di vista del metodo di menu di animazione menu di implementazione del controller

Ecco la mia specifica implementazione, utilizzando MMDrawerController:

I sottoclasse MMDrawerController (in realtà ho già avuto una sottoclasse per l'utilizzo di MMDrawerController with storyboards), e ha aggiunto questo codice per init il metodo della classe:

// Setup view behind status bar for fading during menu drawer animations 
if (OSVersionIsAtLeastiOS7()) { 
    self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]]; 
    [self.statusBarView setBackgroundColor:[UIColor blackColor]]; 
    [self.statusBarView setAlpha:0.0]; 
    [self.view addSubview:self.statusBarView]; 
} 

// Setup drawer animations 
__weak __typeof(&*self) weakSelf = self; // Capture self weakly 

[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) { 
    MMDrawerControllerDrawerVisualStateBlock block; 
    block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation 
    if(block){ 
     block(drawerController, drawerSide, percentVisible); 
    } 
    [weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE 
}]; 

ho anche aggiunto self.statusBarView come priva te proprietà.

• La prima sezione del codice crea una vista, configura, e lo aggiunge come una visualizzazione secondaria di vista della sottoclasse MMDrawerController. Il metodo OSVersionIsAtLeastiOS7() è un metodo personalizzato che semplifica il controllo per verificare se sul dispositivo è in esecuzione iOS 7 (in caso contrario, la visualizzazione personalizzata verrà visualizzata sotto la barra di stato, che non si desidera).

• La seconda sezione di codice è il metodo setDrawerVisualStateBlock di MMDrawerController, che imposta il codice di animazioni da eseguire quando un menu viene aperto e chiuso. Le prime righe di codice sono codice boilerplate che imposta uno dei blocchi di animazioni predefinite per ciascun menu (volevo la parallasse a sinistra, ma nulla a destra). Il codice rilevante è l'ultima riga del blocco: [weakSelf.statusBarView setAlpha:percentVisible];, che imposta l'opacità della vista della barra di stato in modo che corrisponda alla percentuale di apertura del menu. Ciò consente la perfetta animazione incrociata che vedi nell'app Facebook. Noterai anche che ho assegnato self a una variabile weakSelf, in modo da evitare l'avviso del compilatore "ciclo di conservazione".

Questo è il mio approccio specifico utilizzando MMDrawerController e una sottoclasse, che ho fatto di più per comodità perché ho già avuto la sottoclasse in atto, che perché è necessariamente l'approccio migliore o l'unico modo per farlo. Probabilmente potrebbe essere implementato in molti altri modi, usando MMDrawerController senza una sottoclasse, o usando qualsiasi altra implementazione del menu del cassetto laterale.

Il risultato finale è un'animazione uniforme in dissolvenza verso il nero dietro la barra di stato, esattamente come si vede nella nuova app di Facebook.

Answer 3

È possibile utilizzare questa libreria menù scorrevole impressionante

https://github.com/arturdev/AMSlideMenu

In questo progetto demo si può vedere come fare scrivendo 4 righe di codice.

 
- (void)viewWillAppear:(BOOL)animated 
{ 
    [super viewWillAppear:animated]; 

    // Setting navigation's bar tint color 
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:@"#365491" alpha:1]; 

    // Making view with same color that navigation bar 
    UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)]; 
    statusBarView.backgroundColor = [UIColor colorWithHex:@"#365491" alpha:1]; 

    // Replace status bar view with created view and do magic :) 
    [[self mainSlideMenu] fixStatusBarWithView:statusBarView]; 
}