我19年一整年都沒寫過博客,說實話沒寫的欲望,現在找到了動機,因為我發現讓我愿意研究的東西,很大一部分因為它有意思,沒什么興趣的知識,除非作業需要,真的不愿意碰,今天介紹的是ViewDragHelper這個工具類,它在你自定義viewGroup時,幫你解決子view拖動、定位、狀態跟蹤,這是官方的解釋,當然,我用大白話在復述一下:子view想要自由飛翔,肯定得先經過父view的允許,而父view把做決定的權利全部交給了ViewDragHelper,雖然這個helper類代碼很長,有1500多行,但搞清楚了它開放給我們的幾個回呼,以及一丁點對事件分發的理解,就可以寫出一個讓你成就感滿滿的控制元件,今天的目標:寫一個右滑就多出兩個子view的控制元件(大約150行代碼就行),

這個例子是仿github上專案寫的,原專案地址https://github.com/daimajia/AndroidSwipeLayout,當然這是精簡版的,別人的代碼總是望而生畏!ViewDragHelper從攔截到處理事件的整個程序,只公布了一個回呼類給我們使用,我們可以從其中選一些對我們有用的去實作,這里,我把我寫這個控制元件實作的類列舉出來:
public abstract boolean tryCaptureView(@NonNull View child, int pointerId);
1.當你拖動子view,這個方法肯定是要實作的,而且必須回傳true,表示你要捕獲你拖動的子view,接下來它的位置資訊、拖動速度等一系列引數才會被記錄,并回傳給你,
public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {return 0;}
2.前面提過,你捕獲控制元件后,helper會回傳給你一些資料,這個方法回傳給你的就是控制元件水平位置資訊, 重點理解left這個值,寫來寫去,就這個left值迷惑人!!!請慢慢品味下面這句話:以child父布局的左上角頂點為坐標原點,以右為x軸正方向,下為y軸正方向, left值等于child水平方向劃過的像素數(從左往右,像素數為正,反之為負)與它自身的mLeft值的和,撇開數值的結果,通俗的來講就是你這次移動之后,child的水平位置應該在哪里!為什么是應該呢,因為這個方法走完,緊接著系統會拿該方法回傳值作為view新的x坐標(即mLeft值),那么在系統告訴你view移動后,應該所處的位置與你最侄訓傳的位置之間,你可以做邊界判斷,例如:子view初始位置mLeft = 0,如果我將view向左滑動20px,那么此方法left就會回傳給我-20,而我又不想拿這個值作為子view的新的x坐標,那我回傳0,就可以讓子view水平還在原位置,以下兩個例子是left值的計算方法:
例子1:子view視圖的左頂點就在父布局的坐標原點處,當你手指從左往右滑動10個像素,left就等于像素數+10 加上view距離坐標原點橫坐標0,結果就是10;
例子2:父布局paddingleft 為20像素,如果單位是dp,最終也是轉為px計算的,子view的mleft = 20,當你手指從右往左滑動10個像素,left就等于像素數-10+20=10;
left理解通透之后,dx就好說了,還記得剛提到的可正可負的像素數嗎,哈哈,dx就是它!綜上,可以得出一個公式:left = view.getLeft()+dx.
3.clampViewPositionVertical和上一個方法就是雙胞胎兄弟,這個我就不多介紹了,更多的文字留給更神秘的方法,
public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy)
4.這個方法的解釋我覺得直接看源代碼更好理解:
private void dragTo(int left, int top, int dx, int dy) {
int clampedX = left;
int clampedY = top;
final int oldLeft = mCapturedView.getLeft();
final int oldTop = mCapturedView.getTop();
if (dx != 0) {
clampedX = mCallback.clampViewPositionHorizontal(mCapturedView, left, dx);
ViewCompat.offsetLeftAndRight(mCapturedView, clampedX - oldLeft);
}
if (dy != 0) {
clampedY = mCallback.clampViewPositionVertical(mCapturedView, top, dy);
ViewCompat.offsetTopAndBottom(mCapturedView, clampedY - oldTop);
}
if (dx != 0 || dy != 0) {
final int clampedDx = clampedX - oldLeft;
final int clampedDy = clampedY - oldTop;
mCallback.onViewPositionChanged(mCapturedView, clampedX, clampedY,
clampedDx, clampedDy);
}
}
當view被拖動,會呼叫這個dragTo,這個方法將以上3個方法的執行順序以及引數傳遞,描述的非常清楚,可以看到onViewPositionChanged()引數中的left,top分別是前兩個方法回傳給我們的,末尾的dx,dy對我們移動view也有用,待會可以看到,
public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
5.顧名思義,這個方法就是當我們手指離開view時呼叫的,xvel ,yvel分別是手指離開view時,view在x,y軸上的速度,這里的速度是指每秒劃過的像素數,這個方法執行后,假如我們想讓view恢復至初始位置,就可以在這里面呼叫,根據速度,我們可以做些速度判斷,了解用戶到底想不想滑動,還是勻速滑動,埋個伏筆,待會寫控制元件時,這個方法里面可以做些文章,
public int getViewHorizontalDragRange(@NonNull View child) {}
6.這個函式的使用和子view的點擊事件關聯性很大,同時結合事件分發,才能完整的將子view的點擊事件合理的處理,所以這個方法我在第二篇單獨講它的使用,現在你可以不重寫它,今天主要目標,讓我們的控制元件滑起來!
這幾個回呼函式介紹完,看看xml布局,我們繼承水平的LinearLayout去實作,
<com.lq.counter.swipeLayout.MyLinearSwipeLayout
android:id="@+id/sample1"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/bottom_layout"
android:background="@mipmap/sceen"
android:orientation="horizontal"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
<LinearLayout
android:id="@+id/bottom_wrapper"
android:background="#66ddff00"
android:layout_width="160dp"
android:orientation="horizontal"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv1"
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="洗掉"
android:background="@mipmap/wind"
/>
<TextView
android:layout_width="80dp"
android:layout_height="match_parent"
android:text="收藏"
android:background="@mipmap/kaer"
/>
</LinearLayout>
</com.lq.counter.swipeLayout.MyLinearSwipeLayout>
父布局里面有兩個子LinearLayout,第一個我們稱為surface,它寬度為match_parent,是可見的布局,第二個我們稱為bottom,它在螢屏之外,是隱藏的布局(這里是最基本的概念),
1.首先在我們SwipeLayout的構造方法中初始化ViewDragHelper:helper = ViewDragHelper.create(this,callback);
2.準備好5個待會要用的方法:
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return helper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
helper.processTouchEvent(event);
return true;
}
private View getSurfaceView(){
return getChildAt(0);
}
private View getBottomView(){
return getChildAt(1);
}
private enum State{
CLOSE,
OPEN
}
這里可以看到將控制元件的攔截和處理全都放權給了viewDragHelper,當然了,當你遇到子view點擊事件莫名其妙的失效或者產生時,你就要在攔截處理里面找突破口,不過今天我們不涉及子view的點擊事件處理,只是為了完成滑動展示兩個隱藏子view就行,
3.開始重寫Callback
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
private State state;
@Override
public boolean tryCaptureView(@NonNull View child, int pointerId) {
if (getSurfaceView().getLeft() == 0){
state = State.CLOSE;
}else {
state = State.OPEN;
}
return true;
}
};
注意:getSurfaceView.getLeft==0,這么寫是基于父布局paddingleft = 0來寫的,不過不要緊,這里在捕獲子view時,先記錄了bottomLayout 是展示還是隱藏的,待會會用到這個狀態,
接著給兩個子view水平滑動設定邊界:
@Override
public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
if (child == getSurfaceView()) {
if (left > 0) {
left = 0;
}
if (left < -getBottomView().getMeasuredWidth()) {
left = -getBottomView().getMeasuredWidth();
}
} else {
int marleft = getSurfaceView().getMeasuredWidth() - getBottomView().getMeasuredWidth();
if (left < marleft){
left = marleft;
}
}
return left;
}
surface有兩處邊界,bittomLayout只有一處邊界,理解他們各自的臨界狀態,可以通過畫些草圖,看bottomLayout完全展示和完全隱藏這兩種極端情況,
在回過頭看看上方的dragTo()方法,你會發現在呼叫了clampViewPositionHorizontal 之后,子view就會移動到新設定好的位置,但有個問題,既然我拖動的子view移動了,另一個子view卻依舊在原地,怎么辦,這時
onViewPositionChanged()就可以解決這個問題,我們讓另一個view也跟著移動,
@Override
public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy) {
if (changedView == getSurfaceView()){
getBottomView().offsetLeftAndRight(dx);
}else {
getSurfaceView().offsetLeftAndRight(dx);
}
invalidate();
}
為什么使用dx,我把dragTo的代碼再給大家看一次,并標注了一下,就更清楚了,一個子view移動多少距離,另一個子view也緊跟著在相同方向移動相同的距離,這樣整體看起來父布局就整個在滑動:

如果你寫到這里,其實我們的view已經可以滑起來,但你會感覺手感欠佳,比如bottomLayout會展示一部分,一部分還在螢屏外,我想快速滑動一小段距離就把整個bottomLayout給展示出來,而不是滑動一整個
隱藏view的寬度才能看到它,對對對!這些都是缺點,接下來,今天介紹的最后一個回呼onViewRelased 將解決這些問題,
@Override
public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
float minV = helper.getMinVelocity()*5;
float fraction = state == State.CLOSE ? 0.25f:0.75f;
if (Math.abs(xvel) > minV){
if (state == State.CLOSE){
if (xvel > 0 ){
close();
}else {
open();
}
}else {
if (xvel >0){
close();
}else {
open();
}
}
}else {
//勻速
if(Math.abs(getSurfaceView().getLeft()) > getBottomView().getMeasuredWidth()*fraction){
open();
}else {
close();
}
}
invalidate();
}
1.這里有最小速度閾值,默認是100px/s,我乘以5是為了降低速度的敏感度,當大于最小速度,我們可以認為用戶快速地滑動了一下,那么根據當前狀態,可以分兩組情況:
現在是關閉,如果用戶快速右滑,xvel>0,那么就是關閉,如果左滑呢,那么就是打開,
現在是關閉,推理同上,
2.小于最小速度,那么就是勻速滑動,或慢慢滑動,這時不再以速度作為參考標準,而以surfaceLayout滑動的距離與bottomLayout的占比fraction的大小比較作為用戶意圖的評判標準,分兩種情況:
現在是關閉,此時fraction = 0.25,我們判斷如果surface的x坐標超過了bottomLayout寬度的四分之一,那么就是打開,當然,我們此時使用的surface的x的絕對值,而這個值其實是不會大于0的,
因為在水平移動時,mLeft已經做了邊界處理,
現在是打開,此時fraction = 0.75;這時surface隱藏在螢屏左邊的區域大小恰好就是bottomLayout整個的寬度,當用戶左滑時,getSuefaceView的橫坐標絕對值沒有改變,還是bottomLayout的
寬度,所以還是打開,當用戶右滑時,surface的mleft在bottomLayout的寬度比例1.0至0.75區間內,都可以認為維持現狀,即open,一旦到了[0.75,0]區間,那么就認為是關閉,
接下來看open與close的實作:
private void close(){
helper.smoothSlideViewTo(getSurfaceView(), 0, 0);
}
private void open(){
helper.smoothSlideViewTo(getSurfaceView(),-getBottomView().getMeasuredWidth(),0);
}
這兩個方法都呼叫了smoothSlideViewTo,它的作用就是將你的view平滑地滾動到指定的位置,到了這里,不知道你是否留意到,我滾動的view都是surfaceLayout,為什么bottomLayout不去也調這個方法,
難道還讓它待在原地嗎,其實,我在open和close后面都加了一行invalidate,它讓我們的父布局重新layout一次,你把surfaceLayout移到坐標原點處,那么按照LinearLayout的布局特征,它會把另一個
子view的布局引數也挪到surfaceLayout后頭,而且,這個方法它本身只是設定好了view的終點位置,真正觸發滾動,還得用invalidate,它的實作跟scroller是類似的,在第一次重繪時,呼叫computeScroll,
在computeScroll里面判斷是否已經移到終點,沒有的話接著invalidate,invalidate里面又會去重繪,,,這樣一直持續下去,直至,computeScroll里面認定view已經到達終點,就不再調invalidate,
@Override
public void computeScroll() {
if (helper.continueSettling(true)){
ViewCompat.postInvalidateOnAnimation(this);
}
}
這里我們用continueSetting來判斷影片是否應該繼續,為什么用它呢,api檔案里提示了:

前面說過每次重繪都會呼叫computeScroll,而這個方法是空實作,所以我們就在它里面判斷是否要繼續執行影片,回傳值為ture就是繼續執行影片,當然了,continueSetting()這個方法為什么傳true,
因為這個方法前頭有一段感人肺腑的話:Set this to true if you are calling this method from{@link android.view.View#computeScroll()},讓我節約了不少腦細胞,還有一點,如果繼續執行影片,
ViewCompat.postInvalidateOnAnimation(this)換成invalidate也可以,最后是完整代碼,真的沒有150行!!!
public class SwipeLayout extends LinearLayout {
private ViewDragHelper helper;
public SwipeLayout(Context context) {
this(context,null);
}
public SwipeLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public SwipeLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
helper = ViewDragHelper.create(this,callback);
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
private State state;
@Override
public boolean tryCaptureView(@NonNull View child, int pointerId) {
if (getSurfaceView().getLeft() == 0){
state = State.CLOSE;
}else {
state = State.OPEN;
}
return true;
}
@Override
public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
if (child == getSurfaceView()) {
if (left > 0) {
left = 0;
}
if (left < -getBottomView().getMeasuredWidth()) {
left = -getBottomView().getMeasuredWidth();
}
} else {
int marleft = getSurfaceView().getMeasuredWidth() - getBottomView().getMeasuredWidth();
if (left < marleft){
left = marleft;
}
}
return left;
}
@Override
public void onViewPositionChanged(@NonNull View changedView, int left, int top, int dx, int dy) {
if (changedView == getSurfaceView()){
getBottomView().offsetLeftAndRight(dx);
}else {
getSurfaceView().offsetLeftAndRight(dx);
}
invalidate();
}
@Override
public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
float minV = helper.getMinVelocity()*5;
float fraction = state == State.CLOSE ? 0.25f:0.75f;
if (Math.abs(xvel) > minV){
if (state == State.CLOSE){
if (xvel > 0 ){
close();
}else {
open();
}
}else {
if (xvel >0){
close();
}else {
open();
}
}
}else {
//勻速
if(Math.abs(getSurfaceView().getLeft()) > getBottomView().getMeasuredWidth()*fraction){
open();
}else {
close();
}
}
invalidate();
}
};
private void close(){
helper.smoothSlideViewTo(getSurfaceView(), 0, 0);
}
private void open(){
helper.smoothSlideViewTo(getSurfaceView(),-getBottomView().getMeasuredWidth(),0);
}
@Override
public void computeScroll() {
if (helper.continueSettling(true)){
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return helper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
helper.processTouchEvent(event);
return true;
}
private View getSurfaceView(){
return getChildAt(0);
}
private View getBottomView(){
return getChildAt(1);
}
private enum State{
CLOSE,
OPEN
}
}
至此,這個控制元件滑一滑是沒問題的,但點一點是沒什么反應的,下一篇,我們給這個控制元件加上點擊事件,還是基于這個類,相信,基于這個簡單控制元件的使用,dragViewHelper的基本使用是沒太大問題的,
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/11399.html
標籤:Android
