因為項目中涉及到滑動操作,在百度找了一大圈滑動模塊 發(fā)現(xiàn)都不行, 于是自己就根據(jù)效果圖造了個輪子。
廢話不多說,上圖:
1丶布局
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content">
<com.shunbus.passenger.ui.widget.SlideLockView
android:id="@+id/slide_rail"
android:layout_width="287dp"
android:layout_height="54dp"
android:background="@drawable/slidelock_bg">
<!--滑動部 件在自定義View中滑動的塊塊 -->
<ImageView
android:id="@+id/lock_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/slidelock_move_bg" />
</com.shunbus.passenger.ui.widget.SlideLockView>
</FrameLayout>
其中布局中的 android:background="@drawable/slidelock_bg"的背景屬性 名稱為slidelock_bg.xml 下面是背景的xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 填充的顏色 -->
<solid android:color="#D7FBE4" />
<!-- 設置按鈕的四個角為弧形 -->
<!-- android:radius 弧形的半徑 -->
<corners android:radius="180dp" />
</shape>
其中布局中的 android:src="@drawable/slidelock_move_bg""的背景屬性 名稱為slidelock_move_bg.xml 下面是背景的xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@mipmap/move_bt_up"></item>
<item android:state_checked="true" android:drawable="@mipmap/move_bt_down"></item>
</selector>
代碼中的使用方法
SlideLockView slideRail = findViewById(R.id.slide_rail);
slideRail.setCallback(new SlideLockView.Callback() {
@Override
public void onUnlock() {
//滑動成功召调，跳轉(zhuǎn)
Intent intent = new Intent(MyOderActivity.this, 需要跳轉(zhuǎn)的類);
startActivity(intent);
finish();
}
});
}
以下是自定義滑動組件的代碼
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.customview.widget.ViewDragHelper;
import com.shunbus.passenger.R;
/**
* @author： Pan_Hui
* @time： 2021/1/21
* @version： 1.0
* @description： 自定義滑動驗票按鈕
*/
public class SlideLockView extends FrameLayout {
/**
* 滑動滑塊
*/
private View mLockBtn;
/**
* 拽托幫助類
*/
private ViewDragHelper mViewDragHelper;
/**
* 回調(diào)
*/
private Callback mCallback;
/**
* 是否解鎖
*/
private boolean isUnlock = false;
public SlideLockView(@NonNull Context context) {
this(context, null);
}
public SlideLockView(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SlideLockView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
final SlideLockView slideRail = this;
mViewDragHelper = ViewDragHelper.create(this, 0.3f, new ViewDragHelper.Callback() {
private int mTop;
@Override
public boolean tryCaptureView(@NonNull View child, int pointerId) {
//判斷能拽托的View膨桥，這里會遍歷內(nèi)部子控件來決定是否可以拽托蛮浑，我們只需要滑塊可以滑動
return child == mLockBtn;
}
@Override
public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
//拽托子View橫向滑動時回調(diào)，回調(diào)的left只嚣，則是可以滑動的左上角x坐標
int lockBtnWidth = mLockBtn.getWidth();
//限制左右臨界點
int fullWidth = slideRail.getWidth();
//最少的左邊
int leftMinDistance = getPaddingStart();
//最多的右邊
int leftMaxDistance = fullWidth - getPaddingEnd() - lockBtnWidth;
//修復兩端的臨界值
if (left < leftMinDistance) {
return leftMinDistance;
} else if (left > leftMaxDistance) {
return leftMaxDistance;
}
return left;
}
@Override
public int clampViewPositionVertical(@NonNull View child, int top, int dy) {
//拽托子View縱向滑動時回調(diào)沮稚，鎖定頂部padding距離即可，不能不復寫册舞，否則少了頂部的padding蕴掏，位置就偏去上面了
return getPaddingTop();
}
@Override
public void onViewCaptured(@NonNull View capturedChild, int activePointerId) {
super.onViewCaptured(capturedChild, activePointerId);
//捕獲到拽托的View時回調(diào)，獲取頂部距離
mTop = capturedChild.getTop();
}
@Override
public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
//獲取滑塊當前的位置
int currentLeft = releasedChild.getLeft();
//獲取滑塊的寬度
int lockBtnWidth = mLockBtn.getWidth();
//獲取滑道寬度
int fullWidth = slideRail.getWidth();
//一般滑道的寬度调鲸，用來判斷滑塊距離起點近還是終點近
int halfWidth = fullWidth / 2;
//松手位置在小于一半盛杰，并且滑動速度小于1000，則回到左邊
if (currentLeft <= halfWidth && xvel < 1000) {
mViewDragHelper.settleCapturedViewAt(getPaddingStart(), mTop);
} else {
//否則去到右邊（寬度藐石，減去padding和滑塊寬度）
mViewDragHelper.settleCapturedViewAt(fullWidth - getPaddingEnd() - lockBtnWidth, mTop);
}
invalidate();
}
@Override
public void onViewDragStateChanged(int state) {
super.onViewDragStateChanged(state);
int lockBtnWidth = mLockBtn.getWidth();
//限制左右臨界點
int fullWidth = slideRail.getWidth();
//最多的右邊
int leftMaxDistance = fullWidth - getPaddingEnd() - lockBtnWidth;
int left = mLockBtn.getLeft();
if (state == ViewDragHelper.STATE_IDLE) {
//移動到最右邊即供，解鎖完成
if (left == leftMaxDistance) {
//未解鎖才進行解鎖回調(diào)，由于這個判斷會進兩次于微，所以做了標志位限制
if (!isUnlock) {
isUnlock = true;
if (mCallback != null) {
mCallback.onUnlock();
}
}
}
}
}
});
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//找到需要拽托的滑塊
mLockBtn = findViewById(R.id.lock_btn);
if (mLockBtn == null) {
throw new NullPointerException("必須要有一個滑動滑塊");
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
//將onInterceptTouchEvent委托給ViewDragHelper
return mViewDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//將onTouchEvent委托給ViewDragHelper
mViewDragHelper.processTouchEvent(event);
return true;
}
@Override
public void computeScroll() {
super.computeScroll();
//判斷是否移動到頭了逗嫡，未到頭則繼續(xù)
if (mViewDragHelper != null) {
if (mViewDragHelper.continueSettling(true)) {
invalidate();
}
}
}
public interface Callback {
/**
* 當解鎖時回調(diào)
*/
void onUnlock();
}
public void setCallback(Callback callback) {
mCallback = callback;
}
}
需要用到的圖片:
move_bt_down.png
move_bt_up.png
好了,這就是最上面的效果圖的全部代碼了。 轉(zhuǎn)載請標注原創(chuàng)地址謝謝角雷。
