如何在从左到右滑动时显示DrawerLayout,无论在哪里?

时间:2013-07-17 12:33:04

标签: android slidingmenu drawerlayout

背景

谷歌推出了DrawerLayout,当你点击动作栏的“向上”按钮时,它会在屏幕的左侧区域显示一个菜单。

因为actionBarSherlock尚不支持库,所以已经有办法使用this project来克服它。

它已经在许多应用程序上有变种:潮流,gmail,环聊,youtube ......

问题

在“潮流”应用程序(以及youtube)中,当用户从左向右滑动(最左侧)页面时,DrawerLayout会出现,无论手指在哪里开始触摸

我怎样才能达到同样的效果?也许我应该使用onInterceptTouchEvent

除了this link(ok和this one之外),没有太多关于可以做什么很酷的事情的文档和教程。他们说(在“给用户快速查看”部分),左边大约20dp用于此功能,但我可以看到“电流”可以用于更大的区域。

看起来这个库还没有完成,因此布局xml文件甚至无法在可视化UI编辑器中显示...


编辑:似乎该库是开源的。代码可在以下网址获得:

.../android-sdk\sources\android-18\android\support\v4\widget\DrawerLayout.java
.../android-sdk\sources\android-18\android\support\v4\widget\SlidingPaneLayout.java
.../android-sdk\sources\android-18\android\support\v4\app\ActionBarDrawerToggle.java

现在的问题是如何让它像我写的一样工作,这样它就可以在youtube上工作,允许我们自定义它的外观和从哪里滚动它。

8 个答案:

答案 0 :(得分:8)

SlidingMenu是我见过的最好的滑动库,它是非常好的库。
您可以为所有屏幕设置getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN)启用fling。

答案 1 :(得分:3)

问题是DrawerLayout使用ViewDragHelper,其default EDGE_SIZE为20dp,用于计算mEdgeSize,如下所示:

mEdgeSize = (int) (EDGE_SIZE * density + 0.5f);

这是一个将mEdgeSize设置为显示宽度百分比的函数:

public static void setDrawerLeftEdgeSize(Activity activity, DrawerLayout drawerLayout, float displayWidthPercentage) {
    if (activity == null || drawerLayout == null)
        return;

    try {
        // find ViewDragHelper and set it accessible
        Field leftDraggerField = drawerLayout.getClass().getDeclaredField("mLeftDragger");
        leftDraggerField.setAccessible(true);
        ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout);
        // find edgesize and set is accessible
        Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");
        edgeSizeField.setAccessible(true);
        int edgeSize = edgeSizeField.getInt(leftDragger);
        // set new edgesize
        Point displaySize = new Point();
        activity.getWindowManager().getDefaultDisplay().getSize(displaySize);
        edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (displaySize.x * displayWidthPercentage)));
    } catch (NoSuchFieldException e) {
        // ignore
    } catch (IllegalArgumentException e) {
        // ignore
    } catch (IllegalAccessException e) {
        // ignore
    }
}

所以,假设您希望左边缘的30%对幻灯片事件作出反应并打开导航抽屉,然后只需调用:

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
setDrawerLeftEdgeSize(this, mDrawerLayout, 0.3f);

答案 2 :(得分:3)

我尝试更改默认的EDGE_SIZE解决方案,也遇到了长按问题。 最后,Ifound通过计算X偏移来覆盖dispatchTouchEvent并打开抽屉,具体取决于滑动方向。

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            startX = ev.getX();
            startY = ev.getY();
            break;
        case MotionEvent.ACTION_UP:
            endX = ev.getX();
            endY = ev.getY();

            float sensitivity = 5;
            // From left to right
            if (endX - startX >= sensitivity) {
                if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
                    mDrawerLayout.closeDrawer(Gravity.RIGHT);
                } else {
                    mDrawerLayout.openDrawer(Gravity.LEFT);
                }
            }

            // From right to left
            if (startX - endX >= sensitivity) {
                if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
                    mDrawerLayout.closeDrawer(Gravity.LEFT);
                } else {
                    mDrawerLayout.openDrawer(Gravity.RIGHT);
                }
            }

            break;
    }

答案 3 :(得分:2)

使用他人的帮助:(first) (second)

我发现使用反射可以实现修改20dp屏幕边缘以便抽屉菜单滑动

声明内容和抽屉后,您可以执行以下操作:

public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

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

    // set a custom shadow that overlays the main content when the drawer opens
    mDrawerLayout.setDrawerShadow(R.drawable.your_drawer_shadow, GravityCompat.START);
    // set up the drawer's list view with items and click listener
    mDrawerList.setAdapter(new ArrayAdapter<String>(this,
            R.layout.your_drawer_list, yourItems));
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    // enable ActionBar app icon to behave as action to toggle nav drawer
    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setHomeButtonEnabled(true);

    Field mDragger = null;
    try {
        mDragger = mDrawerLayout.getClass().getDeclaredField(
                "mLeftDragger"); //mRightDragger for right obviously
    } catch (NoSuchFieldException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    mDragger.setAccessible(true);
    ViewDragHelper draggerObj = null;
    try {
        draggerObj = (ViewDragHelper) mDragger
                .get(mDrawerLayout);
    } catch (IllegalArgumentException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    Field mEdgeSize = null;
    try {
        mEdgeSize = draggerObj.getClass().getDeclaredField(
                "mEdgeSize");
    } catch (NoSuchFieldException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    mEdgeSize.setAccessible(true);
    int edge = 0;
    try {
        edge = mEdgeSize.getInt(draggerObj);
    } catch (IllegalArgumentException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    try {
        mEdgeSize.setInt(draggerObj, edge * 5); //optimal value as for me, you may set any constant in dp
        //You can set it even to the value you want like mEdgeSize.setInt(draggerObj, 150); for 150dp
    } catch (IllegalArgumentException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    // ActionBarDrawerToggle ties together the the proper interactions
    // between the sliding drawer and the action bar app icon
    mDrawerToggle = new ActionBarDrawerToggle(
            this,                  /* host Activity */
            mDrawerLayout,         /* DrawerLayout object */
            R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
            R.string.drawer_open,  /* "open drawer" description for accessibility */
            R.string.drawer_close  /* "close drawer" description for accessibility */
            ) {
        public void onDrawerClosed(View view) {

        }

        public void onDrawerOpened(View drawerView) {

        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

}
}

嗯,这对我来说很有用!

答案 4 :(得分:2)

您可以将其与导航抽屉一起使用

DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
Field mDragger = mDrawerLayout.getClass().getDeclaredField(
    "mLeftDragger");//mRightDragger or mLeftDragger based on Drawer Gravity
mDragger.setAccessible(true);
ViewDragHelper draggerObj = (ViewDragHelper) mDragger
    .get(mDrawerLayout);

Field mEdgeSize = draggerObj.getClass().getDeclaredField(
    "mEdgeSize");
mEdgeSize.setAccessible(true);
int edge = mEdgeSize.getInt(draggerObj);

mEdgeSize.setInt(draggerObj, edge * 3); 

答案 5 :(得分:1)

使用此项目SlidingMenu,您可以实现该效果并与ActionBarSherlock集成。

要从左向右滑动菜单,只需在创建菜单时自定义菜单,然后添加:

slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

希望这有帮助。

答案 6 :(得分:1)

首先,我不确定你对ActionBarSherlock不支持DrawerLayout的意思。您可以非常愉快地使用DrawerLayout和ActionBarSherlock,我有使用此组合的应用程序。您需要更改支持jar版本,但我发现ActionbarSherlock没有问题。

以通常的方式实施DrawerLayout。然后在你的片段实现onTouchEvent或interceptTouchEvent,当类型是从左到右滑动的'move'类型事件时,你可以在DrawerLayout上调用openDrawer方法。您需要为手指移动的距离添加处理,以确保打开抽屉的呼叫不会太敏感。

答案 7 :(得分:1)

当我们覆盖默认边缘时,我们重叠的部分的屏幕停止工作,我在viewpager中使用了上面的代码,但是现在当我从右边滚动到左边而不是到下一个视图页面时它保持不变。它的解决方案是什么?我使用了setDrawerLeftEdgeSize(this,mDrawerLayout,distance );

public static void setDrawerLeftEdgeSize(Activity activity,
            DrawerLayout drawerLayout, float displayWidthPercentage) {
        if (activity == null || drawerLayout == null)
            return;

        try {
            // find ViewDragHelper and set it accessible
            Field leftDraggerField = drawerLayout.getClass().getDeclaredField(
                    "mLeftDragger");
            leftDraggerField.setAccessible(true);
            ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField
                    .get(drawerLayout);
            // find edgesize and set is accessible
            Field edgeSizeField = leftDragger.getClass().getDeclaredField(
                    "mEdgeSize");
            edgeSizeField.setAccessible(true);
            int edgeSize = edgeSizeField.getInt(leftDragger);
            // set new edgesize
            Point displaySize = new Point();
            activity.getWindowManager().getDefaultDisplay()
                    .getSize(displaySize);
            edgeSizeField.setInt(leftDragger, Math.max(edgeSize,
                    (int) (displaySize.x * displayWidthPercentage)));
        } catch (NoSuchFieldException e) {
            // ignore
        } catch (IllegalArgumentException e) {
            // ignore
        } catch (IllegalAccessException e) {
            // ignore
        }
    }

与上述相同..