Implementieren von Gmail Tablet wie Navigation Drawer

Question

Ich habe in das Tablet-Design der Google Mail-Anwendung untersucht. In dieser Navigation Drawer Implementierung unterscheidet sich von anderen. Ich habe ein Bild als Referenz angehängt.

Und auch, wenn ich die Schublade erweitern sie wie normale Navigationsleiste Verhalten passieren sollte.

Ich möchte auf die gleiche Art und Weise umzusetzen. Ich suchte, aber ich fand nur dieses link, das nicht so hilfreich ist. Kann mir jemand Vorschläge geben wie kann ich das machen?

Answer 1

Sie können eine SlidingPaneLayout mit einem Rand im Hauptbereich und benutzerdefinierten Listener für das Überblenden verwenden.

<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> 

Subclass SlidingPaneLayout und finden Sie die Teil- und Vollscheiben 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); 
} 

Ändern Sie den Alpha des Vollscheibe und Teilscheibe mit einem Hörer:

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); 
    } 
}; 

Auch verstecken das Teilfenster, wenn das Layout geöffnet wird.

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); 
    } 
} 

Weitere Informationen: http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html

Answer 2

Es ist eine wunderbare Bibliothek für dieses https://github.com/mikepenz/MaterialDrawer

(Verwenden MiniDrawer aus dieser Bibliothek)