前言：
為了更好的推廣拉新聂渊，懸浮按鈕分享的使用越來(lái)越多，京東 識(shí)貨首頁(yè)都使用了常駐的懸浮按鈕四瘫，我們要實(shí)現(xiàn)的功能如下：
????1.懸浮按鈕可以上下拖動(dòng)
????2.頁(yè)面滑動(dòng)的時(shí)候，懸浮按鈕移動(dòng)到最右側(cè)隱藏起來(lái)欲逃，頁(yè)面停止滑動(dòng)的時(shí)候顯示出來(lái)
????3.懸浮按鈕點(diǎn)擊跳轉(zhuǎn)到指定的分享頁(yè)面
確定了功能點(diǎn)找蜜，實(shí)現(xiàn)了一個(gè)Demo來(lái)看下：
分析實(shí)現(xiàn)：
??1.功能實(shí)現(xiàn)起來(lái)其實(shí)并不復(fù)雜，首先按鈕能夠被拖動(dòng)稳析，就要處理他的onTouch事件洗做，所以我們就定義一個(gè)ShareImageView繼承ImageView，重寫(xiě)它的onTouchEvent方法 處理滑動(dòng)事件 控制view的移動(dòng)彰居，這里我們使用更新LayoutParams來(lái)更新位置
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
int touchSlop = 2;
switch (action) {
case MotionEvent.ACTION_DOWN:
isOnclick = true;
startX = event.getRawX();
startY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
float x = event.getRawX();
float Y = event.getRawY();
// 偏移量
int offsetX = (int) (x - startX);
int offsetY = (int) (Y - startY);
if (Math.abs(offsetY) > touchSlop) {
isOnclick = false;
}
// 增量更新
int margin = getTop() + offsetY;
if (margin > top && margin < (screenHeight - bottom)) {
//layout(getLeft(), getTop()+offsetY, getRight(),getBottom() + offsetY);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
//layoutParams.leftMargin = getLeft() + offsetX;
layoutParams.topMargin = margin;
setLayoutParams(layoutParams);
}
// 更新起始點(diǎn)
startX = x;
startY = Y;
break;
case MotionEvent.ACTION_UP:
if (isOnclick){
performClick();
}
break;
}
return true;
}
以上有兩個(gè)注意的點(diǎn)：1.setLayoutParams更新位置是可以滑動(dòng)出屏幕的 這樣的體驗(yàn)肯定是不好的诚纸，所以要給它一個(gè)限制 ??2.在手指抬起的時(shí)候調(diào)用一下performClick();不然setOnClickListener不會(huì)被觸發(fā)。
??2.頁(yè)面滑動(dòng)時(shí)候顯示與隱藏陈惰，就要監(jiān)聽(tīng)recycleview的滾動(dòng)事件畦徘，SCROLL_STATE_IDLE，SCROLL_STATE_DRAGGING抬闯，SCROLL_STATE_SETTLING：
當(dāng)前屏幕停止?jié)L動(dòng)井辆，屏幕在滾動(dòng) 且 用戶(hù)仍在觸碰或手指還在屏幕上，隨用戶(hù)的操作屏幕上產(chǎn)生的慣性滑動(dòng)溶握。兩種滑動(dòng)事件觸發(fā)的時(shí)候都要進(jìn)行監(jiān)聽(tīng) 做隱藏處理杯缺，屏幕停止?jié)L動(dòng)時(shí)候顯示出來(lái)
private class MyScrollListener extends RecyclerView.OnScrollListener {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
switch (newState) {
//0：當(dāng)前屏幕停止?jié)L動(dòng)；1時(shí)：屏幕在滾動(dòng) 且 用戶(hù)仍在觸碰或手指還在屏幕上睡榆；2時(shí)：隨用戶(hù)的操作萍肆，屏幕上產(chǎn)生的慣性滑動(dòng)；
case RecyclerView.SCROLL_STATE_IDLE:
isRecycleViewScroll = false;
showShareImage();
break;
case RecyclerView.SCROLL_STATE_DRAGGING:
if (!isRecycleViewScroll && !isBottom && !isTop) {
isRecycleViewScroll = true;
hideShareImage();
}
break;
case RecyclerView.SCROLL_STATE_SETTLING:
if (!isRecycleViewScroll && !isBottom && !isTop) {
isRecycleViewScroll = true;
hideShareImage();
}
break;
}
}
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
boolean bottom = recyclerView.canScrollVertically(1);
boolean top = recyclerView.canScrollVertically(-1);
if (!bottom) {
isBottom = true;
} else {
isBottom = false;
}
if (!top) {
isTop = true;
} else {
isTop = false;
}
}
}
此過(guò)程中胀屿，滑動(dòng)到頂部和底部再繼續(xù)滑動(dòng)還是會(huì)觸發(fā)滑動(dòng)事件 所以要做一個(gè)判斷塘揣。
recyclerView.canScrollVertically(1);返回false的時(shí)候 判定滑動(dòng)到了底部
recyclerView.canScrollVertically(-1);返回false的時(shí)候 判定滑動(dòng)到了頂部
3.最后懸浮按鈕添加一下屬性動(dòng)畫(huà)
private void showShareImage() {
float translationX = shareImageView.getTranslationX();
ObjectAnimator animator = ObjectAnimator.ofFloat(shareImageView, "translationX", 0);
animator.setDuration(600);
if (!isAnimatorEnd) {
animator.setStartDelay(1200);
}
animator.start();
}
private void hideShareImage() {
isAnimatorEnd = false;
float translationX = shareImageView.getTranslationX();
ObjectAnimator animator = ObjectAnimator.ofFloat(shareImageView, "translationX", shareImageView.dp2px(getActivity(),70));
animator.setDuration(600);
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationEnd(Animator animation) {
isAnimatorEnd = true;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
}
注意動(dòng)畫(huà)未結(jié)束時(shí) 延時(shí)執(zhí)行顯示動(dòng)畫(huà)
詳細(xì)代碼見(jiàn) :
github地址：https://github.com/l845590743/ShareButton
如果對(duì)您有幫助，歡迎小星星一下??
