Android侧边栏的自定义实现（附源码）

2025-01-23 技术教程

本文要实现手指在手机上向左或向右移动时，能相应的移动左右两个视图。通过自定义来实现，不借助第三方插件。实现的思路很简单，通过判断手指滑动的距离和速度来决定是否要滚动显示菜单项.（左边图片）

先来看看效果：（源码免费下载）

一、实现思路

二、代码清单

三、效果与说明

下面，让我们开始吧：

一、实现思路

1.思路

菜单在左，内容在右，然后菜单显示时和手机右边框有一定的间隔，内容显示一小部分。内容全部显示时，菜单全部不可见。如下面两个图

显示内容

显示菜单

2.判断逻辑

这是判断手指按着屏幕和手指抬起时要不要显示还是隐藏菜单

二、代码清单

首先来看下布局：

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/layout"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"tools:context=".MainActivity"><LinearLayoutandroid:id="@+id/menu"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:background="@drawable/pn"></LinearLayout><LinearLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:background="@drawable/sn"></LinearLayout></LinearLayout>

接下来看看代码，都有注释：

packagecom.example.learningjava;importcom.example.learningjava.R.string;importandroid.R.integer;importandroid.R.menu;importandroid.os.AsyncTask;importandroid.os.Build;importandroid.os.Bundle;importandroid.annotation.SuppressLint;importandroid.annotation.TargetApi;importandroid.widget.LinearLayout.LayoutParams;importandroid.app.Activity;importandroid.util.DisplayMetrics;importandroid.util.Log;importandroid.view.Menu;importandroid.view.MotionEvent;importandroid.view.VelocityTracker;importandroid.view.View;importandroid.view.View.OnTouchListener;importandroid.view.Window;importandroid.widget.LinearLayout;publicclassMainActivityextendsActivityimplementsOnTouchListener{privateLinearLayoutmenuLayout;//菜单项privateLinearLayoutcontentLayout;//内容项privateLayoutParamsmenuParams;//菜单项目的参数privateLayoutParamscontentParams;//内容项目的参数contentLayout的宽度值privateintdisPlayWidth;//手机屏幕分辨率privatefloatxDown;//手指点下去的横坐标privatefloatxMove;//手指移动的横坐标privatefloatxUp;//记录手指上抬后的横坐标privateVelocityTrackermVelocityTracker;//用于计算手指滑动的速度。floatvelocityX;//手指左右移动的速度publicstaticfinalintSNAP_VELOCITY=400;//滚动显示和隐藏menu时，手指滑动需要达到的速度。privatebooleanmenuIsShow=false;//初始化菜单项不可翙privatestaticfinalintmenuPadding=80;//menu完成显示，留给content的宽度protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initLayoutParams();}/***初始化Layout并设置其相应的参数*/privatevoidinitLayoutParams(){//得到屏幕的大小DisplayMetricsdm=newDisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);disPlayWidth=dm.widthPixels;//获得控件menuLayout=(LinearLayout)findViewById(R.id.menu);contentLayout=(LinearLayout)findViewById(R.id.content);findViewById(R.id.layout).setOnTouchListener(this);//获得控件参数menuParams=(LinearLayout.LayoutParams)menuLayout.getLayoutParams();contentParams=(LinearLayout.LayoutParams)contentLayout.getLayoutParams();//初始化菜单和内容的宽和边距menuParams.width=disPlayWidth-menuPadding;menuParams.leftMargin=0-menuParams.width;contentParams.width=disPlayWidth;contentParams.leftMargin=0;//设置参数menuLayout.setLayoutParams(menuParams);contentLayout.setLayoutParams(contentParams);}@OverridepublicbooleanonTouch(Viewv,MotionEventevent){acquireVelocityTracker(event);switch(event.getAction()){caseMotionEvent.ACTION_DOWN:xDown=event.getRawX();break;caseMotionEvent.ACTION_MOVE:xMove=event.getRawX();isScrollToShowMenu();break;caseMotionEvent.ACTION_UP:xUp=event.getRawX();isShowMenu();releaseVelocityTracker();break;caseMotionEvent.ACTION_CANCEL:releaseVelocityTracker();break;}returntrue;}/***根据手指按下的距离，判断是否滚动显示菜单*/privatevoidisScrollToShowMenu(){intdistanceX=(int)(xMove-xDown);if(!menuIsShow){scrollToShowMenu(distanceX);}else{scrollToHideMenu(distanceX);}}/***手指抬起之后判断是否要显示菜单*/privatevoidisShowMenu(){velocityX=getScrollVelocity();if(wantToShowMenu()){if(shouldShowMenu()){showMenu();}else{hideMenu();}}elseif(wantToHideMenu()){if(shouldHideMenu()){hideMenu();}else{showMenu();}}}/***想要显示菜单,当向右移动距离大于0并且菜单不可见*/privatebooleanwantToShowMenu(){return!menuIsShow&&xUp-xDown>0;}/***想要隐藏菜单,当向左移动距离大于0并且菜单可见*/privatebooleanwantToHideMenu(){returnmenuIsShow&&xDown-xUp>0;}/***判断应该显示菜单,当向右移动的距离超过菜单的一半或者速度超过给定值*/privatebooleanshouldShowMenu(){returnxUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;}/***判断应该隐藏菜单,当向左移动的距离超过菜单的一半或者速度超过给定值*/privatebooleanshouldHideMenu(){returnxDown-xUp>menuParams.width/2||velocityX>SNAP_VELOCITY;}/***显示菜单栏*/privatevoidshowMenu(){newshowMenuAsyncTask().execute(50);menuIsShow=true;}/***隐藏菜单栏*/privatevoidhideMenu(){newshowMenuAsyncTask().execute(-50);menuIsShow=false;}/***指针按着时，滚动将菜单慢慢显示出来*@paramscrollX每次滚动移动的距离*/privatevoidscrollToShowMenu(intscrollX){if(scrollX>0&&scrollX<=menuParams.width)menuParams.leftMargin=-menuParams.width+scrollX;menuLayout.setLayoutParams(menuParams);}/***指针按着时，滚动将菜单慢慢隐藏出来*@paramscrollX每次滚动移动的距离*/privatevoidscrollToHideMenu(intscrollX){if(scrollX>=-menuParams.width&&scrollX<0)menuParams.leftMargin=scrollX;menuLayout.setLayoutParams(menuParams);}/***创建VelocityTracker对象，并将触摸content界面的滑动事件加入到VelocityTracker当中。*@paramevent向VelocityTracker添加MotionEvent*/privatevoidacquireVelocityTracker(finalMotionEventevent){if(null==mVelocityTracker){mVelocityTracker=VelocityTracker.obtain();}mVelocityTracker.addMovement(event);}/***获取手指在content界面滑动的速度。*@return滑动速度，以每秒钟移动了多少像素值为单位。*/privateintgetScrollVelocity(){mVelocityTracker.computeCurrentVelocity(1000);intvelocity=(int)mVelocityTracker.getXVelocity();returnMath.abs(velocity);}/***释放VelocityTracker*/privatevoidreleaseVelocityTracker(){if(null!=mVelocityTracker){mVelocityTracker.clear();mVelocityTracker.recycle();mVelocityTracker=null;}}/****：模拟动画过程，让肉眼能看到滚动的效果**/classshowMenuAsyncTaskextendsAsyncTask<Integer,Integer,Integer>{@OverrideprotectedIntegerdoInBackground(Integer...params){intleftMargin=menuParams.leftMargin;while(true){//根据传入的速度来滚动界面，当滚动到达左边界或右边界时，跳出循环。leftMargin+=params[0];if(params[0]>0&&leftMargin>0){leftMargin=0;break;}elseif(params[0]<0&&leftMargin<-menuParams.width){leftMargin=-menuParams.width;break;}publishProgress(leftMargin);try{Thread.sleep(40);//休眠一下，肉眼才能看到滚动效果}catch(InterruptedExceptione){e.printStackTrace();}}returnleftMargin;}@OverrideprotectedvoidonProgressUpdate(Integer...value){menuParams.leftMargin=value[0];menuLayout.setLayoutParams(menuParams);}@OverrideprotectedvoidonPostExecute(Integerresult){menuParams.leftMargin=result;menuLayout.setLayoutParams(menuParams);}}}

三、效果与说明

侧滑菜单在很多应用中都会见到，其实实现起来原理非常简单，只不过是要有一大堆的判断，你要判断手指移动的距离和方向，还要判断手指移动的速度。所以代码写出来可能有点儿多，但是原理了解了就不难了。另外，为了滚动效果肉眼可以看到，加了个showMenuAsyncTask类，它在滚动视图的过程中，每sleep(40)然后再滚动，当然，这里时间还可以改到一此，效果会更加好。

（源码免费下载）