web-dev-qa-db-de.com

schieben Sie die Aktivität nach rechts, wenn Sie die Schublade öffnen

Ich habe ein Drawerlayout implementiert, das von rechts gleitet, aber die Aktivität wird nicht so verschoben wie bei Facebook (siehe Abbildung unten). Wie schiebe ich die aktuelle Aktivität auf die rechte Seite, wenn der Benutzer auf die Schaltfläche "opendrawer" tippt, wie im obigen Bild. Derzeit erscheint sie über der Aktivität und lässt Schatten fallen. Ich freue mich über jede Hilfe. Danke im Voraus.

 enter image description here

androidfacebooknavigation-drawer
37
jason

Ich glaube nicht, dass Sie es mit der Aktie DrawerLayout implementieren können. Mit SlidingMenu können Sie jedoch das GitHub-Repo hier sollte alles erklären, was Sie brauchen

9
panini

Obwohl es keine Standardmethode gibt, die Aktivität zusammen mit der Navigationsleiste zu verschieben, können Sie dies durch Code tun. Wie in der obigen Antwort von mick88 vorgeschlagen, ist der Code-Ausschnitt aus meinem Projekt.

meine Datei profile.xml

<Android.support.v4.widget.DrawerLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:facebook="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" >

    <!-- Framelayout to display Fragments -->

    <RelativeLayout
        Android:id="@+id/mainView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" >


    </RelativeLayout>

    <!-- Listview to display slider menu -->

    <RelativeLayout
        Android:id="@+id/drawerView"
        Android:layout_width="240dp"
        Android:layout_height="wrap_content"
        Android:layout_gravity="start" >

        <ListView
            Android:id="@+id/list_slidermenu"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/list_background"
            Android:divider="@color/list_divider"
            Android:dividerHeight="1dp" />
    </RelativeLayout>
</Android.support.v4.widget.DrawerLayout>

jetzt in Aktivität

public class ProfileActivity extends ActionBarActivity {
    ....
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    RelativeLayout drawerView;
    RelativeLayout mainView;
    ....

    @Override
    protected void onCreate(Bundle savedInstanceState) {


        ............. //
        .............//
        drawerView = (RelativeLayout) findViewById(R.id.drawerView);
        mainView = (RelativeLayout) findViewById(R.id.mainView);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {
            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                mainView.setTranslationX(slideOffset * drawerView.getWidth());
                mDrawerLayout.bringChildToFront(drawerView);
                mDrawerLayout.requestLayout();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

}
67
Suveer Jacob

Dies wird nicht empfohlen, aber Sie können Ihr Layout programmgesteuert verschieben:

@Override
public void onDrawerSlide(View drawerView, float offset) {
    View container = findViewById(R.id.container);
    container.setTranslationX(offset * drawerView.getWidth());
}
25
mick88

Zur Beantwortung Ihrer Frage. Das DrawerLayout verhält sich wie erwartet. 

Sie können das Slidingmenu (oder Umano ) in Verbindung mit einem DrawerLayout (ich kann) verwenden. 

Schließlich möchte Google selbst nicht, was Sie möchten (und was Facebook tut). Sie möchten, dass Sie die Schublade so verwenden, wie sie in Google Music verwendet wird (zum Beispiel).

Ein Google-Kontakt sagte mir genau das: 

  • Die Navigationsleiste sollte den neuen Richtlinien folgen und implementiert mit DrawerLayout und ActionBarDrawerToggle sein. 
  • Die Navigationsleiste sollte die Aktionsleiste nicht verschieben und als Überlagerung über dem Bildschirminhalt erscheinen.
  • Die Navigationsleiste sollte nur primäre Navigationselemente enthalten. Vermeiden Sie es, Elemente in der Navigationsleiste anzuzeigen, die normalerweise in der Aktionsleiste platziert würden, wie z. B. "Einstellungen" oder "Suchen". Blockquote

Tun Sie also nicht, was Facebook tut. (Das ist ein guter Rat in jedem anderen Kontext) :)

8
Martin Marconcini

Das ist sehr hilfreich. Fügen Sie dieses Snippet in Ihre MainActivity.Java ein

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

enter image description here

MainActivity.Java 

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final CoordinatorLayout content = findViewById(R.id.clMain);

        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            private float scaleFactor = 4f;
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                float slideX = drawerView.getWidth() * slideOffset;
                content.setTranslationX(slideX);
                content.setScaleX(1 - (slideOffset / scaleFactor));
                content.setScaleY(1 - (slideOffset / scaleFactor));
            }
        };
        drawer.setScrimColor(Color.TRANSPARENT);
        drawer.setDrawerElevation(0f);
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        int id = item.getItemId();
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<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"
    Android:background="@color/colorPrimary"
    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="150dp"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        Android:background="@color/colorPrimary"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

app_bar_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/clMain"
    tools:context=".MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

</Android.support.design.widget.CoordinatorLayout>

content_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/container"
    Android:background="@Android:color/white"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>
0
Ketan Ramani
 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
            private float scaleFactor = 4f;
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                float slideX = drawerView.getWidth() * slideOffset;
                content.setTranslationX(slideX);
                content.setScaleX(1 - (slideOffset / scaleFactor));
                content.setScaleY(1 - (slideOffset / scaleFactor));
            }
        };
0
AmarDurai

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