最近有一個小的效果，就是界面上懸浮一個按鈕且這個按鈕可以任意拖拽，并且自動吸附到邊上。其實這個功能不是很難，不過也搞了我大概一天的時間。特此記錄 一下。
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，否則會報錯，當然你也可以隨意的修改成你想要的方式。
