如何用Drawer Layout左侧移动主要内容

刚刚检查了如何使用DrawerLayout 在这里做菜单。 但是左边的菜单正在主要内容的前面。 我怎样才能把它设置为菜单和主要内容并排移动（菜单是向右推内容）？

Answer 1

如果你不想使用第三方库 ，你可以自己实现，只需从ActionBarDrawerToggle覆盖onDrawerSlide即可。 在那里，你可以根据你的抽屉的开放百分比来翻译你的framelayout视图。

代码示例：

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

在这里，重写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 } } 

由于setTranslationX在蜂窝前的android版本中不可用，我使用TranslateAnimation为较低版本的设备进行pipe理。

希望能帮助到你！

Answer 2

你可能想要使用我写的这个库的切换 。

我相信你会发现ContentDisplaceDrawerToggle方便：

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

ContentDisplaceDrawerToggle正是你所说的。 它在您滑入/滑出DrawerLayout移动内容视图。

如果你想结合不同的切换，你可以使用ActionBarToggleWrapper或DrawerToggleWrapper

用法选项在读我文件中给出。

Answer 3

这是工作代码…

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

Answer 4

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

在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的视图）。

请记住，有一个名为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(); } }); 

正如导航抽屉一样，closures右窗格由API完成。

Answer 5

在第二个布局集

 android:layout_gravity="start"