打开抽屉时,在右侧推动活动

时间:2013-10-24 22:08:22

标签: android facebook navigation-drawer

我已经实现了从右侧滑动的drawerlayout,但它没有像facebook那样改变活动(见下图)。当用户点击上面的图像中的opendrawer按钮时,如何将当前活动推送到右侧。当前它出现在活动之上并且掉落阴影。我非常感谢任何帮助。提前谢谢。

enter image description here

9 个答案:

答案 0 :(得分:67)

虽然没有默认方式将活动与导航抽屉滑动,但我们可以通过代码完成。正如上面mick88的回答所示,以下是我项目的代码片段。

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

现在在活动

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

    }

}

答案 1 :(得分:25)

不建议这样做,但您可以通过编程方式移动布局:

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

答案 2 :(得分:9)

我认为您不能使用库存DrawerLayout来实现它,但是SlidingMenu可以使用the GitHub repo here should explain all you need

答案 3 :(得分:8)

回答你的问题。 DrawerLayout的行为符合预期。

您可以将Slidingmenu(或Umano)与DrawerLayout(我这样做)结合使用。

最后,关于你想要什么(以及Facebook做了什么),谷歌本身并不希望你这样做。他们希望您像在Google音乐中一样使用抽屉(例如)

谷歌联系人对我说:

  
      
  • 导航抽屉应该使用新的guidelines,并且应该使用DrawerLayout和ActionBarDrawerToggle implemented
  •   
  • 导航抽屉不应移动操作栏,而应显示为屏幕内容上方的叠加层。
  •   
  • 导航抽屉应仅包含主要导航元素。避免在导航栏中显示通常放在操作栏中的项目,例如“设置”或“搜索”。   块引用
  •   

所以不要做Facebook所做的事情。 (在任何其他情况下,这是一个很好的建议):))

答案 4 :(得分:7)

这真的很有帮助。 将此代码段放在MainActivity.java

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

答案 5 :(得分:0)

OP得到了答案。但对于想要这种效果的其他人,可以使用SlidingPaneLayout。它是为此目的而设计的。

在XML文件中:

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

有两个窗格,左右两个,粘在一起,因此一起移动。对我来说,左侧窗格是主窗格,右侧隐藏有一个切换图标以显示它。 (ID appBarSearchIcon 的视图。)

请注意,有一个名为 viewgroup 的名称 SlidingPaneLayout 只有两个孩子,正确

活动中的重要部分:

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

关闭右侧窗格由API完成,就像导航抽屉一样。

答案 6 :(得分:0)

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>

答案 7 :(得分:0)

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

答案 8 :(得分:0)

其实很容易实现,这个link会很有帮助

去除导航抽屉和休息布局之间的高度或淡化线

<块引用>

mDrawerLayout.DrawerElevation = 0f;