Implementazione del tablet Gmail come il cassetto di navigazione

Question

Stavo esaminando il design della tavoletta dell'applicazione Gmail. In questo l'implementazione di Navigation Drawer è diversa dalle altre. Ho allegato un'immagine per il vostro riferimento.

E anche quando mi espando il cassetto dovesse accadere come un comportamento normale cassetto di navigazione.

vorrei implementare nello stesso modo. Stavo cercando ma ho trovato solo questo link che non è così utile. Qualcuno può darmi suggerimenti come posso fare questo!

Answer 1

È possibile utilizzare un SlidingPaneLayout con un margine nel riquadro principale e un listener personalizzato per la dissolvenza incrociata.

<com.sqisland.android.CrossFadeSlidingPaneLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/sliding_pane_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <FrameLayout 
     android:layout_width="240dp" 
     android:layout_height="match_parent" 
     android:background="@color/purple"> 
    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:text="@string/full"/> 
    <TextView 
     android:layout_width="64dp" 
     android:layout_height="match_parent" 
     android:background="@color/blue" 
     android:text="@string/partial"/> 
    </FrameLayout> 
    <TextView 
     android:layout_width="400dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:layout_marginLeft="64dp" 
     android:background="@color/light_blue" 
     android:text="@string/pane_2"/> 
</com.sqisland.android.CrossFadeSlidingPaneLayout> 

sottoclasse SlidingPaneLayout e trovare i riquadri parziali e totali in onFinishInflate:

protected void onFinishInflate() { 
    super.onFinishInflate(); 

    if (getChildCount() < 1) { 
    return; 
    } 

    View panel = getChildAt(0); 
    if (!(panel instanceof ViewGroup)) { 
    return; 
    } 

    ViewGroup viewGroup = (ViewGroup) panel; 
    if (viewGroup.getChildCount() != 2) { 
    return; 
    } 
    fullView = viewGroup.getChildAt(0); 
    partialView = viewGroup.getChildAt(1); 

    super.setPanelSlideListener(crossFadeListener); 
} 

Cambiare l'alfa della piena riquadro e il riquadro parziale con un listener:

private SimplePanelSlideListener crossFadeListener 
    = new SimplePanelSlideListener() { 
    public void onPanelSlide(View panel, float slideOffset) { 
    super.onPanelSlide(panel, slideOffset); 
    if (partialView == null || fullView == null) { 
     return; 
    } 

    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE); 
    partialView.setAlpha(1 - slideOffset); 
    fullView.setAlpha(slideOffset); 
    } 
}; 

Inoltre, nascondere il riquadro parziale quando il layout è aperto.

protected void onLayout(
    boolean changed, int l, int t, int r, int b) { 
    super.onLayout(changed, l, t, r, b); 

    if (partialView != null) { 
    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE); 
    } 
} 

Maggiori informazioni: http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html

Answer 2

C'è una libreria impressionante per questo https://github.com/mikepenz/MaterialDrawer

(Usa MiniDrawer da questa libreria)