Android实现上下菜单双向滑动效果

2023-09-17 09:57:04 79

这是研究了网上大神双向左右滑动后实现的上下双向滑动特效，有兴趣的朋友可以看下面代码，注释很详细，原理就是根据手指滑动的方向，来将上下两个布局进行显示与隐藏。主要用了onTouch方法，获取滑动的距离进行偏移。

importandroid.content.Context;
importandroid.os.AsyncTask;
importandroid.util.AttributeSet;
importandroid.view.MotionEvent;
importandroid.view.VelocityTracker;
importandroid.view.View;
importandroid.view.ViewConfiguration;
importandroid.view.WindowManager;
importandroid.view.View.OnTouchListener;
importandroid.widget.RelativeLayout;

publicclassUpAndDownSlidinglayoutextendsRelativeLayoutimplementsOnTouchListener{
/**
*滚动显示和隐藏上侧布局时，手指滑动需要达到的速度。
*/
publicstaticfinalintSNAP_VELOCITY=200;

/**
*滑动状态的一种，表示未进行任何滑动。
*/
publicstaticfinalintDO_NOTHING=0;
/**
*滑动状态的一种，表示正在滑出上侧菜单。
*/
publicstaticfinalintSHOW_UP_MENU=1;

/**
*滑动状态的一种，表示正在滑出下侧菜单。
*/
publicstaticfinalintSHOW_DOWN_MENU=2;

/**
*滑动状态的一种，表示正在隐藏上侧菜单。
*/
publicstaticfinalintHIDE_UP_MENU=3;

/**
*滑动状态的一种，表示正在隐藏下侧菜单。
*/
publicstaticfinalintHIDE_DOWN_MENU=4;

/**
*记录当前的滑动状态
*/
privateintslideState;

/**
*屏幕宽度值。
*/
privateintscreenWidth;
privateintscreenHeight;

/**
*在被判定为滚动之前用户手指可以移动的最大值。
*/
privateinttouchSlop;

/**
*记录手指按下时的横坐标。
*/
privatefloatxDown;

/**
*记录手指按下时的纵坐标。
*/
privatefloatyDown;

/**
*记录手指移动时的横坐标。
*/
privatefloatxMove;

/**
*记录手指移动时的纵坐标。
*/
privatefloatyMove;

/**
*记录手机抬起时的纵坐标。
*/
privatefloatyUp;
/**
*上侧菜单当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
*/
privatebooleanisUpMenuVisible;

/**
*下侧菜单当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
*/
privatebooleanisDownMenuVisible;

/**
*是否正在滑动。
*/
privatebooleanisSliding;

/**
*上侧菜单布局对象。
*/
privateViewupMenuLayout;

/**
*下侧菜单布局对象。
*/
privateViewdownMenuLayout;

/**
*内容布局对象。
*/
privateViewcontentLayout;

/**
*用于监听滑动事件的View。
*/
privateViewmBindView;

/**
*上侧菜单布局的参数。
*/
privateMarginLayoutParamsupMenuLayoutParams;

/**
*下侧菜单布局的参数。
*/
privateMarginLayoutParamsdownMenuLayoutParams;

/**
*内容布局的参数。
*/
privateRelativeLayout.LayoutParamscontentLayoutParams;

/**
*用于计算手指滑动的速度。
*/
privateVelocityTrackermVelocityTracker;

publicUpAndDownSlidinglayout(Contextcontext,AttributeSetattrs){
super(context,attrs);
WindowManagerwm=(WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
screenWidth=wm.getDefaultDisplay().getWidth();
screenHeight=wm.getDefaultDisplay().getHeight();
touchSlop=ViewConfiguration.get(context).getScaledTouchSlop();
}
/**
*绑定监听滑动事件的View。
*
*@parambindView
*需要绑定的View对象。
*/
publicvoidsetScrollEvent(ViewbindView){
mBindView=bindView;
mBindView.setOnTouchListener(this);
}
@Override
publicbooleanonTouch(Viewv,MotionEventevent){
//TODOAuto-generatedmethodstub
createVelocityTracker(event);
switch(event.getAction()){
caseMotionEvent.ACTION_DOWN:
//手指按下时，记录按下时的坐标
xDown=event.getRawX();
yDown=event.getRawY();
//将滑动状态初始化为DO_NOTHING
slideState=DO_NOTHING;
break;
caseMotionEvent.ACTION_MOVE:
xMove=event.getRawX();
yMove=event.getRawY();
intmoveDistanceX=(int)(xMove-xDown);
intmoveDistanceY=(int)(yMove-yDown);
//检查当前的滑动状态
checkSlideState(moveDistanceX,moveDistanceY);
switch(slideState){
caseSHOW_UP_MENU:
contentLayoutParams.bottomMargin=-moveDistanceY;
checkUpMenuBorder();
contentLayout.setLayoutParams(contentLayoutParams);
break;
caseHIDE_UP_MENU:
contentLayoutParams.bottomMargin=-upMenuLayoutParams.height-moveDistanceY;
checkUpMenuBorder();
contentLayout.setLayoutParams(contentLayoutParams);
caseSHOW_DOWN_MENU:
contentLayoutParams.topMargin=moveDistanceY;
checkDownMenuBorder();
contentLayout.setLayoutParams(contentLayoutParams);
break;
caseHIDE_DOWN_MENU:
contentLayoutParams.topMargin=-downMenuLayoutParams.height+moveDistanceY;
checkDownMenuBorder();
contentLayout.setLayoutParams(contentLayoutParams);
default:
break;
}

break;
caseMotionEvent.ACTION_UP:
yUp=event.getRawY();
intupDistanceY=(int)(yUp-yDown);
if(isSliding){
//手指抬起时，进行判断当前手势的意图
switch(slideState){
caseSHOW_UP_MENU:
if(shouldScrollToUpMenu()){
scrollToUpMenu();
}else{
scrollToContentFromUpMenu();
}
break;
caseHIDE_UP_MENU:
if(shouldScrollToContentFromUpMenu()){
scrollToContentFromUpMenu();
}else{
scrollToUpMenu();
}
break;
caseSHOW_DOWN_MENU:
if(shouldScrollToDownMenu()){
scrollToDownMenu();
}else{
scrollToContentFromDownMenu();
}
break;
caseHIDE_DOWN_MENU:
if(shouldScrollToContentFromDownMenu()){
scrollToContentFromDownMenu();
}else{
scrollToDownMenu();
}
break;
default:
break;
}
}elseif(upDistanceY=touchSlop&&moveDistanceY<0){
isSliding=true;
slideState=HIDE_UP_MENU;
}
}elseif(isDownMenuVisible){
if(!isSliding&&Math.abs(moveDistanceY)>=touchSlop&&moveDistanceY>0){
isSliding=true;
slideState=HIDE_DOWN_MENU;
}
}else{
if(!isSliding&&Math.abs(moveDistanceY)>=touchSlop&&moveDistanceY>0
&&Math.abs(moveDistanceX)=touchSlop&&moveDistanceY<0
&&Math.abs(moveDistanceX)0){
contentLayoutParams.bottomMargin=0;
}elseif(contentLayoutParams.bottomMargin<-upMenuLayoutParams.height){
contentLayoutParams.bottomMargin=-upMenuLayoutParams.height;
}
}
/**
*在滑动过程中检查下侧菜单的边界值，防止绑定布局滑出屏幕。
*/
privatevoidcheckDownMenuBorder(){
if(contentLayoutParams.topMargin>0){
contentLayoutParams.topMargin=0;
}elseif(contentLayoutParams.topMargin<-downMenuLayoutParams.height){
contentLayoutParams.topMargin=-downMenuLayoutParams.height;
}
}
/**
*判断是否应该滚动将上侧菜单展示出来。如果手指移动距离大于上侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
*就认为应该滚动将上侧菜单展示出来。
*
*@return如果应该将上侧菜单展示出来返回true，否则返回false。
*/
privatebooleanshouldScrollToUpMenu(){
returnyUp-yDown>upMenuLayoutParams.height/2||getScrollVelocity()>SNAP_VELOCITY;
}

/**
*判断是否应该滚动将下侧菜单展示出来。如果手指移动距离大于下侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
*就认为应该滚动将下侧菜单展示出来。
*
*@return如果应该将下侧菜单展示出来返回true，否则返回false。
*/
privatebooleanshouldScrollToDownMenu(){
returnyDown-yUp>downMenuLayoutParams.height/2||getScrollVelocity()>SNAP_VELOCITY;
}

/**
*判断是否应该从上侧菜单滚动到内容布局，如果手指移动距离大于上侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
*就认为应该从上侧菜单滚动到内容布局。
*
*@return如果应该从上侧菜单滚动到内容布局返回true，否则返回false。
*/
privatebooleanshouldScrollToContentFromUpMenu(){
returnyDown-yUp>upMenuLayoutParams.height/2||getScrollVelocity()>SNAP_VELOCITY;
}

/**
*判断是否应该从下侧菜单滚动到内容布局，如果手指移动距离大于下侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY，
*就认为应该从下侧菜单滚动到内容布局。
*
*@return如果应该从下侧菜单滚动到内容布局返回true，否则返回false。
*/
privatebooleanshouldScrollToContentFromDownMenu(){
returnyUp-yDown>downMenuLayoutParams.height/2||getScrollVelocity()>SNAP_VELOCITY;
}
/**
*获取手指在绑定布局上的滑动速度。
*
*@return滑动速度，以每秒钟移动了多少像素值为单位。
*/
privateintgetScrollVelocity(){
mVelocityTracker.computeCurrentVelocity(1000);
intvelocity=(int)mVelocityTracker.getXVelocity();
returnMath.abs(velocity);
}

classUpMenuScrollTaskextendsAsyncTask{

@Override
protectedIntegerdoInBackground(Integer...speed){
intbottomMargin=contentLayoutParams.bottomMargin;
//根据传入的速度来滚动界面，当滚动到达边界值时，跳出循环。
while(true){
bottomMargin=bottomMargin+speed[0];
if(bottomMargin<-upMenuLayoutParams.height){
bottomMargin=-upMenuLayoutParams.height;
break;
}
if(bottomMargin>0){
bottomMargin=0;
break;
}
publishProgress(bottomMargin);
//为了要有滚动效果产生，每次循环使线程睡眠一段时间，这样肉眼才能够看到滚动动画。
sleep(15);
}
if(speed[0]>0){
isUpMenuVisible=false;
}else{
isUpMenuVisible=true;
}
isSliding=false;
returnbottomMargin;
}

@Override
protectedvoidonProgressUpdate(Integer...bottomMargin){
contentLayoutParams.bottomMargin=bottomMargin[0];
contentLayout.setLayoutParams(contentLayoutParams);
unFocusBindView();
}

@Override
protectedvoidonPostExecute(IntegerbottomMargin){
contentLayoutParams.bottomMargin=bottomMargin;
contentLayout.setLayoutParams(contentLayoutParams);
}
}

classDownMenuScrollTaskextendsAsyncTask{

@Override
protectedIntegerdoInBackground(Integer...speed){
inttopMargin=contentLayoutParams.topMargin;
//根据传入的速度来滚动界面，当滚动到达边界值时，跳出循环。
while(true){
topMargin=topMargin+speed[0];
if(topMargin<-downMenuLayoutParams.height){
topMargin=-downMenuLayoutParams.height;
break;
}
if(topMargin>0){
topMargin=0;
break;
}
publishProgress(topMargin);
//为了要有滚动效果产生，每次循环使线程睡眠一段时间，这样肉眼才能够看到滚动动画。
sleep(15);
}
if(speed[0]>0){
isDownMenuVisible=false;
}else{
isDownMenuVisible=true;
}
isSliding=false;
returntopMargin;
}

@Override
protectedvoidonProgressUpdate(Integer...topMargin){
contentLayoutParams.topMargin=topMargin[0];
contentLayout.setLayoutParams(contentLayoutParams);
unFocusBindView();
}

@Override
protectedvoidonPostExecute(IntegertopMargin){
contentLayoutParams.topMargin=topMargin;
contentLayout.setLayoutParams(contentLayoutParams);
}
}
/**
*使当前线程睡眠指定的毫秒数。
*
*@parammillis
*指定当前线程睡眠多久，以毫秒为单位
*/
privatevoidsleep(longmillis){
try{
Thread.sleep(millis);
}catch(InterruptedExceptione){
e.printStackTrace();
}
}
/**
*使用可以获得焦点的控件在滑动的时候失去焦点。
*/
privatevoidunFocusBindView(){
if(mBindView!=null){
mBindView.setPressed(false);
mBindView.setFocusable(false);
mBindView.setFocusableInTouchMode(false);
}
}

/**
*将界面滚动到上侧菜单界面，滚动速度设定为-30.
*/
publicvoidscrollToUpMenu(){
newUpMenuScrollTask().execute(-30);
}

/**
*将界面滚动到下侧菜单界面，滚动速度设定为-30.
*/
publicvoidscrollToDownMenu(){
newDownMenuScrollTask().execute(-30);
}

/**
*将界面从上侧菜单滚动到内容界面，滚动速度设定为30.
*/
publicvoidscrollToContentFromUpMenu(){
newUpMenuScrollTask().execute(30);
}

/**
*将界面从下侧菜单滚动到内容界面，滚动速度设定为30.
*/
publicvoidscrollToContentFromDownMenu(){
newDownMenuScrollTask().execute(30);
}

/**
*上侧菜单是否完全显示出来，滑动过程中此值无效。
*
*@return上侧菜单完全显示返回true，否则返回false。
*/
publicbooleanisUpLayoutVisible(){
returnisUpMenuVisible;
}

/**
*下侧菜单是否完全显示出来，滑动过程中此值无效。
*
*@return下侧菜单完全显示返回true，否则返回false。
*/
publicbooleanisDownLayoutVisible(){
returnisDownMenuVisible;
}

/**
*在onLayout中重新设定上侧菜单、下侧菜单、以及内容布局的参数。
*/
@Override
protectedvoidonLayout(booleanchanged,intl,intt,intr,intb){
super.onLayout(changed,l,t,r,b);
if(changed){
//获取上侧菜单布局对象
upMenuLayout=getChildAt(0);
upMenuLayoutParams=(MarginLayoutParams)upMenuLayout.getLayoutParams();
//获取下侧菜单布局对象
downMenuLayout=getChildAt(1);
downMenuLayoutParams=(MarginLayoutParams)downMenuLayout.getLayoutParams();
//获取内容布局对象
contentLayout=getChildAt(2);
contentLayoutParams=(RelativeLayout.LayoutParams)contentLayout.getLayoutParams();
contentLayoutParams.height=screenHeight;
contentLayout.setLayoutParams(contentLayoutParams);
}
}
/**
*回收VelocityTracker对象。
*/
privatevoidrecycleVelocityTracker(){
mVelocityTracker.recycle();
mVelocityTracker=null;
}
}

下面是使用实例：

importandroid.os.Bundle;
importandroid.widget.ArrayAdapter;
importandroid.widget.LinearLayout;
importandroid.widget.ListView;
importandroid.app.Activity;

/**
*滑动菜单Demo主Activity
*
*@authorguolin
*/
publicclassMainActivity2extendsActivity{

/**
*双向滑动菜单布局
*/
privateUpAndDownSlidinglayoutupdownSldingLayout;

/**
*在内容布局上显示的ListView
*/
privateListViewcontentList;
privateLinearLayoutll;
/**
*ListView的适配器
*/
privateArrayAdaptercontentListAdapter;

/**
*用于填充contentListAdapter的数据源。
*/
privateString[]contentItems={"ContentItem1","ContentItem2","ContentItem3",
"ContentItem4","ContentItem5","ContentItem6","ContentItem7",
"ContentItem8","ContentItem9","ContentItem10","ContentItem11",
"ContentItem12","ContentItem13","ContentItem14","ContentItem15",
"ContentItem16"};

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
ll=(LinearLayout)findViewById(R.id.content);
updownSldingLayout=(UpAndDownSlidinglayout)findViewById(R.id.updown_sliding_layout);
contentList=(ListView)findViewById(R.id.contentList);
contentListAdapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,
contentItems);
contentList.setAdapter(contentListAdapter);
updownSldingLayout.setScrollEvent(ll);
}

}

布局文件：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Android实现上下菜单双向滑动效果

热门推荐

随机推荐