事实上,有非常多方法能够实现一个Layout的抽屉拉伸效果,最常常的方法就是自己定义一个ViewGroup,然后控制点击事件。控制移动之类的,这样的方法的代码量多,并且实现起来复杂,后期维护添加其它效果也非常麻烦,直到今天看到了 ViewDragHelper这个类,就是专门为实现View的移动而生的。我就试着开发了一个抽屉拉伸的效果,效果图例如以下:
全部移动的控制在ViewDragHelper.Callback里面来实现。移动就用dragHelper.smoothSlideViewTo来实现,并且Callback集成了很多的方法。方便后期的维护或者添加其它功能。
首先看下最核心的DragLayout的代码
public class DragLayout extends LinearLayout {
private ViewDragHelper dragHelper;
private View mDragView, contentView;
private int dragRange;
public DragLayout(Context context) {
super(context);
init();
}
public DragLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public DragLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
public DragLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
dragHelper = ViewDragHelper.create(this, callback);
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mDragView = findViewById(R.id.dragView);
contentView = findViewById(R.id.contentView);
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
@Override
public boolean tryCaptureView(View child, int pointerId) {
return child == mDragView;
}
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
contentView.layout(0, top + mDragView.getHeight(), getWidth(), top + mDragView.getHeight() + dragRange);
}
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
int topBound = getHeight() - dragRange - mDragView.getHeight();
int bottomBound = getHeight() - mDragView.getHeight();
final int newHeight = Math.min(Math.max(topBound, top), bottomBound);
return newHeight;
}
@Override
public int getViewVerticalDragRange(View child) {
return dragRange;
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
if (yvel > 0) {
smoothToBottom();
}else if (yvel < 0) {
smoothToTop();
}
}
};
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
dragRange = contentView.getMeasuredHeight();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mDragView.layout(0, getHeight() - mDragView.getHeight(), getWidth(), getHeight());
contentView.layout(0, getHeight(), getWidth(), getHeight() + dragRange);
}
@Override
public boolean onInterceptHoverEvent(MotionEvent event) {
final int action = MotionEventCompat.getActionMasked(event);
if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
dragHelper.cancel();
return false;
}
return dragHelper.shouldInterceptTouchEvent(event);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
dragHelper.processTouchEvent(event);
return true;
}
private void smoothToTop() {
if (dragHelper.smoothSlideViewTo(mDragView, getPaddingLeft(), getHeight() - dragRange - mDragView.getHeight())) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
private void smoothToBottom() {
if (dragHelper.smoothSlideViewTo(mDragView, getPaddingLeft(), getHeight() - mDragView.getHeight())) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
public void computeScroll() {
if (dragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
}
在这里面,初始化了ViewDragHelper
dragHelper= ViewDragHelper.create(this, callback);
设置垂直方向的移动距离,这里设置为listview的高度:
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
int topBound = getHeight() - dragRange - mDragView.getHeight();
int bottomBound = getHeight() - mDragView.getHeight();
final int newHeight = Math.min(Math.max(topBound, top), bottomBound);
return newHeight;
}
监听位置的移动,移动listview。让他始终挨在DrawView的以下:
@Overridepublic voidonViewPositionChanged(View changedView, intleft, inttop, intdx, intdy) {
contentView.layout(0, top + mDragView.getHeight(), getWidth(), top + mDragView.getHeight() + dragRange);
}
在OnLayout里面又一次布局。隐藏listView:
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mDragView.layout(0, getHeight() - mDragView.getHeight(), getWidth(), getHeight());
contentView.layout(0, getHeight(), getWidth(), getHeight() + dragRange);
}
接下来是XML的布局:
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/dragView"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/holo_blue_light"/>
android:scrollbars="none"
android:id="@+id/contentView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@android:color/holo_green_light"/>
非常easy。自己定义的View里面放置两个View
最后的MainActivity:
public class MainActivity extends AppCompatActivity {
String[] listItems = {"item 1", "item 2 ", "list", "android", "item 3", "foobar", "bar", };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.contentView);
listView.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, listItems));
}
}
最后,这个Demo仅仅是实现一个非常easy的功能,只是大概能够看到ViewDragHelper的强大。强烈建议去了解下,这个是两个API的地址
最后,附上源代码链接