Android滑动菜单
先上图方便大家理解,
中间绿色部分是拖动的按钮,白易做图域是它活动的范围,朝不同的方向拖动,将进入不同的Activity,这就是所谓的滑动菜单。类似于滑动解锁,而且UI部分有待于提高,如果美工跟上来的话,也是不错的选择。
下面开始实现:
首先,肯定是绘制两个圆形,无可置疑;圆心点重合,为了区分 ,所以设置了不同颜色;
灰色:固定不动的摇杆背景(也意味着摇杆的活动范围);
红色:摇杆;
然后考虑:红色摇杆肯定跟随手指触屏的位置而移动,那么这个很easy啦,只要在触屏事件中处理,将获取的触屏XY坐标赋值与摇杆XY坐标即可;这个没问题;但是紧接着在思考一个问题:
一般情况下,我们不可能希望摇杆一直跟随手指位置,所以需要一个摇杆的活动区域,也就如同上图中的灰易做图域,在灰易做图域内摇杆可以随着用户的触屏位置移动,但是一旦用户触屏位置在活动区域之外,摇杆就不应该跑出灰易做图域;所以具体实现步骤如下:
1) 得到通过摇杆的坐标与触屏点的坐标得到所形成的角度Angle
2) 根据Angle,以及已知所在圆的半径,算出摇杆所在灰色圆形上做圆周运动的当前X,Y坐标;
首先第一步: 算出摇杆坐标与触屏坐标形成的角度
我们肯定已知摇杆当前坐标,并且当用户触屏时的坐标也可以在触屏按键中得到,那么获取的方法就可以写成一个方法,方法如下:
[java]
/***
* 得到两点之间的弧度
*/
public double getRad(float px1, float py1, float px2, float py2) {
float x = px2 - px1;// 得到两点X的距离
float y = py1 - py2;// 得到两点Y的距离
float xie = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));// 算出斜边长
float cosAngle = x / xie;// 得到这个角度的余弦值(通过三角函数中的定理 :邻边/斜边=角度余弦值)
float rad = (float) Math.acos(cosAngle);// 通过反余弦定理获取到其角度的弧度
if (py2 < py1) {// 注意:当触屏的位置Y坐标<摇杆的Y坐标我们要取反值-0~-180
rad = -rad;
}
return rad;
}
/***
* 得到两点之间的弧度
*/
public double getRad(float px1, float py1, float px2, float py2) {
float x = px2 - px1;// 得到两点X的距离
float y = py1 - py2;// 得到两点Y的距离
float xie = (float) Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));// 算出斜边长
float cosAngle = x / xie;// 得到这个角度的余弦值(通过三角函数中的定理 :邻边/斜边=角度余弦值)
float rad = (float) Math.acos(cosAngle);// 通过反余弦定理获取到其角度的弧度
if (py2 < py1) {// 注意:当触屏的位置Y坐标<摇杆的Y坐标我们要取反值-0~-180
rad = -rad;
}
return rad;
}
在Java中 Math类中的反余弦函数返回的不是角度是弧度,这一点要格外注意;另外一点就是,因为三角函数角度范围是0~180度,所以反之应该是-0~-180度;通过此函数获取到摇杆与用户触屏位置所形成的角度之后,我们就可以通过圆周公式来得到其摇杆的XY坐标了,方法如下:
[java]
/**
* 圆周运动的旋转点
* @param centerX 旋转点X
* @param centerY 旋转点Y
* @param rad 旋转的弧度
*/
public void getXY(float centerX, float centerY, float R, double rad) {
// 获取圆周运动的X坐标
SmallRockerCircleX = (float) (R * Math.cos(rad)) + centerX;
// 获取圆周运动的Y坐标
SmallRockerCircleY = (float) (R * Math.sin(rad)) + centerY;
}
/**
* 圆周运动的旋转点
* @param centerX 旋转点X
* @param centerY 旋转点Y
* @param rad 旋转的弧度
*/
public void getXY(float centerX, float centerY, float R, double rad) {
// 获取圆周运动的X坐标
SmallRockerCircleX = (float) (R * Math.cos(rad)) + centerX;
// 获取圆周运动的Y坐标
SmallRockerCircleY = (float) (R * Math.sin(rad)) + centerY;
}
圆周运动公式:通过三角函数定理得出:
X坐标:所在圆的半径*角度的余弦值
Y坐标:所在圆形半径*角度的正弦值
圆周的大小,由所在圆的半径R的大小来决定;
通过以上的公式我们就可以让摇杆在灰色圆形上做圆周运动,当然除此之外我们还要注意三点:
1:做圆周运动的大小,应该跟灰易做图域的半径相同;
2:触屏事件中应该首先判定用户触屏的位置是否在灰易做图域中,如果不在,我们就应该获取摇杆与触屏点的角度然后获取摇杆应该在圆周运动上的XY坐标;如果在,就没有处理了,只要将摇杆位置随着用户点击位置就好了;
3:在触屏事件中,当用户手指离开屏幕后,应该让摇杆的位置恢复到初始的位置状态;
下面是整个项目的MySu易做图ceView中全部代码:
[java]
package com.example.test;
import android.content.Context;
import android.content.Intent;
import android.graphics.Canvas;
补充:移动开发 , Android ,