
2.4.2 内部滑动与翻页滑动的冲突处理
在前面的手势冲突中,滚动视图是父视图,有时也是子视图,比如页面采用翻页视图的话,页面内的每个区域之间是左右滑动的关系,并且每个区域都可以拥有自己的滚动视图。如此一来,在左右滑动时,滚动视图反而变成翻页视图的子视图,前面的冲突处理办法就不能奏效了,只能另想办法。
自定义一个基于ViewPager的翻页视图是一种思路,另外还可以借鉴抽屉布局DrawerLayout。该布局允许左右滑动,在滑动时会拉出侧面的抽屉面板,常用于实现侧滑菜单。抽屉布局与翻页视图在滑动方面存在区别,翻页视图在内部的任何位置均可触发滑动事件,而抽屉布局只在屏幕两侧边缘才会触发滑动事件。
举个实际应用的例子,微信的聊天窗口是上下滚动的,在主窗口的大部分区域触摸都是上下滚动窗口,若在窗口左侧边缘按下再右拉,就会看到左边拉出了消息关注页面。限定某块区域接管特定的手势,这是一种处理滑动冲突行之有效的办法。
既然提到了抽屉布局,不妨稍微了解一下它。下面是DrawerLayout的常用方法:
- setDrawerShadow:设置首页面的渐变阴影图形。
- addDrawerListener:添加抽屉面板的拉出监听器,需实现DrawerListener的如下4个方法:
onDrawerSlide:抽屉面板滑动时触发。
onDrawerOpened:抽屉面板打开时触发。
onDrawerClosed:抽屉面板关闭时触发。
onDrawerStateChanged:抽屉面板的状态发生变化时触发。
- removeDrawerListener:移除抽屉面板的拉出监听器。
- closeDrawers:关闭所有抽屉面板。
- openDrawer:打开指定抽屉面板。
- closeDrawer:关闭指定抽屉面板。
- isDrawerOpen:判断指定抽屉面板是否打开。
抽屉布局不仅可以拉出左侧抽屉面板,还可以拉出右侧抽屉面板。左侧面板与右侧面板的区别在于:左侧面板在布局文件中的layout_gravity属性为left,右侧面板在布局文件中的layout_gravity属性为right。
下面是使用DrawerLayout的布局文件:
(完整代码见event\src\main\res\layout\activity_drawer_layout.xml)



上述布局文件对应的页面代码如下:
(完整代码见event\src\main\java\com\example\event\DrawerLayoutActivity.java)


抽屉布局的展示效果如图2-28~图2-30所示。图2-28为初始界面,图2-29为从左侧边缘拉出左边侧滑菜单的界面,图2-30为从右侧边缘拉出右边侧滑菜单的界面。

图2-28 演示抽屉布局的初始界面

图2-29 从左侧边缘拉出侧滑菜单

图2-30 从右侧边缘拉出侧滑菜单