最近有一個(gè)小的效果，就是界面上懸浮一個(gè)按鈕且這個(gè)按鈕可以任意拖拽，并且自動(dòng)吸附到邊上。其實(shí)這個(gè)功能不是很難，不過也搞了我大概一天的時(shí)間。特此記錄 一下。
PS:這篇文章的實(shí)現(xiàn)方式對性能實(shí)在是不怎么好而且還有局限性，最近寫了一個(gè)更加好的方式可以去看看。《安卓可拖拽懸浮按鈕二》
設(shè)計(jì)思路：
- 首先我們要讓一個(gè)按鈕看起來像浮起來的一樣。
- 讓它真實(shí)的跟隨手指移動(dòng)起來。
- 自動(dòng)吸附到窗體邊緣。
解決方案：
- 制作一個(gè)懸浮按鈕
我們本能的想到可以用design包中的FloatBotton,不過這里并沒有用它，我采用了一個(gè)普通的TextView，設(shè)置陰影的方式其實(shí)就是寫一個(gè)shap.xml文件而已，這樣還能向下兼容，為了有點(diǎn)擊效果，我寫了一個(gè)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>
文件有點(diǎn)長，不過直接拷貝改改樣式就能用了，在此吐槽一下簡書的markdowm編輯器，代碼拷貝過來居然不能自動(dòng)格式化，或許是我不會(huì)用吧！到此，一個(gè)簡單的懸浮按鈕就這么實(shí)現(xiàn)了。
- 讓這個(gè)TextView跟隨自己的手指移動(dòng)而移動(dòng)。這里可以用兩種方式
- 使用setTranslationX和setTranslationY方法，不過這里有個(gè)問題控件是跟隨移動(dòng)起來了，但是并沒有改變view的真實(shí)位置，view此時(shí)還是在原來的初始位置。需要自己當(dāng)手指抬起來之后把view的位置改變到當(dāng)前位置才行。這里我并沒有用這個(gè)方法。我使用的是第二種方式
- 改變view的margin屬性來達(dá)到移動(dòng)view的功能，這種方式是真實(shí)改變view的位置的。
為了實(shí)現(xiàn)這個(gè)功能，我們自定義了一個(gè)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:
//為了避免事件沖突，當(dāng)按鈕這個(gè)按鈕的時(shí)候就攔截事件。
getParent().requestDisallowInterceptTouchEvent(true);
//記錄初始的偏移量
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams)getLayoutParams();
dx = rawX - lParams.leftMargin;
dy = rawY - lParams.topMargin;
break;
case MotionEvent.ACTION_MOVE:
//獲取移動(dòng)偏移量
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屬性，從而移動(dòng)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;
}
- 窗體邊緣吸附
其實(shí)原理很簡單就是當(dāng)手指離開控件的時(shí)候，其計(jì)算一下當(dāng)前手指離開前的位置，是在屏幕的左邊還是右邊，如果是左邊則水平往左移動(dòng)，如果是右邊則水平往右移動(dòng)即可，為了效果更好這個(gè)用了屬性動(dòng)畫來實(shí)現(xiàn)的左移右移的效果。
case MotionEvent.ACTION_UP:
//這里做窗體吸附工作
if(isDrag){
isDrag=false;
if(rawX>=screenWidthHalf){//如果當(dāng)前位置大于等于屏幕的一半則右移
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;
這里是屬性動(dòng)畫函數(shù)
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);
}
}
至此，所有的關(guān)鍵功能就都實(shí)現(xiàn)好了。需要注意的是，我們改變view的margin的時(shí)候用的是RelativeLayout.LayoutParams所以使用此view的時(shí)候它的父控件也應(yīng)該要是RelativeLayout，否則會(huì)報(bào)錯(cuò)，當(dāng)然你也可以隨意的修改成你想要的方式。
