Android ViewDragHelper仿淘寶拖動(dòng)加載效果
拖動(dòng)加載是我在淘寶的商品詳情界面發(fā)現(xiàn)的，感覺(jué)很實(shí)用。于是就分析它的實(shí)現(xiàn)方式，感覺(jué)用ViewDragHelper可以很方便的實(shí)現(xiàn)這種效果。下面大致把我的思路分步驟寫(xiě)一下。先上圖吧。
首先建工程什么的我就不多說(shuō)了。咱從ViewDragHelper的實(shí)現(xiàn)開(kāi)始說(shuō)吧，ViewDragHelper一般用在一個(gè)自定義ViewGroup的內(nèi)部,可以對(duì)其子View進(jìn)行移動(dòng)操作。
創(chuàng)建自定義ViewGroup：
package com.maxi.viewdraghelpertest.widget;
import android.content.Context;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;
public class DragHelperLayout extends LinearLayout{
private ViewDragHelper mDragHelper;
@SuppressWarnings("static-access")
public DragHelperLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
/*
* 創(chuàng)建帶回調(diào)接口的ViewDragHelper
*/
mDragHelper = ViewDragHelper.create(this, 10.0f,new DragHelperCallback());// 參數(shù)一:該類生成的對(duì)象(當(dāng)前的ViewGroup)
// 參數(shù)二：敏感度（越大越敏感）
}
class DragHelperCallback extends ViewDragHelper.Callback {
@Override
public boolean tryCaptureView(View arg0, int arg1) {
// TODO Auto-generated method stub
return false;
}
}
}
然后將觸摸事件傳遞給ViewDragHelper:
@Override
public boolean onInterceptTouchEvent(MotionEvent event)
{
return mDragHelper.shouldInterceptTouchEvent(event);//是否應(yīng)該打斷MotionEvent的傳遞
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
mDragHelper.processTouchEvent(event);
return true;
}
接著我們開(kāi)始實(shí)現(xiàn)DragHelperCallback，這個(gè)ViewDragHelper.Callback回調(diào)中可以對(duì)ViewGroup中的一些View進(jìn)行操作,在此我們只對(duì)本項(xiàng)目涉及到的相關(guān)用法做解析，詳細(xì)點(diǎn)請(qǐng)自行查閱資料。
class DragHelperCallback extends ViewDragHelper.Callback {
@Override
public boolean tryCaptureView(View arg0, int arg1) {
// TODO Auto-generated method stub
return true; //返回true表示可以捕捉ViewGroup中的View
}
/*
* (non-Javadoc)
* @see android.support.v4.widget.ViewDragHelper.Callback#clampViewPositionVertical(android.view.View, int, int)
* 限定View豎直方向上的活動(dòng)區(qū)域，防止滑出ViewGroup
*/
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
int topBound = getPaddingTop();
int bottomBound = getHeight() - child.getHeight() - topBound;
int newHeight = Math.min(Math.max(top, topBound), bottomBound);
return newHeight;
}
}
在上面的代碼段中我已經(jīng)做了注釋，在clampViewPositionVertical中我們對(duì)View的豎直方向活動(dòng)區(qū)域做了限制，防止滑出ViewGroup,當(dāng)然你可以直接return top;不過(guò)為了效果我先這么限定一下。還有一個(gè)clampViewPositionHorizontal方法，同樣是對(duì)其水平邊界進(jìn)行控制的，先不多說(shuō)啦。這個(gè)時(shí)候咱們自定義的ViewGroup初期已經(jīng)完成，先去試試水。
在activity_main.xml中加入
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.maxi.viewdraghelpertest.MainActivity" >
<com.maxi.viewdraghelpertest.widget.DragHelperLayout
android:id="@+id/dhl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/darker_gray"
>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@android:color/holo_blue_bright"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@android:color/holo_orange_dark"
/>
</com.maxi.viewdraghelpertest.widget.DragHelperLayout>
</RelativeLayout>
運(yùn)行后的效果：
大家是不是都急了，做個(gè)拖動(dòng)加載怎么搞起這東西了，不要急，這才剛剛開(kāi)始，大家想想拖動(dòng)加載是不是就是兩個(gè)View在同一個(gè)ViewGroup里通過(guò)ViewDragHelper的滑動(dòng)操作然后實(shí)現(xiàn)的？是不是有思路的？沒(méi)有思路也沒(méi)關(guān)系，咱慢慢來(lái)，想要兩個(gè)View相關(guān)聯(lián)，就是拖動(dòng)一個(gè)View然后另一個(gè)View跟著它走該怎么實(shí)現(xiàn)呢？首先我們需要ViewDragHelper回調(diào)里的另一個(gè)方法onViewPositionChanged，該方法是在View位置發(fā)生改變時(shí)回調(diào)的。為的就是在上面的View上拉的時(shí)候讓下面的View跟著往上走。來(lái)看看我們的實(shí)現(xiàn)方法：
首先先將兩個(gè)View初始化：
private View t1, t2;
/*
* (non-Javadoc)
* @see android.view.View#onFinishInflate()
* 初始化兩個(gè)View
*/
@Override
protected void onFinishInflate() {
t1 = getChildAt(0);
t2 = getChildAt(1);
}
得到兩個(gè)View后我們?cè)诨卣{(diào)中判斷哪個(gè)位置發(fā)生了改變，
@Override
public void onViewPositionChanged(View changedView, int left, int top,
int dx, int dy) {
// TODO Auto-generated method stub
int childIndex = 1;
if (changedView == t2) {
childIndex = 2;
}
viewFollowChanged(childIndex, top);
}
上面的代碼段中有個(gè)方法viewFollowChanged，主要實(shí)現(xiàn)的就是View跟著動(dòng)。
private void viewFollowChanged(int viewIndex, int posTop) {
viewH = t1.getMeasuredHeight();
if (viewIndex == 1) {
int offsetTopBottom = viewH + t1.getTop() - t2.getTop();
t2.offsetTopAndBottom(offsetTopBottom);
} else if (viewIndex == 2) {
int offsetTopBottom = t2.getTop() - viewH - t1.getTop();
t1.offsetTopAndBottom(offsetTopBottom);
}
invalidate();
}
在運(yùn)行是不是發(fā)現(xiàn)沒(méi)有被點(diǎn)擊拖動(dòng)的View會(huì)跟著View一起移動(dòng)，像一個(gè)整體雙宿雙飛。圖我就不加了，大家運(yùn)行看吧。因?yàn)槲覀円@取View的實(shí)際大小所以需要以下代碼段的支持：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(
resolveSizeAndState(maxWidth, widthMeasureSpec, 0),
resolveSizeAndState(maxHeight, heightMeasureSpec, 0));
}
public static int resolveSizeAndState(int size, int measureSpec,
int childMeasuredState) {
int result = size;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = size;
break;
case MeasureSpec.AT_MOST:
if (specSize < size) {
result = specSize | MEASURED_STATE_TOO_SMALL;
} else {
result = size;
}
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result | (childMeasuredState & MEASURED_STATE_MASK);
}
然后我們可以嘗試將兩個(gè)View滿屏，android:layout_height="match_parent"，把clampViewPositionVertical方法里限制的邊界去掉吧，暫時(shí)先return top;這樣試一下是不是有點(diǎn)像拖動(dòng)加載了，呵呵噠，可是第一個(gè)View下拉的時(shí)候由于上面沒(méi)有View怎么辦？我們可以在clampViewPositionVertical中將它限定邊界??！
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
int slideTop = top;
if (child == t1) {
if (top > 0) {
slideTop = 0;
}
} else if (child == t2) {
if (top < 0) {
slideTop = 0;
}
}
return child.getTop() + (slideTop - child.getTop());
}
已經(jīng)大致成型了，然后就是拖動(dòng)的時(shí)候?qū)iew自動(dòng)置頂或置底，因?yàn)樽詣?dòng)置頂或置底是在滑動(dòng)松開(kāi)之后，所以就需要用到ViewDragHelper回調(diào)里的onViewReleased方法，該方法就是在滑動(dòng)松開(kāi)之后調(diào)用，接下來(lái)實(shí)現(xiàn)它：
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
putStickOrDown(releasedChild);// 滑動(dòng)松開(kāi)后，需要置頂或置底
}
private void putStickOrDown(View releasedChild, float yvel) {
int finalTop = 0; // 默認(rèn)是粘到最頂端
if (releasedChild == t1) {
// 滑動(dòng)第一個(gè)view松開(kāi)
if (yvel < 0)//靈敏度自己調(diào)吧
finalTop = -viewH;
} else {
// 滑動(dòng)第二個(gè)view松開(kāi)
if (yvel > 0)//同上
finalTop = viewH;
}
if (mDragHelper.smoothSlideViewTo(releasedChild, 0, finalTop)) {
ViewCompat.postInvalidateOnAnimation(this);// 會(huì)在下一個(gè)Frame開(kāi)始的時(shí)候，發(fā)起一些invalidate操作
}
}
@Override
public void computeScroll() {
if (mDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
ok，是可以自動(dòng)置頂或置底了。對(duì)了，那種拖動(dòng)粘滯效果可以設(shè)置clampViewPositionVertical里的返回值，return child.getTop() + (finalTop - child.getTop()) / num;num值越大越粘滯。
然后淘寶第一個(gè)View是可以滑動(dòng)的滑動(dòng)到最底部然后才把手勢(shì)事件交給ViewDragHelper處理的。這塊試想如果用ScrollView的話，手勢(shì)事件肯定會(huì)優(yōu)先被它消費(fèi)，這樣肯定達(dá)不到我們想要的效果，所以在此我們需要對(duì)ScrollView進(jìn)行自定義，大致的實(shí)現(xiàn)思路是當(dāng)用戶用戶從觸發(fā)屏幕開(kāi)始判斷是不是ScrollView在最底端，如果在最底端然后判斷手勢(shì)是否是向上滑動(dòng)的如果也是則滿足條件將touch事件交給父View就可以了，即requestDisallowInterceptTouchEvent該方法。然后自定義的ViewGroup中的onInterceptTouchEvent方法也要做相應(yīng)修改，這里用GestureDetectorCompat處理事件，其回調(diào)用來(lái)判斷是否是上下滑動(dòng)。先聲明private GestureDetectorCompat gestureDC;然后再gestureDC = new GestureDetectorCompat(context,new YSlideDetector());
class YSlideDetector extends SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2,
float distanceX, float distanceY) {
// TODO Auto-generated method stub
return Math.abs(distanceY) > Math.abs(distanceX);//Y方向絕對(duì)值大于X方向，上下滑動(dòng)
}
}<pre name="code" class="java"> @Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean is_y_slide = gestureDC.onTouchEvent(event);
boolean shouldIntercept = mDragHelper.shouldInterceptTouchEvent(event);
int action = event.getActionMasked();
if (action == MotionEvent.ACTION_DOWN) {
mDragHelper.processTouchEvent(event);// action_down時(shí)就讓mDragHelper開(kāi)始工作，否則有時(shí)候?qū)е庐惓?
}
return shouldIntercept && is_y_slide;
}
OK。就這樣。是不是達(dá)到了想要的效果了？
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)ImageView圖片縮放和拖動(dòng)
- Android實(shí)現(xiàn)跟隨手指拖動(dòng)并自動(dòng)貼邊的View樣式(實(shí)例demo)
- Android自定義View實(shí)現(xiàn)拖動(dòng)選擇按鈕
- Android實(shí)現(xiàn)單頁(yè)面浮層可拖動(dòng)view的一種方法
- Android通過(guò)自定義ImageView控件實(shí)現(xiàn)圖片的縮放和拖動(dòng)的實(shí)現(xiàn)代碼
- Android開(kāi)發(fā)實(shí)現(xiàn)可拖動(dòng)排序的ListView功能【附源碼下載】
- Android DragImageView實(shí)現(xiàn)下拉拖動(dòng)圖片放大效果
- Android RecyclerView滑動(dòng)刪除和拖動(dòng)排序
- Android自定義View圓形和拖動(dòng)圓、跟隨手指拖動(dòng)效果
- android實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)view
相關(guān)文章
Android?startActivityForResult的調(diào)用與封裝詳解
startActivityForResult?可以說(shuō)是我們常用的一種操作了，目前有哪些方式實(shí)現(xiàn)?startActivityForResult?的功能呢？本文就來(lái)和大家詳細(xì)聊聊2023-03-03
這篇文章主要介紹了Android性能優(yōu)化全局異常處理詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容協(xié)商，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Android播放視頻的三種方式，使用其自帶的播放器、VideoView、MediaPlayer類和SurfaceView來(lái)實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-07-07
使用android studio導(dǎo)入模塊的兩種方法(超詳細(xì))
這篇文章主要介紹了使用android studio導(dǎo)入模塊的兩種方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Android發(fā)布項(xiàng)目到j(luò)itpack的完整步驟
這篇文章主要給大家介紹了關(guān)于Android發(fā)布項(xiàng)目到j(luò)itpack的完整步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Android 解決TextView排版參差不齊的問(wèn)題
這篇文章主要介紹了Android 解決TextView排版參差不齊的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-01-01
Android實(shí)現(xiàn)登錄郵箱的自動(dòng)補(bǔ)全功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)登錄郵箱的自動(dòng)補(bǔ)全功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
Android開(kāi)發(fā)MQTT協(xié)議的模型及通信淺析
這篇文章主要W為大家介紹了Android開(kāi)發(fā)MQTT協(xié)議的模型及通信淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Android TreeView效果實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了Android TreeView效果實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了Android TreeView效果的實(shí)現(xiàn)原理與具體技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-02-02
Android獲取手機(jī)位置的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)位置的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11