最近有一个小的效果，就是界面上悬浮一个按钮且这个按钮可以任意拖拽，并且自动吸附到边上。其实这个功能不是很难，不过也搞了我大概一天的时间。特此记录 一下。
PS:这篇文章的实现方式对性能实在是不怎么好而且还有局限性，最近写了一个更加好的方式可以去看看。《安卓可拖拽悬浮按钮二》
设计思路：
- 首先我们要让一个按钮看起来像浮起来的一样。
- 让它真实的跟随手指移动起来。
- 自动吸附到窗体边缘。
解决方案：
- 制作一个悬浮按钮
我们本能的想到可以用design包中的FloatBotton,不过这里并没有用它，我采用了一个普通的TextView，设置阴影的方式其实就是写一个shap.xml文件而已，这样还能向下兼容，为了有点击效果，我写了一个selector.xml文件。
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<!-- Shadow -->
<item android:top="1dp" android:right="1dp">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#08000000"/>
<padding
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#09000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#10000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#11000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#12000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#13000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#14000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#15000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#16000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
</layer-list>
</item>
<!-- Blue button pressed -->
<item>
<shape android:shape="oval">
<solid android:color="#e79811"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_enabled="true">
<layer-list>
<!-- Shadow -->
<item android:top="2dp" android:right="1dp">
<layer-list>
<item>
<shape android:shape="oval">
<solid android:color="#08000000"/>
<padding
android:bottom="4px"
android:left="4px"
android:right="4px"
android:top="4px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#09000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#10000000"/>
<padding
android:bottom="2px"
android:left="2px"
android:right="2px"
android:top="2px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#11000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#12000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#13000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#14000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#15000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#16000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
</layer-list>
</item>
<!-- Blue button -->
<item>
<shape android:shape="oval">
<solid android:color="#F5AB2C"/>
</shape>
</item>
</layer-list>
</item>
</selector>
文件有点长，不过直接拷贝改改样式就能用了，在此吐槽一下简书的markdowm编辑器，代码拷贝过来居然不能自动格式化，或许是我不会用吧！到此，一个简单的悬浮按钮就这么实现了。
- 让这个TextView跟随自己的手指移动而移动。这里可以用两种方式
- 使用setTranslationX和setTranslationY方法，不过这里有个问题控件是跟随移动起来了，但是并没有改变view的真实位置，view此时还是在原来的初始位置。需要自己当手指抬起来之后把view的位置改变到当前位置才行。这里我并没有用这个方法。我使用的是第二种方式
- 改变view的margin属性来达到移动view的功能，这种方式是真实改变view的位置的。
为了实现这个功能，我们自定义了一个view继承自TextView。重写它的onTouchEvent.
@Overridepublic boolean onTouchEvent(MotionEvent event) {
int rawX = (int) event.getRawX();
int rawY = (int) event.getRawY();
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//为了避免事件冲突，当按钮这个按钮的时候就拦截事件。
getParent().requestDisallowInterceptTouchEvent(true);
//记录初始的偏移量
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams)getLayoutParams();
dx = rawX - lParams.leftMargin;
dy = rawY - lParams.topMargin;
break;
case MotionEvent.ACTION_MOVE:
//获取移动偏移量
int offsetX=rawX-dx;
int offsetY=rawY-dy;
//框体边框限定
int maxX=screenWidth-getWidth();
int minX=getWidth();
int minY=DisplayUtil.getStatusHeight2((Activity) getContext());
int maxY=screenHeight-DisplayUtil.dip2px(getContext(),53)-minY-getHeight();
if(rawX<minX){
offsetX=0;
}else if(offsetX>maxX){
offsetX=maxX;
}
if(rawY<minY+getHeight()/2){
offsetY=0;
}else if(rawY>maxY){
offsetY=maxY;
}
int distance= (int) Math.sqrt(Math.pow(offsetX,2)+Math.pow(offsetY,2));
//改变view的margin属性，从而移动view
if(distance>touchSlop+10){
isDrag=true;
RelativeLayout.LayoutParams layoutParams =(RelativeLayout.LayoutParams)getLayoutParams();
layoutParams.leftMargin = offsetX;
layoutParams.topMargin = offsetY;
setLayoutParams(layoutParams);
}
break;
case MotionEvent.ACTION_UP:
//这里做窗体吸附工作
if(isDrag){
isDrag=false;
if(rawX>=screenWidthHalf){
if(rawX>screenWidth-getWidth()){
rawX=screenWidth-getWidth();
}
startAnimaLeft(rawX,screenWidth-getWidth());
}else {
int from;
if(rawX<getWidth()){
from=0;
}else {
from=rawX-getWidth();
}
startAnimaLeft(from,0);
}
}else {
if(listener!=null){
listener.onClick(this);
}
}
break;
}
return true;
}
- 窗体边缘吸附
其实原理很简单就是当手指离开控件的时候，其计算一下当前手指离开前的位置，是在屏幕的左边还是右边，如果是左边则水平往左移动，如果是右边则水平往右移动即可，为了效果更好这个用了属性动画来实现的左移右移的效果。
case MotionEvent.ACTION_UP:
//这里做窗体吸附工作
if(isDrag){
isDrag=false;
if(rawX>=screenWidthHalf){//如果当前位置大于等于屏幕的一半则右移
if(rawX>screenWidth-getWidth()){
rawX=screenWidth-getWidth();
}
startAnimaLeft(rawX,screenWidth-getWidth());
}else {//左移
int from;
if(rawX<getWidth()){
from=0;
}else {
from=rawX-getWidth();
}
startAnimaLeft(from,0);
}
}else {
if(listener!=null){
listener.onClick(this);
}
}
break;
}
return true;
这里是属性动画函数
private void startAnimaLeft(int from,int to){
ObjectAnimator oa=ObjectAnimator.ofInt(new LayoutWapper(this),"leftMargin",from,to);
oa.setDuration(500);
oa.setInterpolator(new DecelerateInterpolator());
oa.setStartDelay(100);
oa.start();
}
private class LayoutWapper {
private View target;
public LayoutWapper(View target) {
this.target = target;
}
public void setLeftMargin(int value) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)getLayoutParams();
layoutParams.leftMargin = value;
target.setLayoutParams(layoutParams);
}
}
至此，所有的关键功能就都实现好了。需要注意的是，我们改变view的margin的时候用的是RelativeLayout.LayoutParams所以使用此view的时候它的父控件也应该要是RelativeLayout，否则会报错，当然你也可以随意的修改成你想要的方式。
网友评论