webentwicklung-frage-antwort-db.com.de

So verschieben Sie den Hauptinhalt mit dem Schubladenlayout auf der linken Seite

Ich habe gerade überprüft, wie man mit DrawerLayout hier ein Menü erstellt. Das linke Seitenmenü bewegt sich jedoch auf der Vorderseite des Hauptinhalts. Wie kann ich festlegen, dass Menü und Hauptinhalt nebeneinander angezeigt werden (Menü drückt den Inhalt nach rechts)?

59
Mr. Cat

Wenn Sie keine Bibliotheken von Drittanbietern verwenden möchten, können Sie es selbst implementieren, indem Sie onDrawerSlide durch ActionBarDrawerToggle überschreiben. Dort können Sie Ihre Framelayout-Ansicht basierend auf dem% -Auszug Ihrer Schublade übersetzen.

Beispiel mit Code:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.DrawerLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">

    <FrameLayout Android:id="@+id/content_frame"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"/>    

    <ListView Android:id="@+id/left_drawer"
    Android:layout_width="240dp"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:choiceMode="singleChoice"
    Android:divider="@Android:color/transparent"
    Android:dividerHeight="0dp"/>

</Android.support.v4.widget.DrawerLayout>

Und hier überschreiben Sie onDrawerSlide:

public class ConfigurerActivity extends ActionBarActivity 
{
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
    private FrameLayout frame;
    private float lastTranslate = 0.0f;

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        frame = (FrameLayout) findViewById(R.id.content_frame);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.acc_drawer_open, R.string.acc_drawer_close) 
        {            
            @SuppressLint("NewApi")
            public void onDrawerSlide(View drawerView, float slideOffset)
            {
                super.onDrawerSlide(drawerView, slideOffset);
                float moveFactor = (mDrawerList.getWidth() * slideOffset);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) 
                {
                    frame.setTranslationX(moveFactor);
                }
                else
                {
                    TranslateAnimation anim = new TranslateAnimation(lastTranslate, moveFactor, 0.0f, 0.0f);
                    anim.setDuration(0);
                    anim.setFillAfter(true);
                    frame.startAnimation(anim);

                    lastTranslate = moveFactor;
                }
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // ... more of your code
    }
}

Da setTranslationX nicht in Android-Versionen vor der Wabe verfügbar ist, habe ich es mit TranslateAnimation für Geräte mit niedrigerer Version erstellt.

Ich hoffe es hilft!

164
nsL

Möglicherweise möchten Sie diese Bibliothek von Drawer Toggles von mir verwenden. 

Ich bin mir sicher, dass Sie ContentDisplaceDrawerToggle praktisch finden werden:

ContentDisplaceDrawerToggle mContentDisplaceToggle = new ContentDisplaceDrawerToggle(this, mDrawerLayout, R.id.content_frame);    
mDrawerLayout.setDrawerListener(mContentDisplaceToggle);

ContentDisplaceDrawerToggle macht genau das, was Sie sagen. Es verschiebt die Inhaltsansicht, während Sie DrawerLayout ein/ausfahren.

Example image

Wenn Sie verschiedene Umschalter kombinieren möchten, können Sie ActionBarToggleWrapper oder DrawerToggleWrapper verwenden.

Nutzungsoptionen sind in der Readme-Datei angegeben. 

8

Hier funktioniert der Code ...

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
 @Override
 public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);
    mContainerFrame.setTranslationX(slideOffset * drawerView.getWidth());
    mDrawerLayout.bringChildToFront(drawerView);
    mDrawerLayout.requestLayout();
    //below line used to remove shadow of drawer
    mDrawerLayout.setScrimColor(Color.TRANSPARENT);
  }//this method helps you to aside menu drawer
 };
0
Ness Tyagi

Die Antwort ist ziemlich einfach: Erstellen Sie zunächst eine NavigationDrawer-Aktivität.

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

    <Android.support.design.widget.NavigationView
        Android:id="@+id/nav_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</Android.support.v4.widget.DrawerLayout>

Öffnen Sie dann app_bar_main.layout und weisen Sie dem übergeordneten Layout eine ID zu.

Nehmen wir an, Sie gaben Android: id = "@ + id/appBarMain"

Deklarieren Sie einfach die übergeordnete Ansichtsgruppe in MainActivity.class mit der entsprechenden ID:

und fügen Sie dem Schubladenlayout wie folgt einen Schubladenlistener hinzu:

drawer.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                float moveFactor = 0;
                moveFactor = (drawerView.getWidth() * slideOffset);

                appBarMain.setTranslationX(moveFactor);
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });

Fügen Sie einen Übersetzungscode in der OnDrawerSlide () -Methode wie oben hinzu und fertig. 

0

OP hat die Antwort bekommen. Aber für jemanden, der diesen Effekt wünscht, kann SlidingPaneLayout verwenden. Es ist für diesen Zweck konzipiert. 

In XML-Datei:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.SlidingPaneLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@id/mainFrame"
    style="@style/MP.mainFrame" >


    <!--****************************Right Pane ****************************-->
    <LinearLayout style="@style/searchLayout">
        <Android.support.v4.widget.NestedScrollView style="@style/MP">
            <LinearLayout style="@style/MP.verticalLinearLayout">


            </LinearLayout>
        </Android.support.v4.widget.NestedScrollView>
    </LinearLayout>
    <!--****************************Right Pane ****************************-->

    <!--****************************Left Pane ****************************-->
<FrameLayout style="@style/MP.mainLayout">
    <LinearLayout Android:id="@id/fragmentContainer" style="@style/MP.fragmentContainer"/>

    <Android.support.v7.widget.Toolbar style="@style/toolbar">
        <ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appTitle" style="@style/WC.appTitle"/>
        <ir.tooskar.excomponents.ExtendedTextView Android:id="@id/appBarSearchIcon" style="@style/WC.appBarSearchIcon"/>
    </Android.support.v7.widget.Toolbar>
</FrameLayout>        <!--****************************Left Pane ****************************-->

Es gibt zwei Fenster, rechts und links, die zusammenkleben und sich somit zusammen bewegen. Für mich ist der linke Bereich der Hauptbereich und der rechte Bereich wird mit einem Umschalt-Symbol ausgeblendet, um ihn anzuzeigen. (Eine Ansicht mit der ID appBarSearchIcon).

Denken Sie daran, dass es eine viewgroup mit dem Namen SlidingPaneLayout gibt, die nur zwei untergeordnete Elemente hat: The Left und The Right.

Und ein wichtiger Teil der Aktivität:

        slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.mainFrame);
//        Sets a color for covering left pane(Main Pane)
        slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(context, R.color.searchPaneFadeColor));

//        The listener for Opening the Right pane(Hidden pane)
        findViewById(R.id.appBarSearchIcon).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view){
                slidingPaneLayout.openPane();
            }
        });

Das Schließen des rechten Fensters wird von der API genauso wie von Navigation Drawer ausgeführt.

0
Arash