上篇博文带大家分析学习了关于ViewDragHelper的简单基本用法,本篇将带大家用ViewDragHelper做一个简单侧滑菜单的Demo,并通过对ViewDragHelper源码的简单分析,找到其与ScrollView滑动事件冲突的原因与解决方法。闲话少说,直入正题,首先来看一下运行效果。
首先,我们先看一下布局文件,以便整体了解界面布局结构:
<LinearLayout 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"
android:baselineAligned="false"
android:orientation="vertical"
tools:context="com.example.caifengyao.drawerlayout.MainActivity">
<com.example.caifengyao.drawerlayout.DragViewGroup
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:background="#00aacc"
android:gravity="center"
android:text="我是标题"
android:textStyle="bold" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tv">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#aa00ff" />
<TextView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#00ffaa" />
</LinearLayout>
</ScrollView>
<ScrollView
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_marginLeft="-300dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@color/colorPrimary" />
</LinearLayout>
</ScrollView>
</com.example.caifengyao.drawerlayout.DragViewGroup>
</LinearLayout>
通过看布局,我们可以发现com.example.caifengyao.drawerlayout.DragViewGroup就是我们的自定义侧滑菜单布局,它实际上是继承自RelativeLayout,它里面又放置三个内容,第一个就是标题了,第二个ScrollView就是页面的Content,第三个ScrollView就是我们的侧滑内容,并且它的marginLeft属性设置为了-300dp,使其可以偏离出屏幕左面。
下面就是我们的DragViewGroup代码了,我们来看下代码实现:
public class DragViewGroup extends RelativeLayout {
private ViewDragHelper mViewDragHelper;
private View mMainView;
private int mWidth;
public DragViewGroup(Context context) {
super(context);
initView();
}
public DragViewGroup(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mMainView = getChildAt(2);
}
private void initView() {
mViewDragHelper = ViewDragHelper.create(this, callback);
mViewDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = mMainView.getMeasuredWidth();
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return mViewDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
mViewDragHelper.processTouchEvent(ev);
return true;
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
@Override
public boolean tryCaptureView(View child, int pointerId) {
return mMainView == child;
}
@Override
public void onEdgeDragStarted(int edgeFlags, int pointerId) {
super.onEdgeDragStarted(edgeFlags, pointerId);
mViewDragHelper.captureChildView(mMainView, pointerId);
}
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
return 0;
}
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return Math.min(left, 0);//使展开的最大程度不超过菜单的整体宽度
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
if (mMainView.getRight() < mWidth / 2) {//当拖动距离小于侧划菜单宽度的一半时,菜单收回
mViewDragHelper.smoothSlideViewTo(mMainView, -mWidth, 0);
ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
} else {//当拖动距离大于等于侧划菜单宽度的一半时,菜单完全展开
mViewDragHelper.smoothSlideViewTo(mMainView, 0, 0);
ViewCompat.postInvalidateOnAnimation(DragViewGroup.this);
}
}
};
@Override
public void computeScroll() {
if (mViewDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
}
可以看到,代码与上篇博文的基本没什么差别,各方法作用在上篇博文也已经做出来讲解,这里就不在赘述,不清楚的朋友可以查看我的上篇博文:
ViewDragHelper用法介绍,快捷的拖动效果设计。
这里,主要说两个地方,首先我在clampViewPositionHorizontal方法中返回的是Math.min(left, 0),而不再是left,原因是我不希望侧滑菜单被过分的拖动。因为他是隐藏在左屏幕外,所以他的X轴坐标是负的,在拖动过程中,left一直是负数且逐渐增大,当left为0的时候,其完全展开,菜单左边界与屏幕左