模仿YouTube的/ Gmail应用程序的抽屉式导航 [英] mimicking the navigation drawer of youtube/gmail app
问题描述
背景
在最近几个月谷歌发布的<一href="http://www.androidpolice.com/2013/08/19/breaking-massive-youtube-for-android-v5-0-update-brings-brand-new-ui-in-app-multitasking-and-much-more/">Youtube应用与抽屉式导航（AKA滑动菜单）。
它有许多很酷的功能，我想有一个应用程序，我的工作。
的特点是：
-
触摸任何地方开始滑动。
-
切换模式时，运动对向上的操作栏的按钮图标。
-
内容区域（右侧的区域，而不是菜单本身）停留，而不是滚动，滑动菜单时。
-
操作栏停留，而不是滚动。
-
内容区域（右侧的区域，而不是菜单本身）滚动时改变其颜色，而不是菜单本身
下面是截图展示一下我说的：
滑动之前：
滑坡后：
目前，我所知道的是负责使用导航抽屉的2个主要的库：
-
官方谷歌导航抽屉库。
问题
无论是官方库和slidingMenu库不具备所有这些功能结合像YouTube应用。
例如，官方库没有能力＃1（这就是为什么我已经发布<一个href="http://stackoverflow.com/questions/17699869/how-to-show-the-drawerlayout-when-sliding-from-left-to-right-no-matter-where">this螺纹），所以我用了slidingMenu库，而不是。
不过，slidingMenu库没有（是吗？）能力，＃2，＃3。
这两个库没有足够的文件/什么都可以做，所以它很难使用它们或添加新的功能，其中的例子。
我已经试过
目前，我用的是slidingMenu库，所以这是我的code为preparing的slidingMenu：
activity.setBehindContentView（slidingMenuRootView）;
mSlidingMenu = activity.getSlidingMenu（）;
mSlidingMenu.setShadowWidthRes（R.dimen.slidingmenu_shadow_width）;
mSlidingMenu.setShadowDrawable（R.drawable.slidingmenu_shadow）;
mSlidingMenu.setBehindOffsetRes（R.dimen.slidingmenu_offset）;
mSlidingMenu.setFadeEnabled（真正的）;
mSlidingMenu.setFadeDegree（1.0F）;
mSlidingMenu.setTouchModeAbove（SlidingMenu.TOUCHMODE_FULLSCREEN）;
activity.setSlidingActionBarEnabled（假）;
问题
我如何能得到slidingMenu（或抽屉式导航栏），以像在YouTube上的应用程序，所有的功能，我所提到的联合意义？
可能的解决方案
编辑：使用 menuDrawer库（github上链接的此处），我已经成功地完成了所有我所提到的功能。这里有一个样本code：
公共类ActionBarSherlockSample扩展SherlockActivity {
私人MenuDrawer mDrawer;
@覆盖
保护无效的onCreate（最终捆绑savedInstanceState）{
super.onCreate（savedInstanceState）;
getSupportActionBar（）;
mDrawer = MenuDrawer.attach（这一点，MenuDrawer.Type.OVERLAY）;
最后的TextView menuView =新的TextView（本）;
menuView.setTextColor（0xFFFFFFFF的）;
menuView.setText（作为抽屉打开，抽屉指示图标变小。）;
menuView.setGravity（Gravity.CENTER）;
mDrawer.setMenuView（menuView）;
mDrawer.setTouchMode（MenuDrawer.TOUCH_MODE_FULLSCREEN）;
mDrawer.setOnDrawerStateChangeListener（新OnDrawerStateChangeListener（）{
@覆盖
公共无效onDrawerStateChange（最终诠释oldState，最终诠释newState）{
Log.d（APPLOG，oldState：+ oldState +newState：+ newState）;
}
@覆盖
公共无效onDrawerSlide（最终浮动openRatio，最终诠释offsetPixels）{
}
}）;
最后TextView的内容查看=新的TextView（本）;
内容查看
.setText（本示例使用ActionBarSherlock在旧平台上显示的动作条。抽屉指标，
+按照设计准则，是在左上角可见。）;
contentView.setGravity（Gravity.CENTER）;
mDrawer.setContentView（内容查看）;
mDrawer.setSlideDrawable（R.drawable.ic_drawer）;
mDrawer.setDrawerIndicatorEnabled（真正的）;
}
@覆盖
公共布尔onOptionsItemSelected（最后一个菜单项项）{
开关（item.getItemId（））{
案例android.R.id.home：
mDrawer.toggleMenu（）;
打破;
}
返回super.onOptionsItemSelected（项目）;
}
}
使用此 MenuDrawer
一个滑出式菜单实现，它允许用户访问量在应用程序之间进行切换。
功能：
- 在该菜单可以沿着四边。
- 支持附加一个总是可见，非可拖动菜单，这是对平板电脑非常有用。
- 的菜单可以包装的内容和整个窗口。
- 允许通过拖动边缘，整个屏幕或拉开抽屉一点都没有。
- 可以在XML布局中使用。
- 指示器，显示其屏幕是当前可见
Background
In the recent months Google released the Youtube app with navigation drawer (AKA sliding menu).
it has many cool features that i wish to have on an app i'm working on.
the features are:
touch anywhere to start sliding.
moving icon on the "up" button of the action bar when switching modes.
content area (the area on the right, not the menu itself) stays instead of scrolling, when sliding the menu.
action bar stays instead of scrolling.
content area (the area on the right, not the menu itself) changes its color when scrolling, and not the menu itself.
here are screenshots to show what i'm talking about :
before sliding:
after sliding:
currently, i know of 2 main libraries that are responsible of using a navigation drawer :
the official google navigation drawer library .
the problem
both the official library and the slidingMenu library don't have all of those features combined like on the youtube app.
for example, the official library doesn't have ability #1 (that's why i've posted this thread) , so i used the slidingMenu library instead.
however, the slidingMenu library doesn't have (or is it?) ability #2 and #3 .
both libraries don't have enough documentation/examples of what can be done, so it's very hard to use them or add new features to them.
what i've tried
currently, i use the slidingMenu library, so this is my code for preparing the slidingMenu :
activity.setBehindContentView(slidingMenuRootView);
mSlidingMenu = activity.getSlidingMenu();
mSlidingMenu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
mSlidingMenu.setShadowDrawable(R.drawable.slidingmenu_shadow);
mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
mSlidingMenu.setFadeEnabled(true);
mSlidingMenu.setFadeDegree(1.0f);
mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
activity.setSlidingActionBarEnabled(false);
question
how can i get the slidingMenu (or navigation drawer) to act like on youtube app , meaning with all of the features i've mentioned combined ?
possible solution
EDIT: using the menuDrawer library (github link here) , i've successfully achieved all of the features i've mentioned. here's a sample code:
public class ActionBarSherlockSample extends SherlockActivity {
private MenuDrawer mDrawer;
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar();
mDrawer = MenuDrawer.attach(this, MenuDrawer.Type.OVERLAY);
final TextView menuView = new TextView(this);
menuView.setTextColor(0xFFFFFFFF);
menuView.setText("As the drawer opens, the drawer indicator icon becomes smaller.");
menuView.setGravity(Gravity.CENTER);
mDrawer.setMenuView(menuView);
mDrawer.setTouchMode(MenuDrawer.TOUCH_MODE_FULLSCREEN);
mDrawer.setOnDrawerStateChangeListener(new OnDrawerStateChangeListener() {
@Override
public void onDrawerStateChange(final int oldState, final int newState) {
Log.d("AppLog", "oldState:" + oldState + " newState:" + newState);
}
@Override
public void onDrawerSlide(final float openRatio, final int offsetPixels) {
}
});
final TextView contentView = new TextView(this);
contentView
.setText("This sample uses ActionBarSherlock to display an ActionBar on older platforms. The drawer indicator, "
+ "as per the design guidelines, is visible in the top left corner.");
contentView.setGravity(Gravity.CENTER);
mDrawer.setContentView(contentView);
mDrawer.setSlideDrawable(R.drawable.ic_drawer);
mDrawer.setDrawerIndicatorEnabled(true);
}
@Override
public boolean onOptionsItemSelected(final MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
mDrawer.toggleMenu();
break;
}
return super.onOptionsItemSelected(item);
}
}
Use this MenuDrawer
A slide-out menu implementation, which allows users to navigate between views in your app.
Features:
- The menu can be positioned along all four edges.
- Supports attaching an always visible, non-draggable menu, which is useful on tablets.
- The menu can wrap both the content and the entire window.
- Allows the drawer to be opened by dragging the edge, the entire screen or not at all.
- Can be used in XML layouts.
- Indicator that shows which screen is currently visible
这篇关于模仿YouTube的/ Gmail应用程序的抽屉式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
