您的位置: 首页  >  文章  >  Android双向滑动菜单完全解析，教你如何一分钟实现双向滑动特效

Android双向滑动菜单完全解析，教你如何一分钟实现双向滑动特效

分类: 文章 • 2024-06-08 14:44:52

转载请注明出处：http://blog.****.net/guolin_blog/article/details/9671609

记得在很早之前，我写了一篇关于Android滑动菜单的文章，其中有一个朋友在评论中留言，希望我可以帮他将这个滑动菜单改成双向滑动的方式。当时也没想花太多时间，简单修改了一下就发给了他，结果没想到后来却有一大批的朋友都来问我要这份双向滑动菜单的代码。由于这份代码写得很不用心，我发了部分朋友之后实在不忍心继续发下去了，于是决定专门写一篇文章来介绍更好的Android双向滑动菜单的实现方法。

在开始动手之前先来讲一下实现原理，在一个Activity的布局中需要有三部分，一个是左侧菜单的布局，一个是右侧菜单的布局，一个是内容布局。左侧菜单居屏幕左边缘对齐，右侧菜单居屏幕右边缘对齐，然后内容布局占满整个屏幕，并压在了左侧菜单和右侧菜单的上面。当用户手指向右滑动时，将右侧菜单隐藏，左侧菜单显示，然后通过偏移内容布局的位置，就可以让左侧菜单展现出来。同样的道理，当用户手指向左滑动时，将左侧菜单隐藏，右侧菜单显示，也是通过偏移内容布局的位置，就可以让右侧菜单展现出来。原理示意图所下所示：

Android双向滑动菜单完全解析，教你如何一分钟实现双向滑动特效

介绍完了原理，我们就开始动手实现吧。新建一个Android项目，项目名就叫做BidirSlidingLayout。然后新建我们最主要的BidirSlidingLayout类，这个类就是实现双向滑动菜单功能的核心类，代码如下所示：

[java]view plaincopy
  1. publicclassBidirSlidingLayoutextendsRelativeLayoutimplementsOnTouchListener{
  3. /**
  4. *滚动显示和隐藏左侧布局时，手指滑动需要达到的速度。
  5. */
  6. publicstaticfinalintSNAP_VELOCITY=200;
  8. /**
  9. *滑动状态的一种，表示未进行任何滑动。
  10. */
  11. publicstaticfinalintDO_NOTHING=0;
  13. /**
  14. *滑动状态的一种，表示正在滑出左侧菜单。
  15. */
  16. publicstaticfinalintSHOW_LEFT_MENU=1;
  18. /**
  19. *滑动状态的一种，表示正在滑出右侧菜单。
  20. */
  21. publicstaticfinalintSHOW_RIGHT_MENU=2;
  23. /**
  24. *滑动状态的一种，表示正在隐藏左侧菜单。
  25. */
  26. publicstaticfinalintHIDE_LEFT_MENU=3;
  28. /**
  29. *滑动状态的一种，表示正在隐藏右侧菜单。
  30. */
  31. publicstaticfinalintHIDE_RIGHT_MENU=4;
  33. /**
  34. *记录当前的滑动状态
  35. */
  36. privateintslideState;
  38. /**
  39. *屏幕宽度值。
  40. */
  41. privateintscreenWidth;
  43. /**
  44. *在被判定为滚动之前用户手指可以移动的最大值。
  45. */
  46. privateinttouchSlop;
  48. /**
  49. *记录手指按下时的横坐标。
  50. */
  51. privatefloatxDown;
  53. /**
  54. *记录手指按下时的纵坐标。
  55. */
  56. privatefloatyDown;
  58. /**
  59. *记录手指移动时的横坐标。
  60. */
  61. privatefloatxMove;
  63. /**
  64. *记录手指移动时的纵坐标。
  65. */
  66. privatefloatyMove;
  68. /**
  69. *记录手机抬起时的横坐标。
  70. */
  71. privatefloatxUp;
  73. /**
  74. *左侧菜单当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
  75. */
  76. privatebooleanisLeftMenuVisible;
  78. /**
  79. *右侧菜单当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
  80. */
  81. privatebooleanisRightMenuVisible;
  83. /**
  84. *是否正在滑动。
  85. */
  86. privatebooleanisSliding;
  88. /**
  89. *左侧菜单布局对象。
  90. */
  91. privateViewleftMenuLayout;
  93. /**
  94. *右侧菜单布局对象。
  95. */
  96. privateViewrightMenuLayout;
  98. /**
  99. *内容布局对象。
  100. */
  101. privateViewcontentLayout;
  103. /**
  104. *用于监听滑动事件的View。
  105. */
  106. privateViewmBindView;
  108. /**
  109. *左侧菜单布局的参数。
  110. */
  111. privateMarginLayoutParamsleftMenuLayoutParams;
  113. /**
  114. *右侧菜单布局的参数。
  115. */
  116. privateMarginLayoutParamsrightMenuLayoutParams;
  118. /**
  119. *内容布局的参数。
  120. */
  121. privateRelativeLayout.LayoutParamscontentLayoutParams;
  123. /**
  124. *用于计算手指滑动的速度。
  125. */
  126. privateVelocityTrackermVelocityTracker;
  128. /**
  129. *重写BidirSlidingLayout的构造函数，其中获取了屏幕的宽度和touchSlop的值。
  130. *
  131. *@paramcontext
  132. *@paramattrs
  133. */
  134. publicBidirSlidingLayout(Contextcontext,AttributeSetattrs){
  135. super(context,attrs);
  136. WindowManagerwm=(WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
  137. screenWidth=wm.getDefaultDisplay().getWidth();
  138. touchSlop=ViewConfiguration.get(context).getScaledTouchSlop();
  139. }
  141. /**
  142. *绑定监听滑动事件的View。
  143. *
  144. *@parambindView
  145. *需要绑定的View对象。
  146. */
  147. publicvoidsetScrollEvent(ViewbindView){
  148. mBindView=bindView;
  149. mBindView.setOnTouchListener(this);
  150. }
  152. /**
  153. *将界面滚动到左侧菜单界面，滚动速度设定为-30.
  154. */
  155. publicvoidscrollToLeftMenu(){
  156. newLeftMenuScrollTask().execute(-30);
  157. }
  159. /**
  160. *将界面滚动到右侧菜单界面，滚动速度设定为-30.
  161. */
  162. publicvoidscrollToRightMenu(){
  163. newRightMenuScrollTask().execute(-30);
  164. }
  166. /**
  167. *将界面从左侧菜单滚动到内容界面，滚动速度设定为30.
  168. */
  169. publicvoidscrollToContentFromLeftMenu(){
  170. newLeftMenuScrollTask().execute(30);
  171. }
  173. /**
  174. *将界面从右侧菜单滚动到内容界面，滚动速度设定为30.
  175. */
  176. publicvoidscrollToContentFromRightMenu(){
  177. newRightMenuScrollTask().execute(30);
  178. }
  180. /**
  181. *左侧菜单是否完全显示出来，滑动过程中此值无效。
  182. *
  183. *@return左侧菜单完全显示返回true，否则返回false。
  184. */
  185. publicbooleanisLeftLayoutVisible(){
  186. returnisLeftMenuVisible;
  187. }
  189. /**
  190. *右侧菜单是否完全显示出来，滑动过程中此值无效。
  191. *
  192. *@return右侧菜单完全显示返回true，否则返回false。
  193. */
  194. publicbooleanisRightLayoutVisible(){
  195. returnisRightMenuVisible;
  196. }
  198. /**
  199. *在onLayout中重新设定左侧菜单、右侧菜单、以及内容布局的参数。
  200. */
  201. @Override
  202. protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
  203. super.onLayout(changed,l,t,r,b);
  204. if(changed){
  205. //获取左侧菜单布局对象
  206. leftMenuLayout=getChildAt(0);
  207. leftMenuLayoutParams=(MarginLayoutParams)leftMenuLayout.getLayoutParams();
  208. //获取右侧菜单布局对象
  209. rightMenuLayout=getChildAt(1);
  210. rightMenuLayoutParams=(MarginLayoutParams)rightMenuLayout.getLayoutParams();
  211. //获取内容布局对象
  212. contentLayout=getChildAt(2);
  213. contentLayoutParams=(RelativeLayout.LayoutParams)contentLayout.getLayoutParams();
  214. contentLayoutParams.width=screenWidth;
  215. contentLayout.setLayoutParams(contentLayoutParams);
  216. }
  217. }
  219. @Override
  220. publicbooleanonTouch(Viewv,MotionEventevent){
  221. createVelocityTracker(event);
  222. switch(event.getAction()){
  223. caseMotionEvent.ACTION_DOWN:
  224. //手指按下时，记录按下时的坐标
  225. xDown=event.getRawX();
  226. yDown=event.getRawY();
  227. //将滑动状态初始化为DO_NOTHING
  228. slideState=DO_NOTHING;
  229. break;
  230. caseMotionEvent.ACTION_MOVE:
  231. xMove=event.getRawX();
  232. yMove=event.getRawY();
  233. //手指移动时，对比按下时的坐标，计算出移动的距离。
  234. intmoveDistanceX=(int)(xMove-xDown);
  235. intmoveDistanceY=(int)(yMove-yDown);
  236. //检查当前的滑动状态
  237. checkSlideState(moveDistanceX,moveDistanceY);
  238. //根据当前滑动状态决定如何偏移内容布局
  239. switch(slideState){
  240. caseSHOW_LEFT_MENU:
  241. contentLayoutParams.rightMargin=-moveDistanceX;
  242. checkLeftMenuBorder();
  243. contentLayout.setLayoutParams(contentLayoutParams);
  244. break;
  245. caseHIDE_LEFT_MENU:
  246. contentLayoutParams.rightMargin=-leftMenuLayoutParams.width-moveDistanceX;
  247. checkLeftMenuBorder();
  248. contentLayout.setLayoutParams(contentLayoutParams);
  249. caseSHOW_RIGHT_MENU:
  250. contentLayoutParams.leftMargin=moveDistanceX;
  251. checkRightMenuBorder();
  252. contentLayout.setLayoutParams(contentLayoutParams);
  253. break;
  254. caseHIDE_RIGHT_MENU:
  255. contentLayoutParams.leftMargin=-rightMenuLayoutParams.width+moveDistanceX;
  256. checkRightMenuBorder();
  257. contentLayout.setLayoutParams(contentLayoutParams);
  258. default:
  259. break;
  260. }
  261. break;
  262. caseMotionEvent.ACTION_UP:
  263. xUp=event.getRawX();
  264. intupDistanceX=(int)(xUp-xDown);
  265. if(isSliding){
  266. //手指抬起时，进行判断当前手势的意图
  267. switch(slideState){
  268. caseSHOW_LEFT_MENU:
  269. if(shouldScrollToLeftMenu()){
  270. scrollToLeftMenu();
  271. }else{
  272. scrollToContentFromLeftMenu();
  273. }
  274. break;
  275. caseHIDE_LEFT_MENU:
  276. if(shouldScrollToContentFromLeftMenu()){
  277. scrollToContentFromLeftMenu();
  278. }else{
  279. scrollToLeftMenu();
  280. }
  281. break;
  282. caseSHOW_RIGHT_MENU:
  283. if(shouldScrollToRightMenu()){
  284. scrollToRightMenu();
  285. }else{
  286. scrollToContentFromRightMenu();
  287. }
  288. break;
  289. caseHIDE_RIGHT_MENU:
  290. if(shouldScrollToContentFromRightMenu()){
  291. scrollToContentFromRightMenu();
  292. }else{
  293. scrollToRightMenu();
  294. }
  295. break;
  296. default:
  297. break;
  298. }
  299. }elseif(upDistanceX<touchSlop&&isLeftMenuVisible){
  300. //当左侧菜单显示时，如果用户点击一下内容部分，则直接滚动到内容界面
  301. scrollToContentFromLeftMenu();
  302. }elseif(upDistanceX<touchSlop&&isRightMenuVisible){
  303. //当右侧菜单显示时，如果用户点击一下内容部分，则直接滚动到内容界面
  304. scrollToContentFromRightMenu();
  305. }
  306. recycleVelocityTracker();
  307. break;
  308. }
  309. if(v.isEnabled()){
  310. if(isSliding){
  311. //正在滑动时让控件得不到焦点
  312. unFocusBindView();
  313. returntrue;
  314. }
  315. if(isLeftMenuVisible||isRightMenuVisible){
  316. //当左侧或右侧布局显示时，将绑定控件的事件屏蔽掉
  317. returntrue;
  318. }
  319. returnfalse;
  320. }
  321. returntrue;
  322. }
  324. /**
  325. *根据手指移动的距离，判断当前用户的滑动意图，然后给slideState赋值成相应的滑动状态值。
  326. *
  327. *@parammoveDistanceX
  328. *横向移动的距离
  329. *@parammoveDistanceY
  330. *纵向移动的距离
  331. */
  332. privatevoidcheckSlideState(intmoveDistanceX,intmoveDistanceY){
  333. if(isLeftMenuVisible){
  334. if(!isSliding&&Math.abs(moveDistanceX)>=touchSlop&&moveDistanceX<0){
  335. isSliding=true;
  336. slideState=HIDE_LEFT_MENU;
  337. }
  338. }elseif(isRightMenuVisible){
  339. if(!isSliding&&Math.abs(moveDistanceX)>=touchSlop&&moveDistanceX>0){
  340. isSliding=true;
  341. slideState=HIDE_RIGHT_MENU;
  342. }
  343. }else{
  344. if(!isSliding&&Math.abs(moveDistanceX)>=touchSlop&&moveDistanceX>0
  345. &&Math.abs(moveDistanceY)<touchSlop){
  346. isSliding=true;
  347. slideState=SHOW_LEFT_MENU;
  348. contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,0);
  349. contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
  350. contentLayout.setLayoutParams(contentLayoutParams);
  351. //如果用户想要滑动左侧菜单，将左侧菜单显示，右侧菜单隐藏
  352. leftMenuLayout.setVisibility(View.VISIBLE);
  353. rightMenuLayout.setVisibility(View.GONE);
  354. }elseif(!isSliding&&Math.abs(moveDistanceX)>=touchSlop&&moveDistanceX<0
  355. &&Math.abs(moveDistanceY)<touchSlop){
  356. isSliding=true;
  357. slideState=SHOW_RIGHT_MENU;
  358. contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,0);
  359. contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
  360. contentLayout.setLayoutParams(contentLayoutParams);
  361. //如果用户想要滑动右侧菜单，将右侧菜单显示，左侧菜单隐藏
  362. rightMenuLayout.setVisibility(View.VISIBLE);
  363. leftMenuLayout.setVisibility(View.GONE);
  364. }
  365. }
  366. }
  368. /**
  369. *在滑动过程中检查左侧菜单的边界值，防止绑定布局滑出屏幕。
  370. */
  371. privatevoidcheckLeftMenuBorder(){
  372. if(contentLayoutParams.rightMargin>0){
  373. contentLayoutParams.rightMargin=0;
  374. }elseif(contentLayoutParams.rightMargin<-leftMenuLayoutParams.width){
  375. contentLayoutParams.rightMargin=-leftMenuLayoutParams.width;
  376. }
  377. }
  379. /**
  380. *在滑动过程中检查右侧菜单的边界值，防止绑定布局滑出屏幕。
  381. */
  382. privatevoidcheckRightMenuBorder(){
  383. if(contentLayoutParams.leftMargin>0){
  384. contentLayoutParams.leftMargin=0;
  385. }elseif(contentLayoutParams.leftMargin<-rightMenuLayoutParams.width){
  386. contentLayoutParams.leftMargin=-rightMenuLayoutParams.width;
  387. }
  388. }
  390. /**
  391. *判断是否应该滚动将左侧菜单展示出来。如果手指移动距离大于左侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
  392. *就认为应该滚动将左侧菜单展示出来。
  393. *
  394. *@return如果应该将左侧菜单展示出来返回true，否则返回false。
  395. */
  396. privatebooleanshouldScrollToLeftMenu(){
  397. returnxUp-xDown>leftMenuLayoutParams.width/2||getScrollVelocity()>SNAP_VELOCITY;
  398. }
  400. /**
  401. *判断是否应该滚动将右侧菜单展示出来。如果手指移动距离大于右侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
  402. *就认为应该滚动将右侧菜单展示出来。
  403. *
  404. *@return如果应该将右侧菜单展示出来返回true，否则返回false。
  405. */
  406. privatebooleanshouldScrollToRightMenu(){
  407. returnxDown-xUp>rightMenuLayoutParams.width/2||getScrollVelocity()>SNAP_VELOCITY;
  408. }
  410. /**
  411. *判断是否应该从左侧菜单滚动到内容布局，如果手指移动距离大于左侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
  412. *就认为应该从左侧菜单滚动到内容布局。
  413. *
  414. *@return如果应该从左侧菜单滚动到内容布局返回true，否则返回false。
  415. */
  416. privatebooleanshouldScrollToContentFromLeftMenu(){
  417. returnxDown-xUp>leftMenuLayoutParams.width/2||getScrollVelocity()>SNAP_VELOCITY;
  418. }
  420. /**
  421. *判断是否应该从右侧菜单滚动到内容布局，如果手指移动距离大于右侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
  422. *就认为应该从右侧菜单滚动到内容布局。
  423. *
  424. *@return如果应该从右侧菜单滚动到内容布局返回true，否则返回false。
  425. */
  426. privatebooleanshouldScrollToContentFromRightMenu(){
  427. returnxUp-xDown>rightMenuLayoutParams.width/2||getScrollVelocity()>SNAP_VELOCITY;
  428. }
  430. /**
  431. *创建VelocityTracker对象，并将触摸事件加入到VelocityTracker当中。
  432. *
  433. *@paramevent
  434. *右侧布局监听控件的滑动事件
  435. */
  436. privatevoidcreateVelocityTracker(MotionEventevent){
  437. if(mVelocityTracker==null){
  438. mVelocityTracker=VelocityTracker.obtain();
  439. }
  440. mVelocityTracker.addMovement(event);
  441. }
  443. /**
  444. *获取手指在绑定布局上的滑动速度。
  445. *
  446. *@return滑动速度，以每秒钟移动了多少像素值为单位。
  447. */
  448. privateintgetScrollVelocity(){
  449. mVelocityTracker.computeCurrentVelocity(1000);
  450. intvelocity=(int)mVelocityTracker.getXVelocity();
  451. returnMath.abs(velocity);
  452. }
  454. /**
  455. *回收VelocityTracker对象。
  456. */
  457. privatevoidrecycleVelocityTracker(){
  458. mVelocityTracker.recycle();
  459. mVelocityTracker=null;
  460. }
  462. /**
  463. *使用可以获得焦点的控件在滑动的时候失去焦点。
  464. */
  465. privatevoidunFocusBindView(){
  466. if(mBindView!=null){
  467. mBindView.setPressed(false);
  468. mBindView.setFocusable(false);
  469. mBindView.setFocusableInTouchMode(false);
  470. }
  471. }
  473. classLeftMenuScrollTaskextendsAsyncTask<Integer,Integer,Integer>{
  475. @Override
  476. protectedIntegerdoInBackground(Integer...speed){
  477. intrightMargin=contentLayoutParams.rightMargin;
  478. //根据传入的速度来滚动界面，当滚动到达边界值时，跳出循环。
  479. while(true){
  480. rightMargin=rightMargin+speed[0];
  481. if(rightMargin<-leftMenuLayoutParams.width){
  482. rightMargin=-leftMenuLayoutParams.width;
  483. break;
  484. }
  485. if(rightMargin>0){
  486. rightMargin=0;
  487. break;
  488. }
  489. publishProgress(rightMargin);
  490. //为了要有滚动效果产生，每次循环使线程睡眠一段时间，这样肉眼才能够看到滚动动画。
  491. sleep(15);
  492. }
  493. if(speed[0]>0){
  494. isLeftMenuVisible=false;
  495. }else{
  496. isLeftMenuVisible=true;
  497. }
  498. isSliding=false;
  499. returnrightMargin;
  500. }
  502. @Override
  503. protectedvoidonProgressUpdate(Integer...rightMargin){
  504. contentLayoutParams.rightMargin=rightMargin[0];
  505. contentLayout.setLayoutParams(contentLayoutParams);
  506. unFocusBindView();
  507. }
  509. @Override
  510. protectedvoidonPostExecute(IntegerrightMargin){
  511. contentLayoutParams.rightMargin=rightMargin;
  512. contentLayout.setLayoutParams(contentLayoutParams);
  513. }
  514. }
  516. classRightMenuScrollTaskextendsAsyncTask<Integer,Integer,Integer>{
  518. @Override
  519. protectedIntegerdoInBackground(Integer...speed){
  520. intleftMargin=contentLayoutParams.leftMargin;
  521. //根据传入的速度来滚动界面，当滚动到达边界值时，跳出循环。
  522. while(true){
  523. leftMargin=leftMargin+speed[0];
  524. if(leftMargin<-rightMenuLayoutParams.width){
  525. leftMargin=-rightMenuLayoutParams.width;
  526. break;
  527. }
  528. if(leftMargin>0){
  529. leftMargin=0;
  530. break;
  531. }
  532. publishProgress(leftMargin);
  533. //为了要有滚动效果产生，每次循环使线程睡眠一段时间，这样肉眼才能够看到滚动动画。
  534. sleep(15);
  535. }
  536. if(speed[0]>0){
  537. isRightMenuVisible=false;
  538. }else{
  539. isRightMenuVisible=true;
  540. }
  541. isSliding=false;
  542. returnleftMargin;
  543. }
  545. @Override
  546. protectedvoidonProgressUpdate(Integer...leftMargin){
  547. contentLayoutParams.leftMargin=leftMargin[0];
  548. contentLayout.setLayoutParams(contentLayoutParams);
  549. unFocusBindView();
  550. }
  552. @Override
  553. protectedvoidonPostExecute(IntegerleftMargin){
  554. contentLayoutParams.leftMargin=leftMargin;
  555. contentLayout.setLayoutParams(contentLayoutParams);
  556. }
  557. }
  559. /**
  560. *使当前线程睡眠指定的毫秒数。
  561. *
  562. *@parammillis
  563. *指定当前线程睡眠多久，以毫秒为单位
  564. */
  565. privatevoidsleep(longmillis){
  566. try{
  567. Thread.sleep(millis);
  568. }catch(InterruptedExceptione){
  569. e.printStackTrace();
  570. }
  571. }
  572. }
以上代码注释已经写得非常详细，我再来简单解释一下。首先在onLayout()方法中分别获取到左侧菜单、右侧菜单和内容布局的参数，并将内容布局的宽度重定义成屏幕的宽度，这样就可以保证内容布局既能覆盖住下面的菜单布局，还能偏移出屏幕。然后在onTouch()方法中监听触屏事件，以判断用户手势的意图。这里事先定义好了几种滑动状态，DO_NOTHING表示没有进行任何滑动，SHOW_LEFT_MENU表示用户想要滑出左侧菜单，SHOW_RIGHT_MENU表示用户想要滑出右侧菜单，HIDE_LEFT_MENU表示用户想要隐藏左侧菜单，HIDE_RIGHT_MENU表示用户想要隐藏右侧菜单，在checkSlideState()方法中判断出用户到底是想进行哪一种滑动操作，并给slideState变量赋值，然后根据slideState的值决定如何偏移内容布局。接着当用户手指离开屏幕时，会根据当前的滑动距离，决定后续的滚动方向，通过LeftMenuScrollTask和RightMenuScrollTask来完成完整的滑动过程。另外在滑动的过程，内容布局上的事件会被屏蔽掉，主要是通过一系列的return操作实现的，对这一部分不理解的朋友，请参阅Android事件分发机制完全解析，带你从源码的角度彻底理解。

然后我们看一下setScrollEvent方法，这个方法接收一个View作为参数，然后为这个View绑定了一个touch事件。这是什么意思呢？让我们来想象一个场景，如果内容布局是一个LinearLayout，我可以通过监听LinearLayout上的touch事件来控制它的偏移。但是如果内容布局的LinearLayout里面加入了一个ListView，而这个ListView又充满了整个LinearLayout，这个时候LinearLayout将不可能再被touch到了，这个时候我们就需要将touch事件注册到ListView上。setScrollEvent方法也就是提供了一个注册接口，touch事件将会注册到传入的View上。

接下来打开或新建activity_main.xml文件，加入如下代码：

[html]view plaincopy
  1. <com.example.bidirslidinglayout.BidirSlidingLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/bidir_sliding_layout"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  7. <RelativeLayout
  8. android:id="@+id/left_menu"
  9. android:layout_width="270dip"
  10. android:layout_height="fill_parent"
  11. android:layout_alignParentLeft="true"
  12. android:background="#00ccff"
  13. android:visibility="invisible">
  15. <TextView
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_centerInParent="true"
  19. android:text="Thisisleftmenu"
  20. android:textColor="#000000"
  21. android:textSize="28sp"/>
  22. </RelativeLayout>
  24. <RelativeLayout
  25. android:id="@+id/right_menu"
  26. android:layout_width="270dip"
  27. android:layout_height="fill_parent"
  28. android:layout_alignParentRight="true"
  29. android:background="#00ffcc"
  30. android:visibility="invisible">
  32. <TextView
  33. android:layout_width="wrap_content"
  34. android:layout_height="wrap_content"
  35. android:layout_centerInParent="true"
  36. android:text="Thisisrightmenu"
  37. android:textColor="#000000"
  38. android:textSize="28sp"/>
  39. </RelativeLayout>
  41. <LinearLayout
  42. android:id="@+id/content"
  43. android:layout_width="320dip"
  44. android:layout_height="fill_parent"
  45. android:background="#e9e9e9">
  47. <ListView
  48. android:id="@+id/contentList"
  49. android:layout_width="fill_parent"
  50. android:layout_height="fill_parent"
  51. android:scrollbars="none"
  52. android:cacheColorHint="#00000000">
  53. </ListView>
  54. </LinearLayout>
  56. </com.example.bidirslidinglayout.BidirSlidingLayout>
可以看到，我们使用了自定义的BidirSlidingLayout作为根布局，然后依次加入了三个子布局分别作为左侧菜单、右侧菜单和内容的布局。左侧菜单和右侧菜单中都只是简单地放入了一个TextView用于显示一段文字，内容布局中放入了一个ListView。注意要让左侧菜单和父布局左边缘对齐，右侧菜单和父布局右边缘对齐。

最后打开或者创建MainActivity作为程序的主Activity，代码如下所示：

[java]view plaincopy
  1. publicclassMainActivityextendsActivity{
  3. /**
  4. *双向滑动菜单布局
  5. */
  6. privateBidirSlidingLayoutbidirSldingLayout;
  8. /**
  9. *在内容布局上显示的ListView
  10. */
  11. privateListViewcontentList;
  13. /**
  14. *ListView的适配器
  15. */
  16. privateArrayAdapter<String>contentListAdapter;
  18. /**
  19. *用于填充contentListAdapter的数据源。
  20. */
  21. privateString[]contentItems={"ContentItem1","ContentItem2","ContentItem3",
  22. "ContentItem4","ContentItem5","ContentItem6","ContentItem7",
  23. "ContentItem8","ContentItem9","ContentItem10","ContentItem11",
  24. "ContentItem12","ContentItem13","ContentItem14","ContentItem15",
  25. "ContentItem16"};
  27. @Override
  28. protectedvoidonCreate(BundlesavedInstanceState){
  29. super.onCreate(savedInstanceState);
  30. setContentView(R.layout.activity_main);
  31. bidirSldingLayout=(BidirSlidingLayout)findViewById(R.id.bidir_sliding_layout);
  32. contentList=(ListView)findViewById(R.id.contentList);
  33. contentListAdapter=newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
  34. contentItems);
  35. contentList.setAdapter(contentListAdapter);
  36. bidirSldingLayout.setScrollEvent(contentList);
  37. }
  39. }
这里我们给ListView填充了几条数据，又通过findViewById()方法获取到了BidirSlidingLayout对象，然后调用它的setScrollEvent()方法，将ListView进行绑定，这样就可以通过左右滑动ListView来展示左侧菜单和右侧菜单了。

好了，全部编码工作都已完成，现在让我们运行一下程序吧，效果如下图所示：

Android双向滑动菜单完全解析，教你如何一分钟实现双向滑动特效

看起来还是挺不错的吧！并且更重要的是，以后我们在项目的任何地方都可以轻松加入双向滑动菜单功能，只需要以下两步即可：

1.在Acitivty的layout中引入我们自定义的BidirSlidingLayout布局，并且给这个布局要加入三个直接子元素。

2.在Activity中通过setScrollEvent方法，给一个View注册touch事件。

如此一来，一分钟实现双向滑动菜单功能妥妥的。

好了，今天的讲解到此结束，有疑问的朋友请在下面留言。

源码下载，请点击这里

相关推荐