Android 开发第三弹:自定义左右菜单(滑动动画+蒙版效果)

下面的截图……哎,因为1080P在Windows 10上虽然适配了,但大部分软件并没有跟上,比如某个录制GIF的软件,所以这里有一定的偏移导致画面不完整,但效果大概就是这么一个效果了。

MainUI.java

首先需要这么一个类,在这里一些UI的滑动呀之类的都会定义。首先吧,定义好这些变量,当然了,实际开发过程中肯定需要哪一个就添加上哪一个的。

FrameLayout middleMenu; FrameLayout middleMask; ID = LEFT_ID = ID+0xaabbcc;MIDDLE_ID = ID+0xaaccbb;RIGHT_ID = ID+0xccbbaa;

构造函数也是不能少的。

public MainUI(Context context) {super(context);initView(context);}public MainUI(Context context, AttributeSet attrs) {super(context, attrs);initView(context);}

initView就是用来初始化视图的,相应的功能我都写在注释上了,就不多废话了。

(Context context){this.context=context;mScroller = new Scroller(context,new DecelerateInterpolator());leftMenu=new FrameLayout(context);middleMenu = new FrameLayout(context);rightMenu = new FrameLayout(context);middleMask = new FrameLayout(context);leftMenu.setBackgroundColor(Color.RED); // 设置背景颜色middleMenu.setBackgroundColor(Color.GREEN);rightMenu.setBackgroundColor(Color.RED);middleMask.setBackgroundColor(0x88000000);leftMenu.setId(LEFT_ID);middleMenu.setId(MIDDLE_ID);rightMenu.setId(RIGHT_ID);addView(leftMenu); // 添加至ViewaddView(middleMenu);addView(rightMenu);addView(middleMask);middleMask.setAlpha(0); // 设置middleMask的透明度}

然后就是它们的一些布局呀,balabala……

(int widthMeasureSepc, int heightMeasureSpec){super.onMeasure(widthMeasureSepc, heightMeasureSpec);middleMenu.measure(widthMeasureSepc, heightMeasureSpec);middleMask.measure(widthMeasureSepc,heightMeasureSpec);int realWidth = MeasureSpec.getSize(widthMeasureSepc); // 获取实际(屏幕)宽度int tempWidthMeasure = MeasureSpec.makeMeasureSpec((int)(realWidth*0.7f), MeasureSpec.EXACTLY); // 左右侧的宽度为中间宽度的0.7leftMenu.measure(tempWidthMeasure, heightMeasureSpec); // 左右侧的高度和中间的一样rightMenu.measure(tempWidthMeasure, heightMeasureSpec);}(boolean changed, int l, int t, int r,int b){ // l,t,r,b分别为中间部分的左、上、右、下边界super.onLayout(changed, l, t, r, b); // 设置布局middleMenu.layout(l, t, r, b); // 中间部分的四个边界不变middleMask.layout(l, t, r, b); // 蒙版的四个边界和中间部分一样leftMenu.layout(l – leftMenu.getMeasuredWidth(), t, r, b); // 左侧部分的左边边界等于中间部分的左边边界减去左侧部分的宽度rightMenu.layout(l + middleMenu.getMeasuredWidth(), t, // 右侧部分的左边边界则等于中间部分的左边边界加上中间部分的宽度l + middleMenu.getMeasuredWidth() + // 右侧部分的右边边界等于中间部分的左边边界加上中间部分的宽度加上右侧部分的宽度rightMenu.getMeasuredWidth(), b);} (){System.out.println(“透明度”+middleMask.getAlpha());return middleMask.getAlpha();}(int x, int y){super.scrollTo(x,y);onMiddleMask(); // 输出透明度int curX = Math.abs(getScrollX());float scale = curX/(float)leftMenu.getMeasuredWidth(); // 设置透明度的渐变middleMask.setAlpha(scale);}

再用两个布尔值来确定是否在左右滑动等。

isleftrightevent; // 判断是否是左右滑动 (MotionEvent ev){if(!isTestComete){ // 没有完成滑动动作getEventType(ev); ;}if(isleftrightevent){ // 左右滑动switch (ev.getActionMasked()) {case MotionEvent.ACTION_MOVE:int curScrollX = getScrollX();int dis_x = (int) (ev.getX() – point.x);int expectX = -dis_x + curScrollX;int finalX = 0;if (expectX < 0) {finalX = Math.max(expectX, -leftMenu.getMeasuredWidth());} else {finalX = Math.min(expectX, rightMenu.getMeasuredWidth());}scrollTo(finalX, 0);point.x = (int) ev.getX();break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:curScrollX = getScrollX();if (Math.abs(curScrollX) > leftMenu.getMeasuredWidth() >> 1) {if (curScrollX < 0) {mScroller.startScroll(curScrollX, 0, -leftMenu.getMeasuredWidth() – curScrollX, 0, 200);} else {mScroller.startScroll(curScrollX, 0, leftMenu.getMeasuredWidth() – curScrollX, 0, 200);}} else {mScroller.startScroll(curScrollX, 0, -curScrollX, 0, 200);}invalidate();isleftrightevent = false;isTestComete = false;break;}}else{switch (ev.getActionMasked()){case MotionEvent.ACTION_UP:isleftrightevent = false;isTestComete = false;break;default:break;}}return super.dispatchTouchEvent(ev);}(){super.computeScroll();if(!mScroller.computeScrollOffset()){return;}int tempX = mScroller.getCurrX();scrollTo(tempX, 0);}private Point point = new Point();TEST_DIS = 20; (MotionEvent ev){switch (ev.getActionMasked()){case MotionEvent.ACTION_DOWN:point.x = (int)ev.getX();point.y = (int) ev.getY();super.dispatchTouchEvent(ev);break;case MotionEvent.ACTION_MOVE:int dX = Math.abs((int)ev.getX() – point.x);int dY = Math.abs((int)ev.getY() – point.y);if(dX >= TEST_DIS && dX>dY ){ // 左右滑动isleftrightevent = true;isTestComete = true;point.x = (int)ev.getX();point.y = (int)ev.getY();}else if(dY>=TEST_DIS && dY>dX ){ // 上下滑动isleftrightevent = false;isTestComete = true;point.x = (int)ev.getX();point.y = (int)ev.getY();}break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:super.dispatchTouchEvent(ev);isleftrightevent = false;isTestComete = false;break;}}LeftMenu.java

下面继续看看如何在左侧的目录中添加一个Button。

你需要创建一个LeftMenu类,并扩展Fragment,因此你需要

import android

如果你不知道如何添加,请看这里:

我是在旅行吗?也许是的。

Android 开发第三弹:自定义左右菜单(滑动动画+蒙版效果)

相关文章:

你感兴趣的文章:

标签云: