实现思路
- 通过重写控件的onTouchEvent方法监听触摸效果。
- 通过View的setX()和setY()方法实现移动。
- 使用属性动画实现边缘吸附效果。
源代码没多少行,这里先把代码线上。此处我是继承了FloatingActionButton,使它拥有了拖拽移动的功能。
public class DragFloatActionButton extends FloatingActionButton{
private int screenWidth;
private int screenHeight;
private int screenWidthHalf;
private int statusHeight;
public DragFloatActionButton(Context context) {
super(context);
init();
}
public DragFloatActionButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public DragFloatActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init(){
screenWidth= DisplayUtil.getMobileWidth(getContext());
screenWidthHalf=screenWidth/2;
screenHeight=DisplayUtil.getMobileHeight(getContext());
statusHeight=DisplayUtil.getStatusHeight((Activity) getContext());
}
private int lastX;
private int lastY;
private boolean isDrag;
@Override
public boolean onTouchEvent(MotionEvent event) {
int rawX = (int) event.getRawX();
int rawY = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
isDrag=false;
getParent().requestDisallowInterceptTouchEvent(true);
lastX=rawX;
lastY=rawY;
break;
case MotionEvent.ACTION_MOVE:
isDrag=true;
//计算手指移动了多少
int dx=rawX-lastX;
int dy=rawY-lastY;
//这里修复一些华为手机无法触发点击事件的问题
int distance= (int) Math.sqrt(dx*dx+dy*dy);
if(distance==0){
isDrag=false;
break;
}
float x=getX()+dx;
float y=getY()+dy;
//检测是否到达边缘 左上右下
x=x<0?0:x>screenWidth-getWidth()?screenWidth-getWidth():x;
y=y<statusHeight?statusHeight:y+getHeight()>screenHeight?screenHeight-getHeight():y;
setX(x);
setY(y);
lastX=rawX;
lastY=rawY;
//Log.i("getX="+getX()+";getY="+getY()+";screenHeight="+screenHeight);
break;
case MotionEvent.ACTION_UP:
if(isDrag){
//恢复按压效果
setPressed(false);
Log.i("getX="+getX()+";screenWidthHalf="+screenWidthHalf);
if(rawX>=screenWidthHalf){
animate().setInterpolator(new DecelerateInterpolator())
.setDuration(500)
.xBy(screenWidth-getWidth()-getX())
.start();
}else {
ObjectAnimator oa=ObjectAnimator.ofFloat(this,"x",getX(),0);
oa.setInterpolator(new DecelerateInterpolator());
oa.setDuration(500);
oa.start();
}
}
break;
}
//如果是拖拽则消耗事件,否则正常传递即可。
return isDrag || super.onTouchEvent(event);
}
}
<test.com.customview.DragFloatActionButton
android:id="@+id/but"
android:layout_width="30dp"
android:layout_height="30dp"
/>
说明:这边是继承了FloatingActionButton,这是design的风格,悬浮按钮,默认圆形的背景色,如果你要设置图片会放入中间,
所以你想让这个悬浮按钮是一个图片,可以继承ImageButton,这样就可以了。
2,代码DisplayUtil没有贴出来,如下
/**
* 获得屏幕相关的辅助类
*
*
*
*/
public class ScreenUtils
{
private ScreenUtils()
{
/* cannot be instantiated */
throw new UnsupportedOperationException("cannot be instantiated");
}
/**
* 获得屏幕高度
*
* @param context
* @return
*/
public static int getScreenWidth(Context context)
{
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.widthPixels;
}
/**
* 获得屏幕宽度
*
* @param context
* @return
*/
public static int getScreenHeight(Context context)
{
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.heightPixels;
}
/**
* 获得状态栏的高度
*
* @param context
* @return
*/
public static int getStatusHeight(Context context)
{
int statusHeight = -1;
try
{
Class<?> clazz = Class.forName("com.android.internal.R$dimen");
Object object = clazz.newInstance();
int height = Integer.parseInt(clazz.getField("status_bar_height")
.get(object).toString());
statusHeight = context.getResources().getDimensionPixelSize(height);
} catch (Exception e)
{
e.printStackTrace();
}
return statusHeight;
}
/**
* 获取当前屏幕截图,包含状态栏
*
* @param activity
* @return
*/
public static Bitmap snapShotWithStatusBar(Activity activity)
{
View view = activity.getWindow().getDecorView();
view.setDrawingCacheEnabled(true);
view.buildDrawingCache();
Bitmap bmp = view.getDrawingCache();
int width = getScreenWidth(activity);
int height = getScreenHeight(activity);
Bitmap bp = null;
bp = Bitmap.createBitmap(bmp, 0, 0, width, height);
view.destroyDrawingCache();
return bp;
}
/**
* 获取当前屏幕截图,不包含状态栏
*
* @param activity
* @return
*/
public static Bitmap snapShotWithoutStatusBar(Activity activity)
{
View view = activity.getWindow().getDecorView();
view.setDrawingCacheEnabled(true);
view.buildDrawingCache();
Bitmap bmp = view.getDrawingCache();
Rect frame = new Rect();
activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
int statusBarHeight = frame.top;
int width = getScreenWidth(activity);
int height = getScreenHeight(activity);
Bitmap bp = null;
bp = Bitmap.createBitmap(bmp, 0, statusBarHeight, width, height
- statusBarHeight);
view.destroyDrawingCache();
return bp;
}
}
代码很简单,
手指按下
首先是处理手指按压下的事件,这里我们把拖拽标识符设置为false并记录当前点击的屏幕坐标。然后我们在移动事件处。
手指移动
这里我们把拖拽标识符设置为true,因为手指移动了。然后我们需要计算手指移动了多少偏移量
//计算手指移动了多少
int dx=rawX-lastX;
int dy=rawY-lastY;
而后的两行代码表示控件需要移动的具体距离,后面有一个简单的边缘检测计算。最终通过调用setX以及setY方法实现控件的移动。
手指松开
这里如果是拖拽动作我们才需要处理自己的逻辑否则直接跳过即可。在这里我们首先恢复了按钮的按压效果,在源代码中找到setPressed(boolean)
方法,这是处理按钮点击效果用的,在这里当手指松开后我们需要恢复按钮原来的效果。然后在判断控件需要往哪边吸附,吸附的过程就是做属性动画而已,原理还是不断的改变setX方法让按钮靠边移动
总结
这种实现方式,我们能正常的使用控件的单击时间和长按事件,因为只有当控件拖拽的时候我们才自己消耗事件否则全部交给系统处理。这是一种比较好的实现方式,通过这个例子其实我们还能实现更多的控件移动效果。事实上只需要改变所继承的控件类型就可以了
PS:最近发现在部分华为手机上无法触发点击事件,调试发现当我手指按压的时候会一直触发MotionEvent.ACTION_MOVE事件而事实上我手指一点都没有动,且Log出现的数据显示移动距离一直是0.坑爹。只能加一个距离判断了。上面的代码已经修复了这个问题。